誰でもできる!Webアプリ開発用フレームワークLaravelの導入方法

こんにちはTakumiです。

今回は誰でもWebアプリケーション開発用フレームワークであるLaravelの導入ができるよう、画像を用いて詳しく導入方法を解説していきます。

フレームワークを用いたWebアプリ開発を始めたいという方、ぜひ参考にしてみてください!


Larvelの導入方法


1.XAMPPのインストール

XAMPP(ザンプ)

XAMPPとは、Webアプリケーションを動作させるのに必要なサーバや汎用スクリプト言語が一つのセットになったものです。

マクドナルドで例えると、ポテト、ハンバーガー、ドリンクがある中で、別々に注文すると大変なのでセットで注文するようなものです。

XAMPPもマクドナルド同様で、通常であれば、Linux OS(オープンソース OS)上でCUI(Character User Interface)、 いわばコマンドを用いてApache(Webサーバ)、MySQL(データベースサーバ:通称DB)、PHPスクリプト言語)を導入しなければいけなかったところを、 XAMPPのインストールツールを使用すれば、簡単にこれらのものを導入することができます。

XAMPPは細かい設定をすることなく、これらをすべて導入することができ、操作も簡単なため、開発環境構築の手間を最小化することができ、 Webアプリ開発の速度を格段に上げることができる画期的なツールです。

簡単に解説したところで、導入に移りましょう!

XAMPPの導入方法

XAMPPの導入方法は非常に簡単です。

まずは、以下のURLから最新のXAMPPのインストールツールをPCにダウンロードしてください。
XAMPPのダウンロード

インストールツールを起動したら、最初にQuestionが表示されるのでYasをクリックし、その次に表示される警告も無視してそのまま進んでください。


次にSelect Componentsでインストールする必要のあるものを聞かれるのでServer内のApacheMySQL、 Program Languages内のPHPその下のProgram Languages内のphpMyAdminにチェックを入れて次に進んでください。


Installation folderとLanguageは変更せず進めてください。
Bitnami for XAMPPまで進んだら、Lean more about Bitnami for XAMPPのチェックを外してインストールを開始してください。


インストールが完了したらDo you want to start the Control Panel now?と聞かれるので、そのまま次に進んで起動してみてください。


以下のコントロールパネルが表示されていれば問題なくインストールできています。 

コントロールパネルを表示することができたら、ApacheMySQLを起動してみてください。
ApacheMySQLと書かれた行のActionsの列にあるStartボタンを押すことで起動できます。
ModuleのApacheMySQLの部分が緑色になれば問題なく起動できています。


続いて、phpMyAdminも起動できるか確認してみましょう。
phpMyAdminMySQL行のAdminボタンを押すことで開くことができます。
以下のphpMyAdminの画面がしっかりと表示されていれば、こちらも問題なくインストールできています。


phpMyAdmin

ここで補足として、phpMyAdminについての話もしておきましょう。

phpMyAdminはDBを操作するためのコントロールパネルで、ここで、データを管理するテーブルの作成、カラム作成と設定などをすることができます。

通常はCUIを用いてDBテーブルの作成、カラム作成と設定などをしなければいけないところを、phpMyAdminを使用することで、 GUI(Graphical User Interface)で直感的に操作をすることができるため、Webアプリの開発速度を格段に上げることが可能になります。

では、一旦ApacheMySQLを停止させて次に移りましょう。


 

2.Composerのインストール

Laravelをインストールするには、初めにComposerをインストールする必要があります。

Composerとは、PHPのパッケージ管理ツールで、Laravelの操作に使用します。

まずは以下のURLにアクセスし、Windowsを使用している人は、Windows Installerの下にあるComposer-Setup.exeをクリックしてインストールツールをダウンロードしてください。
Composerのダウンロード


PCの全てのuserにインストールするか、現在使用しているユーザのみにインストールするか聞かれるので、状況に合わせて選択してください。
基本的にはInstall for all usersで問題ないと思います。
Developer modeでインストールするか聞かれますが、チェックせずそのままインストールしてください。


"Choose the command-line PHP you want to use":でphp.exeが選択されていれば変更する必要はありません。
XAMPPを先に入れているのでここは問題ないはずです。
その下では、Add this PHP to your path? と、PHPのパスを通すかを聞かれるので、チェックを入れて進んで下さい。


