カリキュラムの冒頭で説明した通り、フレームワークとは頻繁に使う基本的な機能をまとめて提供してくれるものです。企業などでの開発現場では、開発の効率化のために必ずといってよいほど何かしらのフレームワークを使います。
ここでは、PHPのWebフレームワークとして最も使われている「Laravel」を導入し、TODOリストを表示する簡単なWebページを作成します。
環境構築
Composer
Composerとは、フレームワークなどを外部サーバーから取得してくれるツールです。PCにはデフォルトではComposerは入っていないので、ダウンロードしてインストールします。
![Composer](https://tech-popeye.com/wp-content/uploads/2021/11/composer_1_compressed-1-1024x798.png)
ダウンロード
こちらからComposerのダウンロードページを開きます。
![ブラウザ](https://tech-popeye.com/wp-content/uploads/2021/11/composer_2_compressed-1024x960.png)
![ブラウザ](https://tech-popeye.com/wp-content/uploads/2021/11/composer_3_compressed-1024x782.png)
インストーラーである「Composser-Setup.exe」がダウンロードできました。
インストール
Composer-Setup.exeをダブルクリックしてインストールします。
![Composer](https://tech-popeye.com/wp-content/uploads/2021/11/composer_install_1_compressed.png)
![Composer](https://tech-popeye.com/wp-content/uploads/2021/11/composer_install_2_compressed-1024x722.png)
![Composer](https://tech-popeye.com/wp-content/uploads/2021/11/composer_install_3_compressed-1024x724.png)
![Composer](https://tech-popeye.com/wp-content/uploads/2021/11/composer_install_4_compressed-1024x725.png)
![Composer](https://tech-popeye.com/wp-content/uploads/2021/11/composer_install_5_compressed-1024x721.png)
![Composer](https://tech-popeye.com/wp-content/uploads/2021/11/composer_install_6_compressed-1024x723.png)
![Composer](https://tech-popeye.com/wp-content/uploads/2021/11/composer_install_7_compressed-1024x724.png)
これでComposerがインストールできました。
Laravel
Composerを使って、Laravelをインストールします。
まずは、プロジェクトフォルダ(任意のフォルダ)を作成します。ここでは「C:\laravel」フォルダにします。この中に開発する様々なファイルを格納していきます。
![Laravel](https://tech-popeye.com/wp-content/uploads/2021/11/laravel_1_compressed-1024x665.png)
次に、Visual Studio Codeを開き、「C:\laravel」フォルダを開きます。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_1_compressed-10-1024x702.png)
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_2_compressed-10-1024x704.png)
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_3_compressed-7-1024x704.png)
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_4_compressed-3-1024x704.png)
Visual Studio Codeのターミナルを起動します。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_5_compressed-1-1024x705.png)
ターミナルで以下を実行します。
composer create-project laravel/laravel todo_list
composerのコマンドを実行するときは、必ず「composer」から始まります。
次の「create-project」は文字通り「プロジェクトを作成する」という意味です。
今回はLavaralを使いますので「laravel/laravel」と続けています。これは覚えるしかありません。最後の「todo_list」は任意のプロジェクト名になります。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_6_compressed-1-1024x703.png)
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_7_compressed-1-1024x704.png)
コマンド実行後、最後に「successfully」と出ていればOKです。
指定したプロジェクト名「todo_list」というフォルダが出来ています。
todo_listフォルダ以下には、Laravelフレームワークの様々なファイルが格納されています。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_14_compressed-1-1024x959.png)
Webサーバーの確認
LaravelはWebサーバー機能を持っています。
簡単な動作確認を行ってみます。
ターミナルで、todo_listフォルダに移動します。
cd todo_list
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_8_compressed-1-1024x701.png)
ターミナルで以下のように実行します。
「artisan」はLaravelのコマンドで、「artisan serve」でWebサーバーを起動するコマンドになります。
※LaravelはPHPのフレームワークなので、「php」から始めます。
php artisan serve
![](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_9_compressed-1-1024x635.png)
コマンド実行後の「http://127.0.0.1:8000」に着目して下さい。
これをWebブラウザのURLに貼り付けることでアクセスできます。
※「127.0.0.1」は「localhost」と同じ意味です。「8000」は、LaravelのWebサーバーは8000番ポートを使っている、という意味です。
![ブラウザ](https://tech-popeye.com/wp-content/uploads/2021/11/browser_1_compressed-8-1024x1011.png)
LaravelがもっているデフォルトのWebページが表示されます。
まだ何もコーディングしていないのに、このようなWebページが表示されるのです。フレームワークの賜物です。
確認できたらLaravelのWebサーバーを停止します。ターミナル上で、キーボード「Ctrl」と「C」を同時に押します。これでWebサーバーを停止することができます。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_10_compressed-1-1024x638.png)
Node.js
以前のカリキュラムで、JavaScriptのフレームワークとして「jQuery」を使いました。今回は「Node.js」を使います。Laravelが内部的にNode.jsを使用することがあるためです。Node.jsはjQueryと並び、最も使われるJavaScriptのフレームワークの1つです。
ダウンロード
こちらからNode.jsのダウンロードページを開きます。
![ブラウザ](https://tech-popeye.com/wp-content/uploads/2021/11/nodejs_1_compressed-1024x885.png)
インストーラーである「node-v*-x64.msi」がダウンロードできました。
インストール
node-v*-x64.msiをダブルクリックしてインストールします。
![Node.js](https://tech-popeye.com/wp-content/uploads/2021/11/nodejs_install_1_compressed.png)
![Node.js](https://tech-popeye.com/wp-content/uploads/2021/11/nodejs_install_2_compressed.png)
![Node.js](https://tech-popeye.com/wp-content/uploads/2021/11/nodejs_install_3_compressed.png)
![Node.js](https://tech-popeye.com/wp-content/uploads/2021/11/nodejs_install_4_compressed.png)
![Node.js](https://tech-popeye.com/wp-content/uploads/2021/11/nodejs_install_5_compressed.png)
![Node.js](https://tech-popeye.com/wp-content/uploads/2021/11/nodejs_install_6_compressed.png)
![Node.js](https://tech-popeye.com/wp-content/uploads/2021/11/nodejs_install_7_compressed.png)
Visual Studio Codeを再起動します。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_11_compressed-1-1024x639.png)
再起動したときにターミナルが起動していれば、すべて強制終了します。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_12_compressed-1-1024x638.png)
再度、ターミナルを起動し、ターミナルで以下のコマンドを実行します。
node -v
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_13_compressed-1024x637.png)
「node」はNode.jsのコマンドです。Node.jsをインストールすることで使えるようになります。「node -v」とすることで、インストールされたNode.jsのバージョンを出力しています。
本節の説明は以上になります。