はじめに
普段はハンズオン系の記事を書いているのですが、気分転換にポエム系の内容を書こうと思います。暇つぶし程度に気軽にお読みください。
私は昨年、実務未経験でエンジニアを志し、プログラミングスクール等には一切通わず独学でエンジニアに転職をしました。
実務では主にLaravel/PHP、Next/React/TypeScriptを使って機能開発をしています。
エンジニアとして業務をする中で、当初からWebサイトやWebサービスを新規で作ってみたいという強い思いがあり、ちょうど実務経験７ヶ月頃でタイトルにあげたようなNext.jsのプロジェクトに携わる機会があったので振り返りがてらまとめてみようと思います。
本記事の対象となる方
- エンジニアに興味のある方
- 私と同じような実務１〜２年のエンジニアの方
- 若手エンジニアの方で新規プロジェクトを任された方
ご留意事項
今回の記事ではプロジェクトの立ち上げからリリースまでどのような進め方をして、どう感じたかの振り返り・備忘メモ的な内容になります。そのため、技術的な内容には触れていないのであしからず。
今回携わったプロダクト
合計全５ページの業界特化型コンテンツ情報検索サイトになります。
技術としてはNext.js×TypeScriptで書きました。
実装内容は以下の通りです。
- TOPコンテンツ
- 都道府県・市区町村単位のコンテンツ一覧
- コンテンツ詳細情報
- 検索機能
- googleMap
- 統計グラフ
- 属性タグ（検索機能にジャンプ）
etc.
実装期間は約１．５ヶ月と比較的短納期でしたが、事前準備をしていたこと、またAPIに関しては外部サービスを活用したことでフロントエンドの実装に注力できたこともあり、何とか要望通りのリリースを行うことができました。
個人インプット期
入社時点ではLaravelとVue.jsのみ勉強していたのですが、当時メンターをして頂いた方から「React勉強してみるのありかも」という言葉をきっかけに業務の合間を縫ってReactを個人的に勉強をしていました。
社内の別チームではすでにNext.jsの導入例も出ていたため、必然的にNext.jsへの興味も湧き平行してインプットや個人開発で来るべき時に備えて日々を過ごしました。
個人的にこの期間のインプットが、プロジェクト成功の鍵となったなと思っています。
よく、「実務経験がないと意味がない」「所詮個人開発」と厳しい言葉かけられることが多いですが、普段インプットした内容をQiitaやGitHubにメモ代わり（チートシート）として上げておくことで、実務での生産効率が非常に上がります。
特に業務中では、さまざまなプレッシャーが発生している環境であるため、同じ公式ドキュメントを読むにしても、自宅・カフェなどのリラックスできる静かな環境と比較して理解度と記憶度ともに比較にならないものだと思っています。
普段からNext.jsとReactへの実装を進めていたことが、新規プロジェクトで上流工程や社内調整も担いながらの開発でも実装スピードを落とさずに進行できた今回の勝因になったと思っています。
学習内容の記事はこちらです。
※この記事はかなり頑張って書いて、両記事ともLGTM４0以上頂いているので是非合わせてご覧いただけると幸いです・・・🙇♂️
プロジェクト立ち上がり期
ある程度、Next/Reactまわりが触れるようになってきたころ、
所属チーム内に、既存コンテンツを別ドメインとして独立させて、新規Webサイトを作成したいとの話が舞い込んできました。
もともと当該コンテンツは自社サイトのごく一部で表示されていましたが、オリジナルサイトとして独立させることでSEO対策を強化したい、というのがビジネス側の要望でした。
当初は社内でも採用数が多いLaravelやWordpressを使った設計で話が進みつつありましたが、以下点からNext/Reactの採用を検討をした方が良いと思いチームリーダに打診&提案をしました。
- ビジネス側としては獲得単価が広告経由より安価なSEO流入を拡充したい
- 近年Googleアルゴリズムではサイトパフォーマンスを重視している
- 既存Wordpressベースの実装は速度パフォーマンスがあまり良くない
- Next.jsのSSGで上記を改善したい
- ビジネス側としてもパフォーマンスが高いサイトを構築できる技術を持つことはメリットにつながる
方向性としては問題なさそうとはいいつつも、一旦チーム内でのNext.jsへの見識を勉強会や共有会で高める方向へ、進めることとなりました。
チーム内勉強会
Next.jsへのキャッチアップは私主導で以下の形で進みました。
- 本業の合間で工数10%ぐらいをNext.jsのキャッチアップに当てる
- 朝会後の時間にこれまで自分がインプットしてきた内容やおすすめ記事を共有
- SSGやSSR等の前提知識から実装例の紹介
当時社内ではすでにNext.jsの採用事例はあったもののチーム内での経験はありませんでした。
その一方で、TypeScriptは既存プロダクトですでに触っていて、リーダもReactは扱える状況であったことも相まって比較的早い段階でキャッチアップが終わりました。
最終的に「この要望であれば提案通りSSGが最善かも」という結論に至り、正式にGoサインが出ました。
要件定義
同フェーズに関しては、事前にマーケティング部隊がある程度要件を整理して頂けたおかげで、エンジニア側が舵取りをする工数を取られることもなくスムーズに設計・開発に移行できました。
とはいえ、入社歴の浅い私にとってドメイン独自の知識や業界周りの専門用語には悩まされることも多かったです。
また短納期かつリソースが限られているからこそ、会議工数を最小限にしつつも、要所となる要件部分は漏れがないよう、コミュニケーションの質をチームで心がけていきました。
設計
ディレクトリ設計やコンポーネント設計は食べログさんの以下の記事を参考にしつつ、Atomic Designをベースに作りました。
チーム内でもフロントエンドの設計に精通している人は多くなく、短納期かつ継続的ににサイト拡張が行われるサービスではなかったことで、わかりやすい同設計手法を採用することとなりました。
- コンポーネントの責務がより明確になる
- 見た目の粒度だけでなく、ロジックの責務も明確にできる
この2点は非常にうまく機能し、チーム内の開発効率も良い状態を維持できました。
開発の進め方
私が入社した当初から、チーム内ではスクラム開発を試験的に導入しており、本プロジェクトでもスクラム開発で進めていきました。
今回はプロジェクトの主担当を担わせて頂いたことから、リーダーにサポート頂きながらスクラムマスターのような役割（工数見積もりやチケットの切り出し）も対応しました。
- スプリントプランニング・レトロスペクティブ
- 毎週一回開催してスプリント計画・作業工数見積もり
- ストーリーポイント/ベロシティの計測
- Keep,Problem,Tryの整理
- デイリースクラム
- 日々の進捗確認や「夜も眠れない問題」のリスク管理
今振り返ってみても工数の見積もりやチケット切り出しは今回のプロジェクトでも難しいなと感じるところが多かったです。
実装難易度の見積もりが甘かった部分、ビジネスサイド側の認識と開発側に齟齬が発生したことなど、大なり小なり不都合が起きてしまい、スケジュールがタイトになることもありました。
そしてリリースへ
多少の調整はあったものの大きなトラブルもなく無事、納期通りに本番リリースを行うことができました。
自分にとって初めての「0→1」のWebサイトでもあったことから実際に本番環境で動いていること確認できた時は安堵感でいっぱいになりました。
また、Next.jsのSSGを採用したことから既存サイトと比較しても速度パフォーマンスやUX部分でも大きく改善し、マーケ担当者からも「Next.jsすごいですね！！」とお褒めの言葉を頂けたのもよかったです。
なによりも今回Next.jsへの導入実績と実装の知見が溜まったことでビジネスサイドの要望に対する、開発側の選択できるカードの手札が増えたことも非常に良い結果だったなと思っています。
振り返り
今回のプロジェクトは自分にとって初めての経験尽くしで非常に苦労する部分もたくさんありました。
本記事ではあえて技術的な内容は割愛しましたが、RecoilのSelectorの扱い方ってどうするんだろう〜。Hydrationって何〜〜。無駄なレンダリング抑制したい〜〜。インフラ設計どうしよう〜。といった実装面での苦労はこの記事で挙げた内容の100倍ぐらいありました。
とはいえ自分が手を挙げたプロダクトだったのでその分、思い入れも深く「なんとかやり切りたい」という気持ちは大きな言動力でした。
実際にプロジェクトの主担当をになったことで業務に対するスタンスも変わったこともよかった点です。
エンジニアになる前は、「どんなに時間をかけても他人に頼らず自分で調べること」が半ば脅迫観念的に染み付いていましたが、何よりも優先すべきことは、
- 少しでも不安要素があるなら他人に相談すること
- 何かあっても対応できるようにプロジェクトの進捗や実装内容を理解している人を増やすこと
- 周囲を頼って納期を遵守 >> 一人で抱え込んで沼って納期を過ぎる
というスタンスに変化しました。
大変ではあるものの、終わってみれば得るものも多く非常に有意義な経験ができたなと思っています。
引き続き保守運用面でも本プロダクトに携わっていこうと思います。