はじめにすでにバックエンドのテストは導入されているため、今回はフロントテストの導入を行いました。 なぜフロントテストを導入しようと思ったのか？開発生産性向上の取り組みを行うにあたり、テストを書いた方が機能追加や、リファクタリングなどがしやすくなり、長い目で見てテストがある方が開発生産性が向上すると判断したからです。またコード変更毎に手動で確認する手間も省け、開発効率も向上するためです。 テストの利点テストの利点についてはさまざまな書籍で話されているので詳しく書く必要はないと思いますが、主に以下の利点があります。バグの早期発見リファクタリングの安全性向上新規機能...

シードデータで動作確認して大丈夫だったのに、本番反映してみたら想定してなかった挙動・エラーが出た😱そんな経験はありませんか。恥ずかしながら私は今までに何回もありました。機能開発だけじゃなくバッチやマイグレーションなんかでも発生しがちなコレ。またはシードデータで動作確認できても、本番データでも通用するか検証ができないままプルリクを作る、なんていうこともあると思います。今回はこちらを無くす試みをしたお話です。 「もう本番DBで開発しちゃえばいいじゃない」の問題点この課題を解決するには、極論すると本番DBで開発するしかないのですが、そうなると言うまでもなく以下の問題が出てきます。レ...

最近CIの見直しをして大きく時間を短縮できたのですが、rspecだけ目立って残ってしまいましたので、こちらも高速化するためにテストを分割して並列で処理させてみました。Github Actionsのmatrixは通常の用途としては複数の環境（言語バージョン、プラットフォーム）でもビルド（テスト）することかと思いますが、マルチプロセス的に処理している特性を利用してみました。もともとこれがこうなります。 parallel_tests導入とローカル環境で実行ドキュメント通り以下を追加してインストールgem 'parallel_tests', group: [:developmen...

はじめにMySQL8.0と互換性のあるAmazon Aurora MySQL 3は、2021年11月にリリースされ早2年が経過しました。弊社では可能な限りマネージドに乗っかる方針でインフラを運用しており、新しいバージョンは便利な機能が発表されても利用できない傾向にあることもあり、これまで見送ってきました。Game8.jpでは、データベースサービスとしてAWSのAurora（MySQL)を利用しており、上記方針によりAurora MySQL 2を利用してきましたが、標準サポート終了が来年10月に迫っている分析に必要な機能やパフォーマンス面で8.0が必要MySQL8.0が主...

GoogleのBigQueryに保存されているデータを活用してランキング機能を作成したかった為、RailsのGemにある google-cloud-bigquery を使ってBigQueryから必要なデータの取得を行いました。その際に、毎回同じリクエストを叩くとその度に料金が発生してしまい非常に勿体無いため、Railsに備わっているキャッシュ機能と組み合わせて、最低限のリクエストで済むようにしました。 google-cloud-bigqueryの使い方google-cloud-bigquery は、Googleが公式で提供してくれているGemなので、こちらの公式ドキュメントを参考...

配列の最後を得るならlength, pop, slice、そして新しい記法のat以下の配列があるとして、最後の要素である"e"を取得するには、以下の方法があり、全て同じ出力になります。const array = ["a", "b", "c", "d", "e"]console.log(array[array.length - 1]) // "e"console.log(array.at(-1)) // "e"console.log(array.slice(-1)[0]) // "e"console.log(array.pop()) // "e" ※ただし元の配列にも影響す...

はじめに今回は、キャリア採用でゲームエイトに入社したデザイナーが、周囲から信頼を得るために取った行動などを紹介します。転職を考えている方、特に自分の経験を別の組織でも活かせるかと不安に感じている方の不安解消につながればと思います。 入社前のプレッシャー私がゲームエイトに入社したのは2022年の4月で、当時42歳でした。開発部内のデザイングループでのリーダーポジションとしての入社です。これまでに何度か転職を経験してきましたが、20代の頃の転職と比べると周囲に果たすべき役割も変わってきていると実感しました。転職の目的が『自己の成長』だけでなく、『経験を周囲に還元すること』でもある...

