NO IMAGEDocker

環境構築が苦手・でもWeb大好き人間がDockerの中身を理解してみた話

この記事について この記事では、Laravel開発をDockerでやってみた私が、「そもそもDockerって何？」「なぜこれをやるの？」を自分なりに整理してみた記録です✍️ 環境構築が苦手でも、Web開発は大好き！という方に向けて、「イメージ？ボリューム？なにそれ美味しいの？」状態からのスタートを優しくまとめました。 🍱 Dockerってなに？をざっくり言うと… Dockerとは、「自分だけの仮想の環境を用意して、ソフトを動かす」仕組み！ いろんなソフトを動かすと、環境がごちゃごちゃしがち…。でもDockerを使えば、隔離された環境（＝コンテナ）を用意して、スッキリ・再現性高く開発できるんです！ 🧠 出てくる用語がややこしいので整理！ 🧊 イメージとは？ 🍱 コンテナとは？ 💾 ボリュームとは？ それぞれの関係性は？ コンテナ・イメージ・ボリュームが一体結局何やっているのかよくわからない。わかりにくいので教室に例えるとこんな感じ。 要素 教室に例えると… なにしてるの？ 📘 イメージ 教科書セット（国語・英語など） 必要な知識・ツールのかたまり（=設計図） 🪑 コンテナ 机 実際に作業する場所（=実行中の環境） 📒 ボリューム ノート（開かれた） 記録・データ保存（=永続化） 🧩 どうやって使い分けるの？ 用語 一言で言うと 消える？ 役割 イメージ 設計図・冷凍弁当 ❌ コンテナを作る元 コンテナ 実行中の環境 ✅（削除時） アプリケーションが動く場所 ボリューム データ保存倉庫 ❌ DBやファイルの永続化に使う 🖋 なぜ .yml ファイルを書くのか？ それはDockerに「このコンテナたちをどう構成して動かすか」を伝えるため！ このように、Laravelのソースコード、PHPの環境、Nginxの連携方法などを1つのファイルで管理できます✨ 実は、docker compose up で一発起動できるのもこのファイルのおかげ✨どのコンテナを使うか、どうつなぐか、どんな設定で起動するか…全部 docker-compose.yml に書いてあるから、「設計図さえあれば、誰でも同じ環境を即座に再現できる」というわけなんです！ 🧠 GUIでLaravel動かせるのになんでわざわざ？ 便利なGUIツール（Laravel Herdなど）もあるけど… だからこそDockerfileやdocker-compose.ymlを自分で書くと「ちゃんと理解した開発」ができる！のです🔥 🧁 おまけ：今後やりたいこと
NO IMAGEDocker

環境構築が嫌いなWeb大好き人間がDockerを初めて入れてみた

Laravelを使って開発を始めたいけど、環境構築が面倒…そんなあなたに贈る、DockerでサクッとLaravelを動かすための手順を紹介します！Windowsでの実体験をもとに、つまずきやすいポイントもフォローしています🛠️ ✅ この記事でできるようになること 🛠 前提 インストールから起動まで ① Docker Desktopのインストール 初回起動時に「WSL needs updating」という画面が出た場合、PowerShellで以下を実行しますwsl --update ② 開発用フォルダの作成 以下のような構成を想定します： C:\Users\ユーザー名\projects\laravel-docker PowerShellで以下のようにフォルダを作成： ③ Docker関連ファイルの作成 以下のような構成で関連ファイルを作成していきます laravel-docker/ ← プロジェクトのルート├── docker-compose.yml ← コンテナの定義ファイル├── nginx/│ └── default.conf ← Nginxの設定ファイル├── php/│ └── Dockerfile ← PHP（Laravel実行環境）のDockerfile└── src/ ← Laravelアプリケーション本体（後で生成される） src/ フォルダは composer create-project laravel/laravel . を実行したあとにLaravel一式がここに展開されます。 📄 docker-compose.yml 📄 php/Dockerfile ※拡張子不要で【Dockerfile】というファイル名にする 📄 nginx/default.conf ④ Dockerを起動＆Laravelをインストール まずDockerを起動し、以下のコマンドでコンテナを立ち上げます： 次にLaravelをインストール： Laravelインストール後にエラーが出たらパーミッションの変更を試してください。※storage と bootstrap/cache の権限が足りないと「Permission denied」エラーが出る！docker compose exec app chmod -R 777 storage bootstrap/cache ⑥ hostsファイルの編集（管理者で開く） http://laravel.local でアクセスしたいので、以下に追記： C:\Windows\System32\drivers\etc\hosts 末尾に以下を追加： ⑦ Laravelにアクセス！ 🎉 http://laravel.local にアクセスすると、Laravelのトップ画面が出れば大成功！ 🔧 MySQL接続にする場合は… .env を以下のように変更： マイグレーション実行： ✅ Dockerの開始・停止方法 開始（再開） 停止 📝 まとめ
NO IMAGECodeIgniter

