はじめに
今まで業務でVueやAngularしか触ってきませんでしたが、漠然とReactを経験してみたいと思っていた所、タイミングよく誘われたので案件を手伝いました。
それがなんと年末に母校の海洋問題の授業で使われました。
https://social-innovation-news.jp/?p=1176
2月末で公開が終わったので、React未経験からこのプロジェクトを通して学んだ技術的な知見をまとめていきます。
※クライアント側の許可を貰って、確認頂いた上で当記事は投稿しています。
uminazoとは
日本財団が推進する「海と日本プロジェクト」の一環で作られた「海洋問題」について学べる謎解きゲームです。
中身はそこそこ難しく、自分はある程度の謎を知っているにも関わらず、クリアするのに1hほど時間がかかりました。
※すでに公開は終わっているのでプレイは出来ません。
携わった事
1人がメインで動いていて、ノベル部分や全体の設計など大方の事はその方が行なってくれました。自分はその方にレビューを貰いながら、個別に謎の実装に携わりました。
個別謎として1つ例を出すとパズル謎です。
パズル謎の実装
右側にあるピースがクリックにより90度回転し、真ん中のマス目にはめ込むことでパズルを解くことが出来ます。
ピース1つ1つに正解座標と正解回転度数を仕込んで、近くまでドラッグしたらピタッとハマる仕様になっています。
ドラッグにはreact-draggableを使いました。
クリックによる回転と合わせてこちらの記事で詳細は解説しています。
react-draggableにクリックイベントを追加する
uminazoを通して得た学び
あるあるじゃない機能作り
今までは業務システムのフロント開発をメインで行なってきました。
新しい画面の作成、機能の追加、バックエンドからのAPIの繋ぎ込みや、ライブラリの導入、バグ修正などです。
見たことある機能が多く、経験したことがなくてもググると類似の機能に関する情報が見つかりやすいものでした。
ですので、サーバー側の人との適切な連携、ドキュメントをしっかり読む力、などが養われていたかなーと感じていました。
しかし、今回作成したのはブラウザゲームで、ブラウザ上でゲーム性を表現しなくては行けません。
それぞれの謎が実装のイメージが湧きにくいし、ググっても近しい情報はない事が多かったです。
ですので、正攻法でそもそも実装できるのか？
難しいならどうすればゲームとして成立する形で実装できるか？
みたいな所に頭を悩ませました。
詳細設計が綺麗に立たない分、「ユーザーにどの様に使われたいか？」という部分を常に頭に置いて実装を行う事ができ、、良い開発体験が積めたかなと思っています。
スマホ対応可能のブラウザゲーム
スマホ対応も兼ねました。
静的なページのスマホ対応は普段行なっていますが、ゲームでは特殊なイベント操作が多く、スマホデバイス上でそれらを実現するのに苦労しました。
例えば、先ほど上げたパズル謎の例では、ドラッグイベント発火時にクリックイベントも同時に発火してしまうので、useStateでフラグを作り同時発火を防ぐ対処をしました。
photoshopの使用
今までもフロントエンドの業務ではコーディングの指標としてXDやskech、figma、zeplinを使ってきました。
しかし今回はphotoshopではコーディングの指標としてだけではなく、パーツを簡単に加工し切り抜くなどのちょっとした操作まで行いました。
制作の最終盤はデザイン担当の人に作り直して貰う時間もなかったので、要件を満たせるレベルでのデザイン修正なども経験できました。
Reactが実務で使えるレベルになった
2020年10月ごろに興味本位で触り始めたReactですが、20201年の年明けからはReact中心に仕事を行なっています。
理由として
– uminazoでモダンなReactでの開発を経験し、自信がついた
– 「りあくと」を読み、Reactの周辺知識が理解できて、Reactの背景的な魅力にハマった。
– uminazoをやる傍ら、簡単アプリを作成し技術的な基礎が固まった(connect4、買い物リスト、COVID-19トラッカー、Netflixのクローン)
まとめ
ここ最近はtoB系の業務システムの開発が多く、自分の技術的な成長にエンジニアリングの喜びを感じていました。しかし、今回は運よく自分が携わったサービスが母校で使われた事で、直接的に役に立った感や誇らしさなど「物作りの副次的な喜び」を経験出来ました。
今までは「技術的なレベルアップ」が楽しくて開発をしていたので、案件を受ける際に技術要件を中心に見ていましたが、今後は「物作りの喜び」がより得られる仕事をしたいなーと思っています。