みなさん、Figmaはどのくらい使いこなせていますか？日々進化しているFigmaですが、新しくアップデートで加わった「バリアブル（variable）」という機能について詳しく解説します！!このページで紹介するクリックアクションに「バリアブルを設定する」と「条件付きアクション」を適用するのは有料プランのみで利用可能になっています。 バリアブル（variable）とはバリアブル（variable）とは、編集可能な定義で、色や数字、文字列などの要素を保存しておける箱のようなものです。プログラムでいう「変数」と同じです。Figmaでは、バリアブルとして設定できる属性は以下の4種...

可読性の高いコードは保守性の高いコードとも言えるため、開発生産性を高める上でもできる限り読みやすいコードを書くことが、自分にとってもチームにとても大切なことであり重要なことです。私自身、まだまだ人に誇れるような可読性・保守性の高いコードを書くことはできていないと感じたため、ただ動けば良いというコードから可読性の高いコードを書くことができるエンジニアになるために、リーダブルコードを読み始めました。可読性の高いコードを書くためには、大きく分けて以下の4項目の改善が重要とのことです。 1. 表面上の改善名前・コメント・見た目のようなどんな状況下でも適用できる改善 2. ループとロ...

今回はゲームエイトのNext.jsが使われているプロダクトにて、ts-pruneを用いて一切参照されていないデッドコードを全て洗い出し、削除してみました。また、これ以降はデッドコードが発生しないようにGithub Actionsに組み込み、デッドコードが生まれたらCIがコケる仕組みを導入しました。!運悪く記事を書いた翌日(2023-12-17)にts-pruneはarchivedになってしまい、現在はknipを使うように案内がされています。しかし個人的にはts-pruneのほうがミニマムでシンプルなので、この記事はknipにアップデートすることなくts-pruneの用法を残してお...

イントロダクションみなさんはNext.jsでSVGをどのように扱っていますか？ReactならばReactComponent asで変換する方法を用いて簡単に描画ができますが、create-next-appで立ち上げたNext.jsだとそれが使えず、imgタグで描画している方もいらっしゃるのではないでしょうか。そこで今回はNext.jsでもSVGのReactコンポーネントを使えるようにするため、SVGファイルからReactコンポーネントに変換する方法をご紹介いたします。 SVGファイルをReactコンポーネントに変換するメリットまずはSVGファイルをReactコンポーネント...

はじめに請求書や発注書をweb上で作成してユーザーが閲覧・保存できるようにする際に、何かいい方法がないかなと調べたら何やらrailsにprawnと呼ばれるgemがあるらしく試してみました。Reactなどでもreact-pdfを使えばpdfの描画はできますが今回はrailsを使用して、URLを叩けばpdfが見れるようになるというのを一旦ゴールとします。 prawnを使う準備今回pdfを表示・作成するのに使うgemはprawnというgemです。tableの描画もすることがあると思うのでprawn-tableも合わせてインストールしましょう。gem 'prawn'g...

はじめに私は情報の整理が下手です。メモを取る行為そのものがまず苦手だし、書いたら書いたで煩雑だし、それを整理するのも億劫だし、その日の気分や体調によってたくさん書く日、全然書かない日、丁寧に書く日、雑に書く日などがあったりします。結果、どこに何を書いたか分からなくなったり、挙句の果てに内容を理解できず、書いたこと自体の意味を失うなんて経験を何度もしてきました。しかし、仕事の上では言うに及ばず、情報過多な昨今ではプライベートであっても PKM (Personal Knowledge Management) の重要性は高まっていると常々感じます。そこで、自分の負担を減らしつつ必要な情...

