CodeIgniterのビュー・CSS・JSディレクトリ構成ガイド！初心者向け整理術

CodeIgniterでビューとCSS・JSを整理するディレクトリ構成

先生と生徒の会話形式で理解しよう

生徒

「CodeIgniterでWebサイトを作っているのですが、HTMLファイルやCSS、JavaScriptのファイルが増えてきて、どこに何を置けばいいか分からなくなってしまいました…。」

先生

「それは開発の初期段階で誰もが直面する壁ですね！CodeIgniterには『ビュー』と呼ばれる見た目を作る場所がありますが、CSSなどのデザイン用ファイルはまた別の場所に置くという決まりがあるんですよ。」

生徒

「そうなんですね！整理整頓ができていないと、後から修正するのが大変そうです。初心者でも迷わない、おすすめのディレクトリ構成（フォルダの作り方）を教えてもらえますか？」

先生

「もちろんです。レイアウトやパーツ（部品）を上手に分ける管理術と、正しいファイルの置き場所を詳しく解説していきましょう！」

1. ディレクトリ構成とは？初心者向けの基本知識

プログラミングの世界でよく使われるディレクトリという言葉は、パソコンで言うところの「フォルダ」と同じ意味です。ディレクトリ構成とは、どのフォルダの中にどのファイルを置くかという「お片付けのルール」のことを指します。

CodeIgniter（コードイグナイター）というPHPのフレームワーク（便利な道具箱）を使ってWebサイトを作る際、このルールが守られていないと、画像が表示されなかったり、デザインが崩れたりする原因になります。特に、見た目を担当するビュー（View）と、装飾を担当するCSS、動きをつけるJavaScript（JS）は、それぞれ役割が違うため、適切な場所に配置することが大切です。

まずは、家づくりをイメージしてみましょう。ビューは「壁や屋根」、CSSは「壁紙の色」、JSは「自動ドアの仕組み」のようなものです。これらを一つの箱に乱雑に入れるのではなく、「建材フォルダ」「内装フォルダ」「機械フォルダ」のように整理して保管するのが、プロの開発者のやり方です。

2. 公開フォルダ「public」と「app」の使い分け

CodeIgniter 4以降では、セキュリティのために非常に重要なルールがあります。それは、「ブラウザから直接見える場所」と「見えない場所」を分けることです。

皆さんが書いたプログラム本体（PHPファイル）は、通常 app という名前のフォルダの中に隠されています。ここは「家の金庫」のようなもので、外から誰でも覗ける状態にしてはいけません。一方で、CSSやJavaScript、画像といったファイルは、ブラウザが読み込む必要があるため、public（パブリック：公共の）という名前のフォルダに置きます。ここが「家の外壁」にあたり、外からアクセスできる場所になります。

初心者がよくやってしまうミスは、app/Views フォルダの中にCSSファイルを置いてしまうことです。これではブラウザがCSSを見つけることができず、デザインが適用されません。まずは「CSSやJSはpublicフォルダに入れる！」ということをしっかり覚えましょう。

3. CSSとJSを整理するための推奨ディレクトリ構造

それでは、具体的に public フォルダの中をどのように整理すれば良いか、理想的な構成例を見てみましょう。ここでは、後から見返してもどこに何があるか一目でわかる構成を紹介します。

基本的には、assets（アセット：資産・素材という意味）という名前のフォルダを public の中に作り、その中に種類ごとのフォルダを作成します。


public/
  ├── assets/
  │    ├── css/        (デザイン用のスタイルシートを入れる)
  │    ├── js/         (動きをつけるJavaScriptを入れる)
  │    ├── images/     (写真やアイコンの画像を入れる)
  │    └── vendors/    (外部から持ってきたライブラリなどを入れる)
  ├── index.php        (システムの入り口)
  └── .htaccess        (サーバーの設定ファイル)

このように整理することで、複数のCSSファイル（例えば共通用、トップページ用など）が増えても、迷子にならずに済みます。ディレクトリ構成を整えることは、自分だけでなく一緒に開発する仲間や、未来の自分への優しさでもあります。

4. ビュー（Views）フォルダの中身を機能別に分ける

次に、プログラム側である app/Views フォルダの中身を整理しましょう。CodeIgniterでは、1つの画面を複数のパーツに分けて管理するのが一般的です。これを「コンポーネント化」や「パーツ化」と呼びます。

例えば、全てのページで共通して使う「ヘッダー（一番上の部分）」や「フッター（一番下の部分）」、そしてページごとの「メインコンテンツ」を別々のファイルに分けます。おすすめの構成は以下の通りです。


app/Views/
  ├── layout/          (全体の枠組み：共通のHTML構造)
  ├── partials/        (部品：ヘッダー、フッター、サイドバー)
  ├── pages/           (各画面のメインコンテンツ：Home, Aboutなど)
  └── components/      (小さな部品：ボタン、カードなど)

このように分けることで、「ヘッダーのロゴを変えたい」と思ったときに、100ページ分を修正するのではなく、partials/header.php という1つのファイルを直すだけで全てのページに反映されるようになります。これをメンテナンス性が高いと言います。