CodeIgniterをXAMMP環境にインストールする

CodeIgniterというフレームワークを使って開発したいという要件がきたので、まず、CodeIgniter（コードイグナイター）って何？という話から… CodeIgniter（コードイグナイター）ってなに？ まず、「CodeIgniterって聞いたことない…」って思う人、全然おかしくないです。私もです。Laravel（ララベル）やCakePHPの陰に隠れがちだけど、実はかなり昔からある、軽量＆高速なPHPフレームワークなんです。 特徴をざっくり紹介すると： CodeIgniterをXAMPPにインストールする手順 環境・前提条件 Windows 11 ProXAMMP ドキュメントルートは C:\xampp\htdocs\codeigniter URLはcodeigniter.codeIgniterとする CodeIgniter 4では public フォルダがルートになるので、 ↑に記事を参考にして、ドメインの設定をしてください。 CodeIgniterをダウンロード 公式サイトから最新版をダウンロード https://codeigniter.com トップページにある「Download」ボタンをクリックして、Zipファイルをダウンロードして解凍します。 CodeIgniter4.Xをこの先インストールしていきます ダウンロードしたファイルをhtdocsフォルダに配置 解凍したフォルダの中身を、XAMPPの C:\xampp\htdocs\codeigniterに移動。 ブラウザで確認！ http://codeigniter.localhost/にアクセスして表示の確認。 The framework needs the following extension(s) installed and loaded: intl.のエラーが出た場合はphp.iniを修正してください。;extension=intl　→　extension=intl　（先頭のセミコロンを削除）保存し、XAMMPのApach再起動後もう一度アクセスしてみてください。 インストールできました👏
Database

データベースの中身をただただ表示するだけのものを作る（データベースの違いを確認する）

SQLiteの管理ができるWebアプリがほしい。と言われまして…工数の計算とかそもそも、こいつどんなんだったけ？？となりました。SQLiteなんてAndroid開発以外でほぼ使ったことないのでほぉ。。。と思いながら久しぶりに色々調べてみました。 SQLiteって何？ 特徴 SQLiteはファイルさえあればOK！どこかにサーバーを立てる必要なし こんな場面で使う MySQLって何？ 特徴 サーバープログラム（MySQL Server） がPCやサーバーで常に動いている必要があり こんな場面で使う まとめ SQLiteはインストール不要のDB SQLiteは ライブラリ で提供されています（たとえば、PHP・Python・Laravelなどに組み込み済みのことが多い）。 特別なセットアップ作業が不要。 たとえば SQLite MySQL 稼働形式 組み込み型（ファイル） サーバー型（クライアント-サーバ） セットアップ ほぼ不要 必要（ユーザー設定・起動など） 同時接続数 少人数向き 大人数・多接続に対応 トランザクション 対応（基本的） 対応（高機能） 主な用途 開発・小規模・モバイル 商用・大規模・本番運用 と、まとめていると…「ああ、こうだったなぁ」と思い出してきました。
Bootstrap

Bootstrapでオリジナルのコンポーネント一覧を作る（導入編）

