SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

バックエンドエンジニアのためのフロントエンド入門

ディレクトリ構成で読み解くReactアプリケーションの世界──バックエンドエンジニアのためのフロントエンド開発

バックエンドエンジニアのためのフロントエンド入門 第4回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 フロントエンドの開発は変化が速い分、キャッチアップも大変です。しかしながら、JavaScript/TypeScriptを使ったコンポーネント志向のUIライブラリで開発をするというトレンドは大きく変わりません。本連載では、フロントエンド開発に興味があるバックエンドエンジニアの方向けに、フロントエンド開発の考え方を解説します。シリーズの最終回となる本記事では、フロントエンドアプリケーションのディレクトリ構成について深掘りしていきます。

  • X ポスト
  • このエントリーをはてなブックマークに追加

これまでのおさらい

はじめに

 BASE株式会社でシニアエンジニアを務めているプログラミングをするパンダ(@Panda_Program)と申します。本連載はバックエンドの開発者向けに特化したフロントエンド入門です。

対象読者

 本連載の対象読者はオブジェクト指向プログラミングの基礎を理解しており、フロントエンド開発に興味があるバックエンドエンジニアの方です。バックエンド開発で主流であるオブジェクト指向プログラミングと比較しながらフロントエンドの考え方を理解することで、スムーズにフロントエンド開発を始められることを目的としています。

ディレクトリ構成を学ぶとフロントエンドの関心事がわかる

 バックエンドのエンジニアの方で「ちょっとフロントエンドの書き換えをお願いしたい」と社内で依頼されたり、「文言修正など簡単なものなら自分でもやってみたい」と思われた方は少なくないはずです。そこで、すでに構築された本番用のフロントエンドのリポジトリを見るとさまざまなディレクトリがあることがわかるでしょう。このため、書き換えの対象となるファイルをどうやって探せばいいのか見当がつかないと思います。

 フロントエンドのエンジニアが執筆した記事で、自分たちはこんなディレクトリ構成でファイルを配置していますと紹介するものは少なくありません。私もかつてそのような記事を書いたことがあります。しかし、これらの記事はあくまで同じフロントエンドエンジニア向けの記事であり、共通の了解事項である個々の要素は詳細には説明されていません。Webフロントエンドをこれから学ぼうという方向けのディレクトリ構成の解説はあまりないのではないでしょうか。

 例えば、バックエンドでレイヤードアーキテクチャを採用している場合、ディレクトリ構成もレイヤーごとの関心やドメインごとの関心を反映したものになります。フロントエンドも同様に、一見複雑に見えるディレクトリ構成には理由があります。その理由を知れば、探したいファイルもすぐに見つかります。シリーズの最終回となる本記事では、フロントエンドアプリケーションのディレクトリ構成について深掘りしていきます。

次のページ
サンプルのディレクトリ構成を紹介します

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
バックエンドエンジニアのためのフロントエンド入門連載記事一覧

もっと読む

この記事の著者

プログラミングをするパンダ(プログラミングヲスルパンダ)

 https://twitter.com/Panda_Program/ フロントエンドエンジニア。元々サーバーサイドエンジニアだったが、個人開発を機に HTML, CSS, JS に興味を持つ。特に React、Next.js に熱中しフロントエンジニアに転向。TDD、XP、DevOps が好き。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/21539 2025/06/18 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング