LoginSignup
11

More than 3 years have passed since last update.

フロントエンドの開発で考えるべきことを学んだのでまとめた

Last updated at Posted at 2018-09-01

今までサーバーサイドエンジニアでやってきた、フロントエンド初心者の私があるプロジェクトにフロントエンドエンジニアとしてアサインされ、開発していく中で考えるべき事を知ったので備忘録として羅列します。

設計フェーズ段階でしっかりと考慮すべきこと・したほうが良いことが思った以上にあり、これをチェックリストとして持っておくと今後も使えるし、定期的に見直ししていきたいです。

○ フロントエンド、バックエンド双方必要

まぁ、これらは当たり前のように決めることだと思いますが、改めて書き出してみます。

  • 技術選定
    • メインとなるフレームワーク、ライブラリの選定
    • その他使いそうな周辺ライブラリの選定
      • フロントエンド側ではグラフ描画、カレンダー、APIアクセスなど
  • コーディング規約
    • 変数名、関数名、ファイル名
    • インデックスの文字数
    • 関数の引き数の上限(割と重要)
  • リンター、フォーマッターのルール
    • コーディング規約に近い
  • Git周り
    • リポジトリ運用ルール
      • git flow
      • github flow など
    • コミットルール
    • ブランチ名
  • その他
    • 動作環境
      • 対象ブラウザ
      • 対象OS(バージョン含む)

○ フロントエンドのみ(これが本題)

  • JavaScript周り
    • プロジェクトのディレクトリ構成
      • コンポーネントの粒度(ビルドのスピードに関わるので)
      • これは使うフレームワークにもよる
    • 共通処理、アプリ全体で行う処理の切り出し
    • Store の設計
  • CSS周り

    • 変数に切り出すものとその値の決定
      • 色、画面サイズ、フォントサイズなど
      • 単位も(px, rem
    • 命名規則
      • OOCSS, BEM, SMACSFLOCS など
    • ファイル構成と中身のざっくり設計
      • _vars, mixin, common など
  • デザイン周り

    • 共通パーツのfix
      • ヘッダー、フッター、ナビゲーションなど
      • だいたい全画面で使うので最優先に決めたいところ
    • PCとSPの描画の違いの把握
      • 作る前に疑問点や、怪しいデザインは潰しておかないと後の負債になりかねない
    • フォントはWebフォントにするか、直接サーバーに配置するか
    • アニメーションの数値や共有の仕方など
    • デザイナーからのデザイン納品形式
      • sketch ファイルなのか, Figma なのか, など
  • 画像周り

    • favicon の各ブラウザ端末用の用意(使用ライブラリなど)
    • svg 画像をコンポーネント化するか, そのまま svg 画像として使うか
    • 画像をどこに配置するのか(アプリ内なのか, S3 などのサーバーに配置するのか)
  • その他

    • リンク
      • 別タブにするか
      • 別タブにするなら onreferrer, onopener とかをつける
    • キャッシュ
      • CDN を何にするのか(CloudFront, Akamai, Fastly など)

上記以外にも、コンポーネント一覧の作成や、swagger, mock環境の用意などもあると尚良。最近は色々考えることが多く、複雑化しているなと痛感しました…

終わりに

決めることの多くはフレームワークやライブラリに依存したルールだと思います。が、ライブラリなどは随時バージョンが上がるか新しいものが生まれ、既存のものは廃れていくこともよくあるため、見直しは必須だと思います。

今は責務をどんどん分けて行く指向(いわゆるマイクロ化)が強く、それに比例して複雑化しているように感じましたので、利用するメリットと管理コスト、人間のリソースとのトレードオフで決めるべきでしょう。

P.S. 「これも決めておいた方が後に苦労しないよ!」などありましたら、ぜひコメントでご教示いただけると助かります!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11