こんにちはあとむです。

いきなりなんですが実は私2020年の冬からpolymerというJSライブラリとFirebaseを使用したコミュニティサービス開発のプロジェクトに週2で参画していました。

週2といいつつ新機能を全て担当させてもらったりFirestoneのドキュメント構造やらルールなど結構大事な部分も触らせてもらったりしていました。

そのおかげで色々と成長できたと思うので、一度ここで振り返ってみたいなと思います。

プロジェクト概要

• polymerとFirebaseがメイン
• アプリの開発の一部を担当
• 本番の運用やらインフラやらは全く知らない

今回参画させてもらったプロジェクトは数十人規模でチームを組んで開発しているプロジェクトで、僕は特定の機能やら不具合やらの対応をするといった形で参画しました。

よくあるシステム開発の工程でいうと詳細設計・実装・単体テストくらいを行なうといった形ですね。なので開発の運用などには関わっておらず、あくまでコードを書く人としての参画になります。

最初はHTML /CSSで全体の見た目を整えたり、アプリ全体をかっこよくするための要員として参画しました。

ただ気がつくと共通で使用しているコンポーネントに手を入れたり、Firestoreのドキュメント構造を変更したりとどんどんコアな機能に担当範囲が広がっていき、最終的にはfirestoreのrules.jsonやCloud Functionsの開発などHTML /CSSからは程遠い分野の作業を任せてもらえるようになった感じになります。

これまで私が行なってきた仕事の多くは

• コードが書ける人が自分の上の立場の人にいない
• 受託開発
• Laravel × MySQLで開発
• 1の人で全て新規開発（たまに2人）
• リリース後の保守運用・追加案件の実装

といった感じだったのですが、今回のお仕事は

• プロジェクト帰任者がエンジニア
• 自社開発
• polymer × Firebaseで開発
• 数十人で開発。CI/CD等きちんとした運用体制が整っている
• 新規機能と既存不具合の修正

というように、同じシステム開発でもかなり色が違う形でした。
まあこれまでの仕事の状況の方が特殊な状況だと思うので、今回はいわゆる一般的な自社開発企業の形態をとったプロジェクトだったのかなと思っています。

初のJSプロジェクト

これまでLaravelばかりやってきたのですが、今回は初めてのJS単体で作られたシステムのプロジェクトでした。

一応Vue.jsを使った開発自体はこれまでもあったのですが、独学＆レビューしてくれる人がいない環境での実装だったので、何となく自分の書き方に自信がなく、、、

ただ今回はプロマネに位置する人がエンジニアなので、少なくともプルリクエストをマージする時にはレビューをしてくれるので、大変ありがたかったです。

またこれまで書いたコードなども見れるので、知らない書き方を一つずつ覚えていくような1年間でした。

特に苦戦したのはmap系の関数と再帰関数はなかなか覚えられない＆理解できずに苦しみました。今となってはこんなに便利な関数はないなという感じで、map、reduce、some、filterは全言語に実施していただきたいと思っていたりします。

またasync/awaitの概念もこのプロジェクトを通して理解することができました。

今になって思うととても結構シンプルな考え方な気がします「いつasyncを書く必要があっていつawaitを書く必要があるのか全然分からん」と深夜にキレそうになったことが懐かしいです。

初のFirebaseプロジェクト

またデータの保存場所もMySQL（RDB)）ではなくFirestore（NoSQL）ということで色々と勉強になりました。

Firebaseは昔個人でアプリを作った時に使ったことがあるのですが、実務での使用は初めてです。一体何を考えてドキュメント構造を作っていけばいいのか手探りな状態で進めていったのを覚えています。

何度も失敗を重ねて最終的に気を付けていることは

• サブコレクションのネストが深くならないように注意する
• 複数ドキュメントのサブコレクションだけでの検索はできない（できるはできるけどRulesが複雑になるからあまりしたくない）からRDBでいうselect文を投げたいようなものの一覧は一つの（サブ）コレクションにまとめる
• SQLのwhereInがFirestoreだと最大10件しか取得できないのでそうならないような構造にする
• rulesを考えながら設計する

です。whereInが10件しか取れない問題は結構面倒なことになったので絶対に忘れないようにしたいです。

CSSアニメーションに強くなった

冒頭でも書いた通り実はもともとはHTML /CSSでサイトをカッコよくする要員としてこのプロジェクトに参画しました。

なので、本当の最初はXDであがってきたカッコいいサイトをHTML /CSSの技術を使って実現していくみたいなことでした。

某YoutuberやSNSの影響を受けたせいで「HTML /CSSできる言っている人ってなんか雑魚っぽい」と思ったり正直していたのですが、実際にHTML /CSSを業務で書くとものすごい喜ばれてびっくりしました。

よくよく考えると個人開発でなく会社とかで働いている場合は、HTML /CSSのUIの部分は分業制で若手の人がやったり外注したりすることもありますよね。そう考えると「バックエンドも書ける上でHTML /CSSも爆速でかけます！」というのは全然評価してくれる人いそうですよね。

意外とこの部分ができるのは強みになるんだなと驚きました。

今回のプロジェクトではデザインの指定が細かめだった＋指定されたデザインが結構複雑だったので、僕のHTML /CSS力がとても役に立ちました。

またCSSアニメーションを多用する必要があったので、その辺りについてはかなり詳しくなりましたね。
といってもkeyframe使って気合いで書くだけなんですが、、、

今後は何ができるの？と言われた時にちゃんと胸を張ってHTML /CSSのことも言うようにします。

後半はちょっとだけTypeScriptをやりました

去年の年末ごろからプロジェクトに少しずつTypeScriptが導入されたことにより、僕にもちょこちょこTypeScriptを書く場面が出てきました。

TypeScriptも初めて書いたのですが、これめちゃめちゃいいですね。

適当にjs書いていると必ず起こる「この変数何だっけ」問題を想像以上に解決してくれて、控えめに言って素晴らしかったです。

もちろんその分書くのは面倒なんですが、その分キレイにかけた時は気持ちがいいですし、個人的にかなり好みな感じでした。

今後個人でJSプロジェクトを進める時が来たら必ずTypeScriptを導入しようと思います。

そんな感じの1年半でした

そんな感じで初のJSプロジェクトへの参画についての振り返りでした。

「ちゃんとしてシステム開発をしてる」と言う感じがして色々新鮮で楽しかったです。

またよくよく振り返ってみるとこのプロジェクトではちゃんとCI /CD連携をしてテスト自動化したりとかもしているプロジェクトなので、この部分は今のうちの学べるだけ学んで一人で開発をする時も積極的に使っていくことができたらいいなと思いました。

そんな感じで終わりたいと思います。ありがとうございました！