Proxy SettingsではPCでプロキシの設定をしている人は設定してください。
設定していない人はそのまま次に進み、そのままインストールを実行してください。


インストールが終了したらそのままFinishを押してもらって問題ありません。



2.Laravelのインストール

いよいよ最終ステップです!
Laravelのインストールはコマンドを用いて実行します。
まずは、左下のwindowsボタンの右側にある検索ボタンを押して検索欄を表示してください。
表示することができたら、検索欄でcmdと入力し、コマンドを表示させてください。
管理者として実行ボタンを押してコマンドプロンプトを起動させてください。


起動ができたら、以下のコマンドを入力してLaravelのインストールを実行します。
composer global require laravel/installer


インストールが完了したら、以下のコマンドを入力してLaravelフォルダへ移動します。
cd C:\xampp\htdocs


コマンドの入力欄の左側がC:\xampp\htdocsとなっていれば移動できています。


続いて、laravelのプロジェクト作成を実行します。
以下のコマンドのフォルダ名の部分は好きな名前で作成してください。
laravel new フォルダ名
例)laravel new practice_ver.01


上記ではpractice_ver.01という名前で新しいプロジェクトを作成しています。
実行結果の最後の行でApplication ready Build something amazing.と表示されればプロジェクトの作成は完了です。


それでは、Laravelがしっかりとインストールされているのか、Apacheを起動させて確認してみましょう!
まずは先ほど同様にXAMPPのApacheの起動ボタンを押してください。

Apacheが起動できたらWebブラウザを起動して、以下のURLを検索欄に入力してみてください。
localhost/作成したプロジェクト名/public/
例)localhost/practice_ver.01/public/


以下の画面が表示されていればすべての設定とLaravelのインストールは完了です。
お疲れさまでした!
と言いたいところですが、まだ開発環境が整っていないので、最後にVSCodeVisual Studio Code)を用いたWebアプリの開発環境構築方法についても説明していきたいと思います。


3.VSCodeのインストール

VSCodeは普段私が使用しているMicrosoftが提供する開発ツールです。
豊富にあるプラグインを導入することによって、Webアプリの開発速度を何十倍にもすることができる非常に強力なツールです。

では、VSCodeのインストールと設定方法について紹介していきたいと思います。

まずは、以下のURLにアクセスしてVSCodeをダウンロードしてください。
VSCodeのダウンロード

ダウンロードしたらexeを実行してライセンスに同意してください。


インストール先も聞かれますが、すでにVSCodeが入っていなければそのまま進んでください。


スタートメニューフォルダの指定もそのまま進みましょう。 

追加タスクの選択では、デスクトップ上にアイコンを作成する場合はデスクトップ上にアイコンを作成するにチェックを入れてください。
他はそのまま変更せずに進めましょう。


次に進んだらそのままインストールを実行してください。
インストールが完了したら起動して初期設定に進みましょう。


まずは、開発環境のテーマカラーを設定します。
これは好みに合わせて設定してください。


続いてインストールするプログラミング言語を聞かれますが、とりあえず検索欄を使用して何も考えず以下の13項目をインストールしてください。

Bracket Pair Colorizer
DotENV
Laravel 5 Snippets
Laravel Artisan
Laravel Blade Snippets
Laravel Blade Spacer
Laravel Extra Intellisense
Laravel goto view
Laravel Snippets
laravel-goto-controller
PHP Debug
PHP DocBlocker
PHP Intelephense

上記のプラグインの詳細について知りたい方は、プラグインのインストール時に説明が表示されますので、そこで確認してください。


全てインストールし終えたらOpen your project folderまで進み、先ほど作成したプロジェクトを開きましょう。
プロジェクトフォルダは以下の場所にあります。
C:\xampp\htdocs

その中に作成したプロジェクト名のフォルダがあるので、それを指定して開いてください。
例)C:\xampp\htdocs\practice_ver.01

プロジェクトファイルを開くことができていれば無事インストールと設定は完了です。
ここまでお疲れさまでした!
次回はLaravelを用いたWebアプリの開発編ですかね。
お楽しみに!

参考書籍


  


本サイトはこちらの書籍を基にフレームワークであるLaravelを使用して作成しています。
フレームワークを用いたWebアプリケーションの開発方法を詳しく知りたいという方はぜひ参考にしてみて下さい。