今までサーバーサイドエンジニアでやってきた、フロントエンド初心者の私があるプロジェクトにフロントエンドエンジニアとしてアサインされ、開発していく中で考えるべき事を知ったので備忘録として羅列します。
設計フェーズ段階でしっかりと考慮すべきこと・したほうが良いことが思った以上にあり、これをチェックリストとして持っておくと今後も使えるし、定期的に見直ししていきたいです。
○ フロントエンド、バックエンド双方必要
まぁ、これらは当たり前のように決めることだと思いますが、改めて書き出してみます。
-
技術選定
- メインとなるフレームワーク、ライブラリの選定
- その他使いそうな周辺ライブラリの選定
- フロントエンド側ではグラフ描画、カレンダー、APIアクセスなど
-
コーディング規約
- 変数名、関数名、ファイル名
- インデックスの文字数
- 関数の引き数の上限(割と重要)
-
リンター、フォーマッターのルール
- コーディング規約に近い
-
Git周り
- リポジトリ運用ルール
git flow
-
github flow
など
- コミットルール
- コミット、PRの粒度
- コミットメッセージにプレフィックスを付ける
- ブランチ名
- リポジトリ運用ルール
-
その他
- 動作環境
- 対象ブラウザ
- 対象OS(バージョン含む)
- 動作環境
○ フロントエンドのみ(これが本題)
-
JavaScript周り
- プロジェクトのディレクトリ構成
- コンポーネントの粒度(ビルドのスピードに関わるので)
- これは使うフレームワークにもよる
- 共通処理、アプリ全体で行う処理の切り出し
-
Store
の設計
- プロジェクトのディレクトリ構成
-
CSS周り
- 変数に切り出すものとその値の決定
- 色、画面サイズ、フォントサイズなど
- 単位も(
px
,rem
)
- 命名規則
-
OOCSS
,BEM
,SMACS
、FLOCS
など
-
- ファイル構成と中身のざっくり設計
-
_vars
,mixin
,common
など
-
- 変数に切り出すものとその値の決定
-
デザイン周り
- 共通パーツのfix
- ヘッダー、フッター、ナビゲーションなど
- だいたい全画面で使うので最優先に決めたいところ
- PCとSPの描画の違いの把握
- 作る前に疑問点や、怪しいデザインは潰しておかないと後の負債になりかねない
- フォントはWebフォントにするか、直接サーバーに配置するか
- アニメーションの数値や共有の仕方など
- デザイナーからのデザイン納品形式
-
sketch
ファイルなのか,Figma
なのか, など
-
- 共通パーツのfix
-
画像周り
- favicon の各ブラウザ端末用の用意(使用ライブラリなど)
- svg 画像をコンポーネント化するか, そのまま svg 画像として使うか
- 画像をどこに配置するのか(アプリ内なのか,
S3
などのサーバーに配置するのか)
-
その他
- リンク
- 別タブにするか
- 別タブにするなら
onreferrer, onopener
とかをつける
- キャッシュ
- CDN を何にするのか(
CloudFront, Akamai, Fastly
など)
- CDN を何にするのか(
- リンク
上記以外にも、コンポーネント一覧
の作成や、swagger, mock環境
の用意などもあると尚良。最近は色々考えることが多く、複雑化しているなと痛感しました…
終わりに
決めることの多くはフレームワークやライブラリに依存したルールだと思います。が、ライブラリなどは随時バージョンが上がるか新しいものが生まれ、既存のものは廃れていくこともよくあるため、見直しは必須だと思います。
今は責務をどんどん分けて行く指向(いわゆるマイクロ化)が強く、それに比例して複雑化しているように感じましたので、利用するメリットと管理コスト、人間のリソースとのトレードオフで決めるべきでしょう。
P.S.
「これも決めておいた方が後に苦労しないよ!」などありましたら、ぜひコメントでご教示いただけると助かります!