バックエンドエンジニアがフロントエンド界隈を知るためにした、たった一つのこと
TL;DR またの名を今北産業
- （運用を見据えた）アプリ開発をした(Vue3/firebase)
- 開発で得た心得
- 最新の公式ドキュメント（tutorialだけでなく設計思想も込みで）を読んだ上で本番運用を想定したwebアプリを作ろう
３行じゃないやん。
想定読者
- フロントエンド界隈でトレンドのフレームワークを利用したことがないエンジニア
アプリ開発をしようと思ったきっかけ
- 作りたい
- コーディングはたのちい
- （そのフレームワークを利用したコードの）コードレビューができない
- 円滑にプロダクトを育みたい
- 担当プロダクトは10年超選手
- 対してフロントエンドエンジニア部隊とバックエンドエンジニア部隊が存在する（最近フロントエンドエンジニア部隊がジョインした）
- フロントエンドエンジニア部隊が持っている価値観やミッションを理解していないとミスコミュニケーションが発生する可能性がある
やったこと
最初に書いた通りモノを作った。
バックエンド側の業務の複雑さは、DDDでモデリングしたら集約は1個で収まるくらい。フロントエンド側で言えばコンポーネントが（大小は置いておいて）20個はいかないくらい。
守破離の守：入門書を精読した
公式の構築手順を踏んでも何故かエラーがでて環境構築が終わらない
フレームワークの旨味を無視したモノリシックなコードは修正コストを肥大化させる*1過去の私から
という経験知があったので、とりあえず新しいことを学ぶにはそのエキスパートの言うことに従ってみるべきだと感じて以下の入門書を精読しました。
Vue.js入門 基礎から実践アプリケーション開発まで | 川口 和也, 喜多 啓介, 野田 陽平, 手島 拓也, 片山 真也 |本 | 通販 | Amazon
これには様々なご意見があると思いますが、この本を選んだのは以下の点で学びがあると判断したからです。
- 日本語で書かれている
- 英語読解力はまだまだ自信がなかった
- フレームワーク自体の思想について説明がある
- 著者がコミッター。ワーオ、あんしーん☆
- hello worldで終わらず、実運用を見据えた構成になっている
- 中規模なプロダクト開発を想定した開発環境のセットアップ、ミドルウェア管理、設計方法、実装、など
守破離の破：早計だったかもしれない？「とりあえず（入門書より）最新verで作るか」
髪の毛が後退しているのではない。 私が前進しているのである。
「入門書が古いのではない。技術が進んでいるのである。」でした。*2
この入門書が発売された2018年では「Vue2+webpack+Vue test utils」という構成でしたが、私が『とりあえず新しいプロダクトを生むなら最新verで作るのがセオリーやろ、知らんけど』と思ってVue3で作ることを決意したのが…ちょっと早計かもしれませんでした。後悔はしていませんが。
よくよく公式ドキュメントを追っていくと「Vue3+Vite+Vitest*3」を推奨とされており、Vue3+webpackについてはどちらかというと今まで実運用でVue2を利用されていた方向けにかかれており、公式推奨ではないようでした。入門書の1/5くらいを割いて説明をされていた開発環境の構築がそのままでは流用できない状態でした。これは決して入門書に対して批判しているわけではなくて、いかにこの界隈がレッドオーシャンなのかを私が知らなかったゆえに起きたことです。PHPerでいてどうして推測できなかった自分。凹む
守破離の離：設計の良さと悪さへの想い
実際に手を動かしてコンポーネント設計をAtomic Designをもとに行っていくと、色々設計課題が見えてきました。（例えば親コンポーネントからのプロパティ継承のネストがなんか深くなる問題）
とりあえず倣ってみたものの、なんだかイケてない。なにがイケてないのか。
色々情報を探っているとフロントエンドでもバックエンド同様必要に応じたオブジェクト指向の一部を取り入れたりしたほうがいいなど、フロントエンドも大きな枠組みで言えばバックエンドと似たような設計課題を持ちつつある（というか既にそうなっている）というのが改めて理解できた気がします。そして自分の設計力の現実も理解できた気がします。
まとめ
当初の目的は少なくとも達成できたの、かな？と思います。まだまだ理解が及んでいないかもしれないですがwebサービスとして形にしたことで少なくとも会話するときに相手がどういうバックグラウンドで話しているのかを想像することはできるようになったと思います。
あともしこれを読んでいる方がいらしたら、とりあえず、フロントエンド界隈を学ぶときは書籍よりも公式のオンラインドキュメントやそれに準ずるオンラインの学習コミュニティを先に学ぶほうがいいかもしれません。
ただ、個人的には先述した入門書はフレームワークを知るためにとても勉強になりました。著者の皆様方ありがとうございます！
記事を書き終えた今（脱稿ハイによる感想）
記事を書いていて学生時代にとある教授が言っていた造語『ハンカチーフの法則』というのを思い出しました。
机に広げたハンカチを、人差し指と親指である一点を摘んで持ち上げると、横から見たら山みたいになりますよね。
一つのこと（つまんだ箇所）を理解しようとしたら、それを理解するために結局周辺の知識（裾野）が必要になる。という例えで教えていただいたのですが、なんか思い出しました。ありがとうございます先生。教授が元気に過ごしてらっしゃることを祈るばかりです。
アドベントカレンダー7日目を選んだ理由は推しの誕生日だからですハッピー最高！！！
あとt_wada先生がオライリーサブスクええぞっておっしゃってたので割引期間にポチりました。もう英語読むしかねえ。
