![<meta charset="utf-8">tetsu](https://bokihajimeru.com/wp-content/uploads/2023/06/cropped-S__4169798-150x150.jpg)
こんにちは、ブログ管理人のtetsuです。
プログミング初心者ですが、情報共有や学習記録として記事を書いてみます。お手柔らかにお願いします。
今回はLaraveの基礎学習後に、チュートリアルサイトでWebアプリ開発を体験したときの記録です。
はじめに
Lravelの基礎学習が終わった後に実際に使ってみようとしたら「あれ?最初は何したらいいんだっけ?」となる方も少なくないと思います。
今回は一例としてLravelの開発環境構築の手順をまとめました。
使用したツールやバージョンは以下の通りです。
macOS
PHP 7.3.11
Laravel Framework 8.18.1
Visual Studio Code
MAMP
プロジェクトの作成
ターミナルを開いてDesktopへ移動。
% cd Desktop
プロジェクトの作成します。書籍で勉強したときは次のコマンドで作成できたのですが、今回は「zsh: command not found: laravel」というエラーが出ました。
Desktop % laravel new laraveltodolist
なお「laraveltodolist」が今回のプロジェクト名です。
ちなみに、Laravelコマンドが動いてくれないような場合はComposerを使ってLaravelプロジェクトを作成することもできるため、今回は次のコマンドでプロジェクトを作成してみました。
Desktop % composer create-project laravel/laravel laraveltodolist --prefer-dist
デスクトップにプロジェクトが作成されます。
![](https://bokihajimeru.com/wp-content/uploads/2020/12/f81c6917161996159a379d6823deb9b5.png)
プロジェクトを実行できるか動作確認のため、ターミナルでlaraveltodolilstへ移動します。
Desktop % cd laraveltodolist
プロジェクト内に移動したらLaravelに内臓されているWebサーバー機能を実行します。
laraveltodolist % php artisan serve
Webブラウザで「http://localhost:8000/」にアクセスします。
![](https://bokihajimeru.com/wp-content/uploads/2020/12/33c8ffe9adb7a51eb094c91ef3be7b4d-1024x575.png)
このようにLaravelアプリケーションのトップページが表示されたので大丈夫そうです。
MAMPにデプロイする
MAMPとはローカルサーバ環境一式をインストールできるものですが、MAMPの導入についてはこちらの記事をご確認ください。
まず、laraveltodolistを「アプリケーション\MAMP\htdocs\」に移動させます。
![](https://bokihajimeru.com/wp-content/uploads/2020/12/3f91c5c74db3560e8e6768d4c757963d-1024x266.png)
MAMPの設定画面でServerのDocument rootを次のように変更します。
![](https://bokihajimeru.com/wp-content/uploads/2020/12/4f9baa1c42b589f002a24c97e80bac19-1024x835.png)
動作確認のためWebブラウザで「http://localhost」にアクセスし、Laravelアプリケーションのトップページが表示されるか再度確認しておきましょう。
GitとGitHubの設定
GitとGitHubの基本操作についてはこちらの記事をご確認ください。
まずローカルリポジトリを作成するために、VSCodeでlaraveltodolistを開き、ターミナルで次のコマンドを実行します。
laraveltodolist %git init
次のコマンドで隠しフォルダである.gitが作成されたかを確認できます。
laraveltodolist % ls -a
ローカルリポジトリが作成できたら、git statusを確認してみます。
laraveltodolist % git status
![](https://bokihajimeru.com/wp-content/uploads/2020/12/ca7300a5d6b5ad45876690d99aceba5e-1024x920.png)
最後にgit addするように書いてあるので、git add .をします。
laraveltodolist % git add .
もう一度、git statusを確認してみます。
laraveltodolist % git status
![](https://bokihajimeru.com/wp-content/uploads/2020/12/0037f1cd8aa15ce3d3ba9890af3767f9-1024x964.png)
git add後のgit statusは各フォルダのファイルごとに表示されるようです。次にgit commitをします。
laraveltodolist % git commit -m "firstcommit"
もう一度、git statusを確認してみます。
laraveltodolist % git status
![](https://bokihajimeru.com/wp-content/uploads/2020/12/c2e3973bdb7a6e450a828966ab84fad3.png)
これで大丈夫そうです。
次にWebブラウザでGitHubを開き、右上の「+」から「New repository」をクリック。
![](https://bokihajimeru.com/wp-content/uploads/2020/12/a0329e7b9882ecbe3142b5b6b0251b12.png)
「Repository name」に今回は「laraveltodolist」と入力し、画面下にある緑色のボタン「Create repository」をクリック。
![](https://bokihajimeru.com/wp-content/uploads/2020/12/f9e89d864e94b7c14c30e6eccbb470e3.png)
画面が切り替わったら「…or push an existing repository from the command line」にある3行のコマンドを順番にターミナルで実行します。
![](https://bokihajimeru.com/wp-content/uploads/2020/12/12f1ab0d3c01dbeecb37580a0d96c7ca-1.png)
コマンドを実行した後にWebブラウザを再読み込みすると「laraveltodolist」というリモートリポジトリが作成されていることが確認できます。
データベース設定
書籍で勉強したsqliteがお手軽でしたが、今回はmysqlを使用しました。
まず、データベースを作成するため「http://localhost/MAMP/」にアクセスし、Tools▼のphpMyAdminをクリック。
![](https://bokihajimeru.com/wp-content/uploads/2020/12/8bd5377f2c61030a7bdebb5ae5654a5f.png)
phpMyAdminが開きますので、お好みで中央のLanguageを日本語にし、左側の新規作成をクリック。
![](https://bokihajimeru.com/wp-content/uploads/2020/12/d877bf6851c1d0dea041b20eb11fe1a0-1024x284.png)
今回はデータベース名を「todo」とし、「utf8mb4_unicode_ci」を選択したら「作成」をクリック。
![](https://bokihajimeru.com/wp-content/uploads/2020/12/4a7b3c63dd3806a0fab3268ca89f4ad6-1024x360.png)
一旦、次のように「todo」というデータベースが出来たらOKです。
![](https://bokihajimeru.com/wp-content/uploads/2020/12/434ca4bc9b0303475a104da1160ee8c0-1024x246.png)
次に、データベースの設定のためVScodeで「.env」ファイルを開きます。
![](https://bokihajimeru.com/wp-content/uploads/2020/12/9eef83c51476862ab9fed09dcf52e30d.png)
MAMPに合わせて設定をしますが、MAMPの設定は「http://localhost/MAMP/」にアクセスすると書いてあります。
![](https://bokihajimeru.com/wp-content/uploads/2020/12/55cb7f91c038bab593cc05b6142f3e5b-1024x690.png)
今回は次のように変更しました。
![](https://bokihajimeru.com/wp-content/uploads/2020/12/e805b5fd95896b523d1d3205338cf0a9-1024x285.png)
変更点は、DB_DATABASEを先程作成したデータベース名todoに変更。DB_PASSWORD=rootに変更。DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sockを追加しました。
なお、.envファイルはGitなどのバージョン管理システムでファイルをコミットして公開してはいけないのですが、今回の変更をした後に「git status」で確認してみたところ、何も表示されなかったのでデフォルトでGitの管理から外れているようでした。
あと、ついでにconfig/app.phpを開いて、次のように日本時間へ設定変更もしておきましょう。
'timezone' => 'Asia/Tokyo',
その他メモ書き(CSS)
index.blade.htmlにCSSのlinkタグを記載する際は次のようにする。
<link rel="stylesheet" href="/css/styles.css">
styles.cssはpublicフォルダの中のcssフォルダの中に作成する。resourcesフォルダの中にもcssフォルダがあるので間違えないように気を付けること。
Laravel8でbootstrapを使用する場合は次の3つのコマンドを順番に実行する。
composer require laravel/ui
php artisan ui bootstrap
npm install && npm run dev
おわりに
あとは実際にWebアプリケーションを作ってみましょう。
まずはチュートリアル通りに何か作ってみるのがオススメです。
「laravel チュートリアル」で検索すると色々あります。
ちなみに、laravel の基礎学習でオススメな教材はこちらです。私はこの書籍で基礎学習をしましたが、無事いくつかのチュートリアルを完成する力はつきました。
今回は以上です。
コメント