この記事は ゲームエイト開発部 Advent Calendar 2023 の記事です。 GAS の不便なところ、それはエディタだ！Google Apps Script（GAS）使ってますか？ちょっとしたことを実現するのにGASを使うこと多いですよね。私も業務でよく使用します。その際、一番気になるのが「普段使っているエディタで開発して、Githubで管理できればいいのに」ってことではないでしょうか。普段からGithubを使用して開発している人なら特にそう感じますよね。（※ GASにもバージョン管理の機能が 2023/8/23 のアップデートで追加されています。View &...

はじめに日頃業務を行う中で、改修や機能追加をする際にテストが書いていないと、対応後に手動でデバックして確認する作業をする必要があり、生産性があまりよろしくないと感じたため、Jestの導入を検討しましたが、自分はバックエンドのRspec以外のテストフレームワークを使用した経験がなく、Jestの導入を提案する土俵にも立てていなかったため、まずはJest入門する必要があり勉強をはじめました。その時にまとめた内容の一部を今日は共有したいと思います。全て共有するととても膨大なため、まずは「マッチャー関数」についての内容からにしたいと思います。 JestでTypescirptのコードを...

はじめに今回約２年ぶりに、Tailwind cssを触ってみた感想と困ったことだったり便利だったりしたことを書いていきます。改めて使ってみようと思った理由としては、自身が参画してないプロジェクトでTailwind cssを使用しており、良い評判を聞くからです。 Tailwind cssとは？Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。これは、低レベルのユーティリティクラスを提供し、それらを組み合わせて任意のデザインを構築できるようにすることを目的としています。基本的に、Tailwind CSSは多くの小さな、再利用可能なクラスを提供し、...

この記事は ゲームエイト開発部 Advent Calendar 2023 の16日目の記事です。 イントロ9月の初めにGame8の攻略記事における目次のデザインの改善を実施しました。主な変更点は下記のとおりです。背景色の変更横線のスタイル変更箇条書きの記号変更beforeafterここで、箇条書きのスタイルを変更した際に、一部の環境でデザインが崩れてしまう問題が発生してしまい、緊急で修正することになった話を書こうと思います。 TL;DR記号をIMEから入力する場合は機種依存文字に気をつけるそもそもデザイン/レイアウトとして記号を使...

この記事は ゲームエイト開発部 Advent Calendar 2023 の記事です。 RailsにおけるSQLインジェクションの防止 はじめに弊社では開発のバックエンドにRailsを採用しています。Railsではデフォルトにて脆弱性対策がされていますが、書き手側で考慮しないといけないこともあります。今回はその中でもSQLインジェクションに絞って話をしていきます。 SQLインジェクションとはSQLインジェクションは、攻撃者が不正なSQLコマンドをデータベースに注入し、セキュリティを侵害する攻撃手法です。一般的な攻撃例として、ウェブフォームからの攻撃が挙げられます。例...

はじめにはるか昔、年末年始に全世界で多くのユーザーにご利用いただいたサービス「2015bestnine」を開発していました。簡単に説明すると、2015年にInstagramに投稿した画像の中でもっともいいねがついた画像を9個取り出して、その９枚を並べて１つの画像にするというサービスです。めちゃバズったわけですが、APIの利用に際して厳しい審査が必要になったり諸々の事情によりInstagram APIの仕様が変わり、今となってはこのサービスを運営することは出来ません。そのような自分の経験から、Instagram APIを気軽に使えることはなくなったんだなーというイメージだけ持って...

"ゲームエイト"と聞くと、まず『ハチのキャラクターが描かれたロゴ』をイメージする人も多いかと思います。今回はそのロゴの扱う際のルールを示したロゴガイドラインの整備を進めた手順を紹介します。!ガイドライン策定前にリリースされたコンテンツなど、今回定めたルールが完全に適応されていない箇所もあることをご了承ください。 ガイドラインの必要性まず、私が入社した当時はロゴのガイドラインが存在せず、デザインデータも複数存在し、正しいデータを特定するのが困難な状態でした。そのため、社内スタッフがロゴを扱う際には、まず正しいデータを探すところから始めなければならず、非効率でした。また、ロゴア...