コンテンツにスキップ
monosus コーディングガイドライン

開発環境の構築

新規制作

ボイラープレートを使用するか、以下の手順に沿って開発環境を構築します。まだ制作が始まっていない初期段階であればmainブランチで作業して構いません。

  1. ランタイムの選択

    チーム内で合意が取れ、クライアントともすり合わせができていれば種別は問いません。デプロイ先のプラットフォームが対応していれば、 Bun、pnpm、Yarn、npm..etcいずれもベースラインは揃っているので、好みで良いと思います。チームで同じものを使用してください。

    バージョンについてはLTSもしくはそれに準ずる最新バージョンを使用し、READMEとpackage.jsonに記載します。

    package.json
     {
         "name": "new-project",
         ...
         "engines": {
             "bun": 1.1.18
         }
     }

  2. リントツールの導入

    こだわりが無ければ以下のコマンドからリントツールをインストールします。

    Terminal window
    bun create @monosus/lint-tools

    フロントエンドかつクライアントに納品するためには以下についてルールが守れるリンターを導入してください。

    • JavaScriptのコーディングスタイル・構文ルール（Biome,ESLintなど）
    • TypeScriptの型チェック（TSConfig）
    • CSSのコーディングスタイル・構文ルール（Stylelint）
    • HTMLの構文ルール（Markuplint）
    • ファイル名、フォルダ名の命名規則（ls-lint）
    • 各種ファイルのフォーマッター（Biome、js-beautify、Prettier）

  3. srcディレクトリの作成

    ファイル構成を参考に作成します。ベースとなるCSSやコンポーネントはこのタイミングで入れておくとよいでしょう。

  4. CI（継続的インテグレーション）の設定

    lefthook（またはpre-commitに対するGitフック）の設定は必須です。そのほか.github/workflow配下にGitHub Actionsやissueなどのテンプレート用のymlファイルも設置します。また、コンポーネントやページを何度も作成することが予見されているプロジェクトではスキャフォールディングの設定も行います。

  5. ビルドコマンドの確認

    プロジェクト内で使用開始する前に納品する形式をビルドできるか確認します。 ビルドプロセスに不備が出た場合に原因を究明できるよう環境構築を担当した場合は事あるごとにビルドコマンドを叩くことを推奨します。

  6. READMEの作成

    プロジェクト内での重要な共有物になります。READMEに含まれていない情報が開発時に必須になる（属人化してしまう）ことのないようにします。

READMEに書くと良いもの

プロジェクトの性質によりますが、最低限以下が必要です。

  • ランタイム、及びランタイムのバージョン
  • git clone、依存関係のインストール方法
  • CMSやAPIサーバーなどとの連携がある場合は環境変数のテンプレートと記述する内容など
  • ローカル環境の立ち上げ方
  • ビルド方法
  • ディレクトリの使用ルール
  • Git運用ルール
  • CD（継続的デプロイ）があればその簡単な仕組み

その他にも、制作中に何度か同じ様な困り事や失敗があり、回避方法が存在する場合はその回避方法や事象を記載しましょう！

テキストや文脈は、突然そのプロジェクトにアサインされた新人に向けて伝えることを意識して書くようにします。特に守ってほしいこと、困ってほしくない（質問されないようにしたい）ものを記載することで、新人だけでなく、シニアエンジニアや同僚にとっても優しく理解しやすいものとなります。

運用中の環境にあとからジョインする

GitHubなどで運用されていることが前提になります。万が一ソースコードのバージョン管理がされていない場合は新規制作を参考に制作環境を構築します。

開発環境内のREADMEまたはそれに準じるものを確認し、README通りに環境を動かしてみて、制作を始められるか確認します。
READMEがない場合は先にジョインしているメンバーと相談しながらREADMEを作成します。READMEの内容が不足している場合はissueを作成し、READMEのアップデートを最初のタスクとして対応します。