2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Laravel+Xamppローカル環境作成-ハンズオン:①Xampp・Composer・Vscodeインストール編

Last updated at Posted at 2024-02-22

①Xampp・Composer・Vscodeインストール編

最近個人でLaravelアプリの開発を行うことが多く、環境作成について忘れていたのでハンズオン形式で記事を作成しました!

温度感としては初学者や初めてローカル環境や開発環境を作成したい方もわかるように記載しますので冗長的な部分は暖かい目でお願いします。

また、筆者がWindows環境なのでMacでのハンズオンではないことをご理解ください。

よくDocker+Xmappなどの構成も見るので時間があったらまとめたいと考えています~

作業の流れ

Laravelをインストールし起動→初期画面を表示するまでの作業の流れです。

現在自分が何をどこまで作業したかなどイメージができると良いと思います。
Untitled.png

今回の記事では、step1~3までのインストール範囲を記載しています。
次回以降でLaravelのインストール起動を行います。
Untitled2.png

環境について

今回は下記ツールや環境で行っています。

  • Windows11
  • Vscode
  • Xammp v3.3.0
  • Composer v2.7.1
  • PHP 8.0.3

目的

PC上にローカル環境を立ち上げ、Laravelを動かすことまでとしています。
簡単な構成イメージ図です、ざっくりなのでイメージできれば良いぐらいで大丈夫です。
Untitled3.png

本記事ではコード編集等はなくコマンドプロンプト上での操作・作業になります、CUIが苦手な方も本記事の画像と見比べ実施してみてください。

1.Xammpインストール

下記URLからXamppのインストールを行います
https://www.apachefriends.org/jp/download.html

Xamppダウンロード画面が表示されるので「Windows向けXampp」から「8.0.3」のダウンロードをクリックします。
Untitled4.png

ダウンロードが開始され以下のような画面が表示されればOKです。
Untitled5.png

ダウンロードが完了するとダウンロードフォルダに実行ファイル「xampp-windows-x64-8.0.30-0-VS16-installer.exe」がありますのでクリックし実行して下さい。
Untitled6.png

OS の種類によって表示される警告などが異なる可能性があります。
下記はエラー表記の例です、警告が表示されますが「はい」をクリックで大丈夫です。
Untitled7.png

インストーラーが起動しますのでインストールを行います。
Untitled8.png

インストール済みの項目はグレー表示になります、初回インストールであれば特に変更しないで大丈夫です。
Untitled9.png

インストール先ディレクトリを指定します。
任意で変更が行えますが、今回はデフォルトの「C:\xampp\」で問題ありません。
Untitled10.png

「Learn more about Bitnami for XAMPP」にチェックがあると説明が表示されるのでチェックを外します。
Untitled11.png

インストールを行うかの確認になります、「Next」をクリック。
Untitled12.png

インストールが開始され5~10分で完了します。
Untitled13.png

以下警告がでた場合、問題なければ「アクセスを許可する」をクリックします。
※開発環境を作成する上で許可が必要になります。
Untitled14.png

上記作業が完了し、下記画面が表示されればインストール完了です。「Do you want to start the Control Panel now ?」にチェックが入っている状態で「Finish」をクリックします。
Untitled15.png

2.Composerインストール

公式サイトからインストーラーをダウンロードします。
https://getcomposer.org/

公式サイトに行くと下記画面が表示されるので「Download」をクリック。
Untitled16.png

今回はインストーラー経由でダウンロードを行うので「Composer-Setup.exe」をクリックし、インストーラーをダウンロードします。
Untitled17.png

ダウンロードフォルダに「Composer-Setup.exe」が配置されますので、クリックして実行します。
Untitled18.png

Composerのインストールを開始します。
Untitled19.png

Xamppがインストールされている場合はXampp配下のPHPファイルを参照しますので下記画像になっていれば大丈夫です。
Untitled20.png

プロキシ設定をしている場合は記載します、今回は社用等ではないので記載なしで大丈夫です。
Untitled21.png

インストールの最終確認をされますが、問題なければインストールをクリックます。
Untitled22.png

インストールが開始しますので完了するまで待ちます。
Untitled23.png

下記画面が表示されればインストール完了です。
Untitled24.png

下記コマンドをコマンドプロンプトに入力し、Composerのインストールが行えたか確認します。
composer -v

下記画面が表示され、バージョンが表示されればインストール完了になります。
Untitled25.png

3.VScodeインストール

公式サイトからインストーラーをダウンロードします
https://code.visualstudio.com/download

Windows版をインストール
Untitled26.png

インストーラーがダウンロードされるのを待ちます。
Untitled27.png

ダウンロードフォルダに「VSCodeUserSetup-x64-1.86.2.exe」が配置されます、クリックして実行します。
Untitled28.png

同意するにチェックし、次へをクリックします。
Untitled29.png

初期状態で問題ないので次へ、アイコンを追加したい場合はチェックして次へ。
Untitled30.png

インストールの確認が表示されるのでインストールをクリック。
Untitled31.png

インストールが完了するまで待ちます。
Untitled32.png

インストールが完了すると下記画面が表示されるので、実行するにチェックをいれ「完了」をクリック。
Untitled33.png

VScodeが開けばインストール完了です、お疲れ様でした!
image.png

まとめ

PCや環境が変わるとローカル環境や開発環境の構築を必ず行いますが、時間を空けてしまうと忘れやすいのでハンズオン形式でまとめました!

手順や画像を細かく記載したので初心者や初学者の助けになれば幸いです。

次回の記事では実際にXamppを動かし、ローカル環境にLaravelフレームワークをインストールしてみます。

もしよければよろしくお願いいたします。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?