エンジニアnote第2回「CINRAの開発テンプレートとは？エンジニアの力を最大化する効率化の取り組み」
こんにちは。CINRA, Inc.（以下、CINRA）エンジニアチームの伊﨑です。私は大学卒業後、とあるウェブ制作会社に入社し、ウェブエンジニアとしてのキャリアを歩みはじめました。CINRAに移ってからは、フロントエンド領域を中心に、様々な受託制作プロジェクトに携わっています。
CINRAのエンジニアチームのメンバーの価値観や取り組みをお伝えしていくこのnoteマガジン。前回は「CINRAエンジニアが大切にしたいこと」と題して、マネージャーの横川が、私たちの根源的な価値観やものづくりへの姿勢
についてお伝えしました。
今回は、そんな私たちの普段の取り組みについて、少し具体的にお伝えしたいと思い、筆を取りました。
私たちが所属するExperience Design Unit（通称：XDU）では、制作における各フェーズのテンプレート化を進めており、2023年中頃から、多くのプロジェクトで活用しています。もちろん、開発フェーズについても例外ではありません。今回は、エンジニアチームのテンプレートについてお話しします。
創造性を大切にしたいからこそ、効率化を求める
皆さんは、テンプレート化と聞くとどのようなイメージを持ちますか？もしかしたら、「楽をしようとしている」「同じようなアウトプットばかりになる」といった、ネガティブな印象を抱いた方もいるかもしれません。
私たちが考えるテンプレート化とは単に「楽をする」ことではありません。真の目的は、プロジェクト全体の効率化を図り、メンバーが本当にクリエイティブな作業に専念できる環境を整えることにあります。受託制作、自社メディアにかかわらず、どんなプロジェクトにおいても、制作に携わるメンバーが使える工数には限りがあります。限られた工数の中で、メンバーがどのように時間を使うかは、最終的なアウトプットの質に直接繋がります。
毎回必要なものを毎回最初から準備することは、いわゆる「車輪の再発明」です。このような作業に時間を費やすのではなく、それぞれが本当に力を注ぐべき創造的な仕事に集中し、アウトプットの質を最大化したい――それが、私たちがテンプレート化に取り組む理由です。
CINRAの開発テンプレート：wp-starterとastro-starter
CINRAのエンジニアチームで運用しているテンプレートの一例として、以下の2つを紹介します。
wp-starter … WordPress開発のためのスターターテンプレート。ローカル環境を素早くDockerで構築できるほか、テーマファイルの構成や、よく使われるプラグインがあらかじめ含まれています。
astro-starter … Astroをベースとしたスターターテンプレート。共通のディレクトリ構成や、ESlintやPrettierのようなコードの品質向上のためのツールがあらかじめ含まれています。
一見するとシンプルで目新しさがないように見えるかもしれません。しかし、このテンプレート構成は過去の挑戦と失敗を経て生まれたものです。
過去の挑戦と失敗から学んだこと
CINRAのエンジニアチームでは、これまでにも何度かテンプレート化を試みてきました。
デザインからフロントエンド、バックエンドまで、制作工程の大部分を統合したテンプレートの作成に挑戦した際は、オウンドメディアサイトの一般的なレイアウトをベースとしたデザインを制作し、コーディングまで行なったものを用意することで、制作工数を大幅に削減することを目指しました。しかし、テンプレートに合わせることでデザインの自由度が大きく制約され、実際に使用するデザイナーから「画一的になりすぎて使いづらい」との声が上がったため、次第に活用されなくなりました。
また、多くの受託制作プロジェクトにおいて、デザインや機能に求められる要件はさまざまで、テンプレートを元にした制作フローでは、多様な要望に応えにくいという課題もありました。
こうした反省をふまえ、今回のテンプレートではシンプルで汎用的な設計を重視しています。何をテンプレート化し、何を新たに作るべきか、その線引きを慎重に行なうことで、テンプレートは「守破離」の「守」の部分を支えつつ、プロジェクトごとの創造的なアプローチを保ちながら作業が進められるようになっています。
開発テンプレートの今とこれから
こうしてでき上がった開発テンプレートは、チームに以下のようなメリットをもたらしました。
開発環境のトラブルを最小限に抑え、本質的な開発に集中できる。
トラブル発生時には、プロジェクト外のメンバーも含めてチーム全体で迅速に対処できる。
コードフォーマットを共通化し、外部パートナーを含むメンバー全員が同じルールで開発できる。
しかし、テンプレートは一度作って終わりではありません。各メンバーが様々なプロジェクトで使用する中で見つけた改善点を持ち寄り、随時アップデートが行なわれています。
例えば、WordPressでフロントエンドからREST APIを使用する実装を行なう際、適切なCORS設定を行なう必要があります。この設定を行うコードを抽象化してテンプレートに追加したことで、設定ミスのリスクを低減しました。
また、全てのプロジェクトをテンプレートから展開することで、READMEなどのドキュメントの内容や粒度感が揃うというメリットもあります。メンバーから「こんなことが書いていなくて困った」という声が上がった際に、テンプレートのドキュメントに項目を追加することで、新たなプロジェクトで書き漏らすことがなくなります。
私自身、実際にいくつかのプロジェクトで運用を始めて、新規にプロジェクトを立ち上げる際に悩むことが減る、途中からプロジェクトに参加する際でも環境の立ち上げやルールの把握に困ることが少なくなるといったメリットを感じています。
CINRAのエンジニアとして
日々、多様なプロジェクトに携わり、やりがいを感じながら仕事に励む一方で、多くのトラブルや細かな課題に疲弊してしまうこともある。これは、受託制作プロジェクトに関わるエンジニアの多くが共通して抱える悩みではないでしょうか。CINRAのエンジニアチームでは、そうした悩みを「体力勝負」で解決するのではなく、テンプレート化をはじめとするさまざまな取り組みを通じて、トラブルや細かな悩みを減らし、それぞれの個性を最大限に発揮できる環境を整えています。ノーコードツールの台頭が進む今こそ、エンジニアリングの力を最大限に発揮するための工夫や取り組みが、ウェブ制作業界の未来に不可欠だと、私たちは考えています。
こうした取り組みに興味をお持ちいただけた方は、ぜひカジュアル面談にお越しください。
バックエンド求人：https://www.wantedly.com/projects/689006
フロントエンド求人：https://www.wantedly.com/projects/1494061