こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら
注意
これは2020年に限定公開で書いた記事ですが、2021/10/14に全体公開にしました。
もうプレイは出来ません。
はじめに
今まで業務でVueやAngularしか触ってきませんでしたが、漠然とReactを経験してみたいと思っていた所、タイミングよく誘われたので案件を手伝いました。
それがなんと年末に母校の海洋問題の授業で使われました。
2月末で公開が終わったので、React未経験からこのプロジェクトを通して学んだ技術的な知見をまとめていきます。
※クライアント側の許可を貰って、確認頂いた上で当記事は投稿しています。
uminazoとは
日本財団が推進する「海と日本プロジェクト」の一環で作られた「海洋問題」について学べる謎解きゲームです。
中身はそこそこ難しく、自分はある程度の謎を知っているにも関わらず、クリアするのに1hほど時間がかかりました。
※海なぞ水族館2020はすでに公開は終わっているのでプレイは出来ません。
携わった事
1人がメインで動いていて、ノベル部分や全体の設計など大方の事はその方が行なってくれました。
自分はその方にレビューを貰いながら、個別に謎の実装に携わりました。
個別謎として1つ例を出すとパズル謎です。
パズル謎の実装
右側にあるピースがクリックにより90度回転し、真ん中のマス目にはめ込むことでパズルを解くことが出来ます。
ピース1つ1つに正解座標と正解回転度数を仕込んで、近くまでドラッグしたらピタッとハマる仕様になっています。
ドラッグにはreact-draggableを使いました。
クリックによる回転と合わせてこちらの記事で詳細は解説しています。
react-draggableにクリックイベントを追加する
uminazoを通して得た学び
あるあるじゃない機能作り
今までは業務システムのフロント開発をメインで行なってきました。
新しい画面の作成、機能の追加、バックエンドからのAPIの繋ぎ込みや、ライブラリの導入、バグ修正などです。
見たことある機能が多く、経験したことがなくてもググると類似の機能に関する情報が見つかりやすいものでした。
ですので、サーバー側の人との適切な連携、ドキュメントをしっかり読む力、などが養われていたかなーと感じていました。
しかし、今回作成したのはブラウザゲームで、ブラウザ上でゲーム性を表現しなくては行けません。
それぞれの謎が実装のイメージが湧きにくいし、ググっても近しい情報はない事が多かったです。
ですので、正攻法でそもそも実装できるのか？
難しいならどうすればゲームとして成立する形で実装できるか？
みたいな所に頭を悩ませました。
詳細設計が綺麗に立たない分、「ユーザーにどの様に使われたいか？」という部分を常に頭に置いて実装を行う事ができ、、良い開発体験が積めたかなと思っています。
スマホ対応可能のブラウザゲーム
スマホ対応も兼ねました。
静的なページのスマホ対応は普段行なっていますが、ゲームでは特殊なイベント操作が多く、スマホデバイス上でそれらを実現するのに苦労しました。
例えば、先ほど上げたパズル謎の例では、ドラッグイベント発火時にクリックイベントも同時に発火してしまうので、useStateでフラグを作り同時発火を防ぐ対処をしました。
photoshopの使用
今までもフロントエンドの業務ではコーディングの指標としてXDやskech、figma、zeplinを使ってきました。
しかし今回はphotoshopではコーディングの指標としてだけではなく、パーツを簡単に加工し切り抜くなどのちょっとした操作まで行いました。
制作の最終盤はデザイン担当の人に作り直して貰う時間もなかったので、要件を満たせるレベルでのデザイン修正なども経験できました。
まとめ
ここ最近はtoB系の業務システムの開発が多く、自分の技術的な成長にエンジニアリングの喜びを感じていました。
しかし、今回は運よく自分が携わったサービスが母校で使われた事で、「世の中に役に立つ物を作る」というエンジニアリングの根底にある喜びを再確認できました。
今年の4月でプログラミングを始めて3年になりますが、今後のキャリアの中で「技術的に成長」「世の中への貢献」の両輪をどう追い求めていくのか。考えるきっかけになりました。
僕がやったReactの勉強方法
未経験からメガベンチャー転職までの軌跡