Web開発をしていると、デザインにこだわりたいけど、デザイナーではないし、どこまで作り込むべきか悩むことってありませんか？また、ルールがしっかり決まっていないチームだと、各メンバーがバラバラなデザインを作ってしまい、結果として統一感のないUIになってしまうことも…。 そこで役立つのが Bootstrap。あらかじめ洗練されたデザインが用意されているので、手っ取り早く、それっぽいUIを作れるのが最大のメリットです。 とはいえ、デフォルトのままだと「どこかで見たようなデザイン」になりがち。そこで、Bootstrapをベースにオリジナルのコンポーネントを作ることで、統一感を保ちつつ、自分たちのプロジェクトに合ったデザインにカスタマイズできます。 本記事では、Bootstrapを活用して 非デザイナーでも簡単に、迷子にならずにオリジナルコンポーネントを作る方法 を解説します！ Bootstrapの基本を押さえる Bootstrapは、HTML・CSS・JavaScriptを使って、簡単に統一感のあるデザインを作れるフレームワークです。公式のコンポーネントを活用すれば、ボタン・ナビゲーション・フォームなどがほぼコードを書かずに実装できます。 ここでは、Bootstrapを使うための基本的な方法を押さえていきましょう！ Bootstrapの導入方法 ① CDN（手軽に導入する方法） 一番簡単なのは、BootstrapのCDN（Content Delivery Network）を使う方法です。以下のコードをHTMLのヘッダー部分に追加するだけで、すぐにBootstrapが使えます。 この方法なら、ダウンロード不要で手軽に試せるのがメリットです！ npmでインストール（開発環境で管理する方法） 本格的にカスタマイズするなら、npmでインストールする方法がおすすめです。 今回はhtdocs に「bootstrap」フォルダを作成をして、http://localhost/bootstrapで表示の角煮ができるようにしますフォルダ作成の場所は任意の場所で問題ありませんがこの記事ではC:\xampp\htdocs¥にbootstrapというフォルダを作成して実行していきます。 1.npmの初期化 package.json を作成します。 今回は、Bootstrapをnpmで管理するので、まず最初に「このフォルダはnpmを使ってますよ！」という設定をする必要があります。 それが npm init です。 npm init -y と入力すると、プロジェクトの説明書である package.json というファイルが自動で作られます。 ここに、これからインストールするBootstrapや、必要なライブラリの情報がまとめられます。 チームで作業したり、あとから別の環境で同じプロジェクトを再現したりするときにとても便利です！ 2.Bootstrapをインストール 実行結果が以下のようになればOK フォルダ構成を整理 作業がわかりやすくなるように、自分用のCSSやHTMLを整理します。 最終的なフォルダ構成イメージは下のようになります。 node_modulesはBootstrap関連ファイルが大量に入っているので省略してますが、このようになっていればOK コンポーネント一覧を作る 先ほど作ったindex.htmlにとりあえずコンポーネント一覧を作ります。 Bootstrapでよく使うのは Bootstrapカスタムコンポーネント 一覧用HTML
Laravel

Laravelでカンタンなアプリを作ってMVCモデルを理解する④

タスクの「完了 / 未完了」を切り替えられるようにする ルーティングを追加 routes/web.php に以下のルートを追加します。 これで /tasks/{id}/toggle に PATCH リクエストを送ると、toggleComplete() が実行できるようになりました。 toggleComplete() メソッドを追加 app/Http/Controllers/TaskController.php を開き、以下のメソッドを追加します。 ビューに「完了 / 未完了」切り替えボタンを追加 resources/views/tasks/index.blade.php を開き、タスクごとに切り替えボタンを追加。 このページでやったこと
Laravel

Laravelでカンタンなアプリを作ってMVCモデルを理解する➂

タスクを削除できるようにする タスクを完全に削除せず、ソフトデリート（論理削除）を行うようにする。 ソフトデリートを導入するメリットデータの復元ができる（「間違えて削除した！」→ 復元できる）削除履歴を残せる（いつ誰が削除したか管理できる）実際にデータを削除しないので、関連データを保持できる ルーティングを追加 routes/web.php に DELETE のルートを追加。 /tasks/{id} に DELETE リクエストを送ると destroy() が実行すできるようになります。 テーブル構造を変更する 現在のテーブル構造は カラム名 データ型 説明 id bigint (AUTO_INCREMENT) 主キー（自動で増加） title string (VARCHAR) タスクの名前 completed boolean (TINYINT) タスクの完了フラグ (true=完了, false=未完了) created_at timestamp 作成日時（自動で設定） updated_at timestamp 更新日時（自動で設定） このようになっている。ここに、削除フラグのカラムを追加するため、マイグレーションを変更します。 新しいマイグレーションを作成 作成されたマイグレーションファイル (database/migrations/YYYY_MM_DD_add_deleted_at_to_tasks_table.php) を編集。 マイグレーションを実行 これで tasks テーブルに deleted_at カラムが追加される。実際に追加されているのか確認をしてみよう。 モデルにSoftDeletesを追加する app/Models/Task.php を開いて、以下を追加。 SoftDeletes を追加すると、delete() を実行してもデータは削除されず deleted_at に値が入る！ 削除ボタンの処理を追加する app/Http/Controllers/TaskController.php の destroy() メソッドを追記します。 れで /tasks/{id} に DELETE メソッドでリクエストを送ると、そのタスクが削除（ソフトデリート）される！ 削除ボタンをフォームに追記する resources/views/tasks/index.blade.php を編集し、削除ボタンを追加。 削除できるか実際にやってみる この順で画面が表示されて削除されていればOK！ 実際に削除されずフラグが変わっているかも確認してみる。 タスクを追加すると この勉強するを削除する。 日付が入っていますね！ このページでやったこと
Laravel

