これまでのおさらい
はじめに
BASE株式会社でシニアエンジニアを務めているプログラミングをするパンダ(@Panda_Program)と申します。本連載はバックエンドの開発者向けに特化したフロントエンド入門です。
対象読者
本連載の対象読者はオブジェクト指向プログラミングの基礎を理解しており、フロントエンド開発に興味があるバックエンドエンジニアの方です。バックエンド開発で主流であるオブジェクト指向プログラミングと比較しながらフロントエンドの考え方を理解することで、スムーズにフロントエンド開発を始められることを目的としています。
ディレクトリ構成を学ぶとフロントエンドの関心事がわかる
バックエンドのエンジニアの方で「ちょっとフロントエンドの書き換えをお願いしたい」と社内で依頼されたり、「文言修正など簡単なものなら自分でもやってみたい」と思われた方は少なくないはずです。そこで、すでに構築された本番用のフロントエンドのリポジトリを見るとさまざまなディレクトリがあることがわかるでしょう。このため、書き換えの対象となるファイルをどうやって探せばいいのか見当がつかないと思います。
フロントエンドのエンジニアが執筆した記事で、自分たちはこんなディレクトリ構成でファイルを配置していますと紹介するものは少なくありません。私もかつてそのような記事を書いたことがあります。しかし、これらの記事はあくまで同じフロントエンドエンジニア向けの記事であり、共通の了解事項である個々の要素は詳細には説明されていません。Webフロントエンドをこれから学ぼうという方向けのディレクトリ構成の解説はあまりないのではないでしょうか。
例えば、バックエンドでレイヤードアーキテクチャを採用している場合、ディレクトリ構成もレイヤーごとの関心やドメインごとの関心を反映したものになります。フロントエンドも同様に、一見複雑に見えるディレクトリ構成には理由があります。その理由を知れば、探したいファイルもすぐに見つかります。シリーズの最終回となる本記事では、フロントエンドアプリケーションのディレクトリ構成について深掘りしていきます。