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

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

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

これまでのおさらい

• 【第1回】【バックエンドエンジニアのためのReact入門】オブジェクト指向で"コンポーネント指向"を理解する
• 【第2回】【バックエンドエンジニアのためのReact入門】Reactの関数コンポーネントの基本！ クラスとの違いを理解する
• 【第3回】ReactからAPIを呼ぶ"裏側"について学ぼう——バックエンドエンジニアのためのフロントエンド開発

はじめに

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

対象読者

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

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

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

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

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