考えるフェーズ
コーディング設計 実装を安定させ、運用につなげるための前提設計
Flying High Works（FHW）におけるコーディング設計は、「どう書くか」よりも、どういう前提で実装するかを整理する工程です。
コーディングは、デザイン・情報設計・運用設計の影響を強く受ける領域であり、ここで前提が揃っていないと、実装のブレや属人化が起きやすくなります。
このページでは、FHWが実装前にどのような設計を行い、安定したコーディングにつなげているかを整理します。
書き方ではなく コーディング設計の考え方
FHWのコーディング設計は、フレームワークや言語仕様の話だけではありません。
- どこまで共通化するか
- どこを個別対応にするか
- 将来、何が増えそうか
といった設計判断を先に揃えることで、実装フェーズでの迷いを減らします。
毎回ゼロから考えないための基盤 テンプレート化した Vite 環境
FHWでは、Viteをベースとした開発環境をテンプレート化し、案件ごとに大きく構成がブレないようにしています。
これにより、
- 初期構築のばらつきを防ぐ
- メンバー間での理解差を減らす
- 引き継ぎ時のコストを下げる
といった効果が得られます。
変更履歴を「共有できる情報」にする Git管理を前提とした実装
コーディングは、「今動いている」だけでは不十分です。
FHWでは、
- 誰が
- いつ
- 何を
- なぜ変更したか
が追える状態を前提に、Gitで管理します。
これにより、修正理由が不明なまま壊れる、といった事態を防ぎます。
分けないことで、崩れにくくする モバイル・PCのワンソース設計
FHWでは、モバイル用・PC用でHTMLを分けるのではなく、同一構造を前提にしたワンソース設計を基本としています。
- 情報の優先度
- レイアウト
- 余白
をCSS側で調整することで、構造の分断を避け、保守性を高めます。
必要な範囲で、過不足なく使う フロントエンド・JavaScriptとの関係
JavaScriptは、目的がある場合にのみ使います。
- スライダー
- スクロール連動
- 非同期通信
- フォーム制御
など、UIやUXを成立させるための手段として扱い、ご希望が無い限り過剰な実装は行いません。
設計があることで起きる変化
コーディング設計を先に整理しておくことで、
- 実装の判断が揃う
- 人が変わっても読み解ける
- 運用・改修時の負荷が下がる
といった効果が生まれます。
つくるフェーズへのつながり
このページで整理した考え方は、以下の「つくるフェーズ」につながっていきます。
設計があるから、実装が安定します。
このページで伝えたいこと
コーディング設計は、ルールを縛るためのものではありません。
実装を迷わせないための準備です。