Laravelでカンタンなアプリを作ってMVCモデルを理解する➁

タスクを追加できるようにする 完成イメージ ①で作ったリストにフォームを付けます。 追加が成功すると緑の文字で「success」と表示されるようにします。 することは ルーティングの追加 routes/web.php に以下を追加します。 POST /tasks にリクエストが送られると、store() メソッドが実行されるようになります 次にcontrollerにstore() メソッドを追加します。 コントローラーの store() メソッドを追加 app/Http/Controllers/TaskController.php を開き、store() メソッドを追加。 フォームを作成 resources/views/tasks/index.blade.php を編集し、以下のフォームを追加。 実際に表示をしてみる http://laravel.localhost/tasksにアクセスしてみる 試しに入力してみてる（例：勉強する） 一番下に保存されました！ このページでやったこと
Laravel

Laravelでカンタンなアプリを作ってMVCモデルを理解する

作るアプリの概要 機能: タスクの追加・表示・編集・削除 データ:tasks テーブル（id, title, completed） URL構成 開発の流れ Laravelプロジェクトを作成 マイグレーションとモデルの作成 マイグレーションとは？Laravelの マイグレーション（Migration） は、データベースのテーブル構造を コードで管理する仕組み です。データベースを直接編集するのではなく、マイグレーションファイルに テーブルの作成・変更のルールを記述 して、php artisan migrate コマンドで実行すると、データベースが更新されます。 まず、タスク管理のためのマイグレーションファイルを作成します。 コマンドプロンプトを起動して、laravelフォルダまで移動して以下のコメントを実行 このコマンドで以下の2つが生成されます： マイグレーションの編集 マイグレーションファイルを開いて、tasks テーブルの構造を定義します。 今回のテール部構造は以下のようにします。 カラム名 データ型 説明 id bigint (AUTO_INCREMENT) 主キー（自動で増加） title string (VARCHAR) タスクの名前 completed boolean (TINYINT) タスクの完了フラグ (true=完了, false=未完了) created_at timestamp 作成日時（自動で設定） updated_at timestamp 更新日時（自動で設定） id（主キー） title（タスクのタイトル） completed（完了フラグ） timestamps()（作成日時・更新日時） 実際にファイルを編集する database/migrations/YYYY_MM_DD_create_tasks_table.php を開き、up() メソッドを以下のように編集してください。 $table->id()の正体$table->id(); は $table->bigIncrements('id') の省略形 です。$table->bigIncrements('id');bigIncrements() の特徴は・BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY を作成する。・Laravelのマイグレーションでは デフォルトでAUTO_INCREMENT が有効 になる。 マイグレーションを実行 tasks テーブルがデータベースに作成される。 実際はこんなSQLが実行されています。 マイグレーション実行前にphp artisan migrate --pretend　で事前にSQLをチェックできます。 モデルの編集 モデル app/Models/Task.php を開いて、以下のように編集します。 これで、Task モデルを通じてタスクの作成・更新・取得ができるようになりました。 HasFactory とは？ HasFactory は LaravelのEloquentモデルにおいて、データを簡単に作成するための「ファクトリ機能」 を提供するトレイト（trait）です。通常、データベースにレコードを追加するには Task::create([...]) のように手動でデータを作成する必要がありますが、ファクトリを使うと、テストデータを自動生成 できます。 テストデータを入れる Laravel Tinkerを使って、テストデータを作成します Laravel Tinker は、Laravel に組み込まれている REPL（Read-Eval-Print Loop） ツールで、データベースの操作やコードのテストを手軽に実行できる 対話型シェル です。 Tinker を起動...
Laravel

LaravelでDBと接続してみる

環境/条件 Windows 11 ProXAMMP 前提条件 サブドメインのドキュメントルートは C:\xampp\htdocs\laravel サブドメインのURLはlaravel.localhostとする .envファイルで MySQL に接続する 23行目あたりに#でコメントアウトされている箇所を以下の内容に書き換える DB_DATABASE の値は、MySQL に作成するデータベース名と一致させる！ XAMPP の MySQL では、デフォルトのユーザーは root で、パスワードは空 ("")！ XAMPP の phpAdminでデータベースを作成 以下の条件で作成 Laravel のデータベース接続を確認 .envファイルを変更したのでキャッシュの削除を行います。 続いて、念のため Laravel の migrate を試してみる 成功すると、デフォルトのテーブル (users, password_resets など) が作成される！ ちゃんとデータベースに接続できたか確認 php artisan tinker を使って確認してみる。 以下のコマンドを実行して users テーブルのデータを取得 ↓こんな感じで表示されれば接続成功！ 🎉