こんにちは、かんたろうです。
前回は、「Laravelを使ったWebサイトのトップページを編集するにはどのファイルを編集すればいいのか？」という問題を解決するために、chatGPTという最近話題のAIchatツールを使ってLaravelに関することを色々学びました。
今回は、前回学んだことを活かすために、実際に自分のパソコンにLaravelプロジェクトを作成していきます。
Laravel開発環境を構築するために
今回Laravel開発環境を構築するために、自分のパソコンに「XAMPP」「Composer」「node.js」の3つを用意します。
ちなみに、僕のパソコンのOSはWindows10です。
1つ目のXAMPPって何だっけ？
XAMPP は、完全に無償で MariaDB、PHP、および Perl を含んだ、簡単にインストールできる Apache ディストリビューションです。
https://www.apachefriends.org/jp/index.html
MySQLはよく聞くけど、MariaDBって初めて聞いたかも。MariaDBはMySQLから派生したものらしくて、共通点が多いみたいだ。
Apacheは有名なWEBサーバソフトらしいね。
Perlはよく分からんから一旦スルーするとして、、、
2つ目のComposerって何？
Composer は、PHP のプロジェクトが必要とするライブラリやパッケージを管理する「ライブラリ依存管理ツール」です。 その PHP プロジェクトで必要なパッケージ(ライブラリ)は何かを列挙すると、それらを自動的にインストールしてくれる機能を持ちます。
https://weblabo.oscasierra.net/php-composer-1/
なるほど、、、PHPを扱える人にとって、かなり便利なツールなのかな。
3つ目のNode.jsって何？
Node.js® は、Chrome の V8 JavaScript エンジン で動作する JavaScript 環境です。
https://nodejs.org/ja/
「Chrome の V8 JavaScript エンジン 」についてはイマイチ分からんけど、とりあえずNode.jsはJavaScript環境なんだな。
ここまで説明した「XAMPP」「Composer」「node.js」の3つが必要っぽいから、ここからローカルPCにそれらを用意していきます。
XAMPPのインストールとApacheのポート番号変更
以前、自分のパソコンのCドライブ直下にXAMPPをインストールしていたので、それを使います。
以下は、XAMPPのControl Panelです。初期のままだと、Apacheのポート番号が80になっています。
他のアプリケーションで80を使っている場合は、Apacheのポート番号を80以外に変更しないといけないようです。
僕はアプリケーションを初めて作成するので、特にポート番号を変更する必要がないのですが、せっかくなので8080に変更していきたいと思います。
Apacheの「Config」ボタンを押すと「httpd.conf」が表示されるので、それを選択します。
以下のテキストファイルが自動的に開かれます。
「Listen 80」となっている行があるので、「Listen 8080」に変更してテキストファイルを保存します。
保存した後、XAMPPのコントロールパネル画面にて、右端にある「Config」ボタンを押します。
すると、次の画面が表示されますので、「Service and Port Settings」ボタンを押します。
そうすると、Apacheのポート番号を設定する画面が表示されるので、80を8080に変更します。
しかし、この時点で設定変更の権限がないため、エラーが出ます。
設定変更の権限を自分に与えるために、XAMPPディレクトリ内のxampp-control.iniのプロパティを開きます。
プロパティ画面にて、編集ボタンを押下すると、アクセス許可（権限を与えること）ができます。
「フル コントロール」にチェックを入れると、自動的に全ての項目にチェックが入ります。
チェックを入れた後、もう一度、Configボタンからポート番号の設定変更を行うと、以下の画像のようにポート番号が8080への変更が成功します。
これで、Apacheのポート番号変更が完了しました。
Composerのインストール
XAMPPに続き、Composerもインストール済みだったため、そのまま使っていきます。
Node.jsのインストール
今回Laravel環境を構築していくにあたって、XAMPPとComposer以外に「Vite」というフロントビルドツールも使っていくため、Node.jsをインストールします。
Vite？
フロントビルドツール？
分からない単語やらツールやらも関わってくるらしいですが、全部の疑問に付き合ってたら一生終わらない気がするので、「Vite」「フロントビルドツール」については一旦スルー。
理解が中途半端なままではありますが、とりあえずLaravel開発環境に必要なツールとして、XAMPP , Composer , Node.js の3つを自分のパソコンに用意しました。
Laravelプロジェクトの作成
ここでやっと、Laravelのインストールです。
今後Laravelを使ったprojectデータを入れておくためのフォルダを任意の場所（僕の場合はデスクトップ）に作りました。
そのあと、ターミナルで作ったフォルダまで移動してから以下のコマンドを打ちました。プロジェクト名は「sample-project」にしています。
composer create-project laravel/laravel sample-project --prefer-distすると、Laravelが綺麗にインストールされた、、、かと思いきや、エラーというエラーが出ました。
「The zip extension and unzip command are both missing」と言われています。
原因を知るために、エラー文をそのままGoogle検索にかけてみて、似たような症例が出ているか調べてみたのですが、いまいち分かりませんでした。
そこで、chatGPTの出番です。chatGPTに相談してみました。
「The zip extension and unzip command are both missing」というエラーが出たので、原因を知りたいです。使っているOSはWindows10です。
このエラーは、お使いのWindows 10システムにzip圧縮/解凍ツールがインストールされていないことを示しています。Windows 10には標準でzip圧縮/解凍機能がありますが、某些理由で無効になっている場合もあります。この問題を解決するためには、次のいずれかの方法を試してみてください：
- Windowsの機能の有効化：「設定」アプリから「アプリと機能」を開き、「Windowsの機能の有効化または無効化」を選択します。検索ボックスに「圧縮」と入力し、「圧縮・解凍ソフトウェア」を有効にするオプションを選択します。
- サードパーティツールのインストール：7-Zipなどのサードパーティのツールをインストールすることもできます。
これらの方法を試しても問題が解決しない場合は、他の原因が考えられます。例えば、システムの設定が正しくない場合、アンチウイルスソフトウェアの制限などが原因である可能性があります。これらの問題に関しては、別途調査することをお勧めします。
ありがとうございます！！
といった感じのやり取りがたった1分で完結しました。
エラーの原因は、「標準でインストールされているはずのzip圧縮/解凍ツールがインストールされていない」というものでした。
僕は数カ月前にパソコンの中身の断捨離を実行したのですが、そのときにzip圧縮/解凍ツールまで消してしまっていたようです。
僕はchatGPTの返答を参考に、提示された方法のうち、「サードパーティツールのインストール」というのを選び、サードパーティツール「7-Zip」のインストールを実行しました。
不完全な状態の「laravel-project」を作成してしまったので、一度削除。
「laravel-project」を再作成しました。
composer create-project laravel/laravel sample-project --prefer-dist
お、さっきと違ってエラーが出てこないぞ！
結局、「Application key set successfully.」が出るまでエラーが出ませんでした！
無事、エラーを解決させることが出来ました。
chatGPT様、ありがと～！！
どういたしまして！ お力になれてうれしいです。 あなたが何か別の質問がある場合は、気軽にお尋ねください。 お待ちしています！
chatGPTは、生身の人間と会話をしているような返答をしてくれるので、良い意味でAI感がありません。
気持ちを切り替えて、Laravelのバージョンを確認するために次のコマンドを打ちます。
php artisan -V
作成したローカルに作成したLaravelのバージョンは、9.51.0でした。
次のコマンドを打ち、node.jsのモジュールをダウンロードします。
npm installところで、
npmって何？
WEB関連の記事でよく見かけるけど、いまいちピンと来ないんだよなぁ。
となったので、npmについて調べてみました。
Node.jsには、さまざまなシーンで便利に利用できるプログラムのかたまりをパッケージという単位にまとめて配布されています。
npmはこのパッケージを検索したりインストールすることや、バージョンなどを管理できる便利なツールというわけです。
https://www.sejuku.net/blog/75691
ということらしいです。調べたけど、やっぱりピンと来ない。
実際に触って学ぶしかなさそうだな、、、
とりあえず、node.jsのモジュールをインストールできたようなので、先へ進みます。
サーバーを起動するため、次のコマンドを打ちます。
php artisan serve --port=8080(Apacheのポート番号を8080に設定したため)
すると、以下のURLが表示されました。
表示されたURLでアクセス、、、
果たしてサーバー接続に成功したのか？
なんとか成功した～！Laravelを実際にいじったりできるようになるまではもう少し時間かかるんかなぁ。
以上が「Laravel開発環境を構築」でした。
以下の記事を参考にして環境構築を行いました。
上記の記事の投稿者である千草さんは、アプリを開発したり技術書を執筆したりしているWEB上級者です。
つまり、前回から僕が取り組んでいるのは、ある意味で「WEB初心者の僕がWEB上級者の書いた記事を読んで、記事内容をどこまで実践できるのか」という実験をしているのと同じです。
そんな実験の様子を見たい方は、ぜひ次回の記事も見ていただけたらと思います。