5. Layout（レイアウト）ファイルの作り方と基本コード

実際に、全体の枠組みとなるレイアウトファイルを作ってみましょう。CodeIgniterには「View Layouts」という機能があり、これを使うと効率的に画面を構成できます。

まずは、app/Views/layout/main.php を作成し、そこにHTMLの土台を書きます。ここで重要なのが renderSection() という命令です。これは「ここに各ページのメイン内容をはめ込むよ！」という予約席のようなものです。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>マイWebサイト</title>
    <!-- public/assets/css/style.cssを読み込む -->
    <link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
    <!-- パーツ（ヘッダー）の読み込み -->
    <?= $this->include('partials/header') ?>

    <main>
        <!-- ここに中身が流し込まれる -->
        <?= $this->renderSection('content') ?>
    </main>

    <!-- パーツ（フッター）の読み込み -->
    <?= $this->include('partials/footer') ?>

    <script src="/assets/js/main.js"></script>
</body>
</html>

このコードでは、include() を使ってバラバラにした部品を合体させています。初心者の方は、まず「includeは部品を持ってくる魔法の言葉」と覚えておけば大丈夫です。

6. Partial（パーツ）で共通部分を効率化する

続いて、先ほどのレイアウトの中で呼び出していた partials/header.php の中身を作成してみましょう。ここには、サイトのロゴやナビゲーションメニューなどの共通パーツだけを書きます。


<header style="background: #f8f9fa; padding: 10px;">
    <div class="container">
        <h1>僕のブログ</h1>
        <nav>
            <ul>
                <li><a href="/">ホーム</a></li>
                <li><a href="/about">プロフィール</a></li>
            </ul>
        </nav>
    </div>
</header>

このように、HTMLの断片だけをファイルに保存するのが「パーツ化」のコツです。<html> や <body> タグをここに書く必要はありません。純粋にその場所に必要なコードだけを記述します。これにより、コードが短く読みやすくなり、ミスも減ります。もしパソコンの操作に慣れていない方なら、一つの長い巻物を作るのではなく、小さなメモ用紙を組み合わせて大きな掲示板を作るイメージを持つと分かりやすいでしょう。

7. 各ページの中身（コンテンツ）を記述する

最後に、実際に表示される個別のページ（例えばトップページ）の作り方です。app/Views/pages/home.php を作成します。ここで一番上に書くべきなのは、「どのレイアウト（枠組み）を使うか」という指定です。


<!-- どのテンプレートを使うか指定 -->
<?= $this->extend('layout/main') ?>

<!-- contentセクションの開始 -->
<?= $this->section('content') ?>
    <h2>ようこそ！私のホームページへ</h2>
    <p>これはCodeIgniterでビューを整理して作った最初のページです。</p>
    <div class="alert alert-info">
        最新の記事をチェックしてくださいね！
    </div>
<?= $this->endSection() ?>

extend() は「この枠組みを拡張して使いますよ」という意味で、section('content') から endSection() の間に書いた内容が、親となるレイアウトの renderSection('content') の場所にスッポリとはまります。この仕組みを理解すれば、どんなにページ数が多いWebサイトでも、整然としたディレクトリ構成で管理できるようになります。

8. CSSとJSを読み込む際の絶対パスとベースURL

ディレクトリ構成を整理した後に、よくあるトラブルが「CSSが反映されない」という問題です。これはファイルへの「道順（パス）」が間違っているために起こります。

パソコンのフォルダ構成で public/assets/css/style.css と配置した場合、HTMLからは /assets/css/style.css と指定するのが一般的です。最初の /（スラッシュ）は「一番上のフォルダから探してね」という合図です。CodeIgniterには base_url() という便利な機能があり、これを使うと常に正しい道順を自動的に作ってくれます。


<!-- 安全な読み込み方 -->
<link rel="stylesheet" href="<?= base_url('assets/css/style.css') ?>">
<script src="<?= base_url('assets/js/app.js') ?>"></script>

このように書くことで、本番のサーバーにアップロードしたときでも、リンク切れを起こさずに済みます。プログラミング未経験の方は、ファイルの住所をしっかりと指定してあげる案内係になったつもりで、これらのコードを書いてみてください。

公的機関での指導実績【CodeIgniterモダン開発実践セミナー】

商用CodeIgniter 4 徹底実践講座：軽量MVCによる高速開発とシステムのモダナイゼーション

#商用設計 #APIアーキテクチャ #市場価値最大化

ハローワーク職業訓練講師の実績を持つプロが監修。商用PHP開発の「現場の作法」を完全伝授。

「極限のパフォーマンス」を実装する。CodeIgniter 4で軽量・高速な商用システムを構築。

本講座では、フレームワークのオーバーヘッドを最小限に抑えた「高レスポンスなWebアプリケーション設計」を学びます。シンプルながら強力なCodeIgniter 4を通じ、既存システムのPHP 8.x対応や、リソース効率を極めたAPI開発など、実務で重宝される最適化技術を習得します。