Laravelの無料チュートリアル①アプリの初期設定
2214 回閲覧されました
みなさんこんにちは、jonioです。
私はProgateでPHPの勉強をしてLaravelの勉強をしようと思ったのですがネットの情報で初心者向けと書いてあるのに私的に難しすぎる内容なのとネットでは本当に初心者に適している情報はある方以外の情報以外は存在しませんでした。
初心者に適している情報を載せていたある方の情報は内容的にはいいですが説明が相当足りなくてかなり調べないといけなくて大変でした。
これからLaravelを身につけたいと思っている方で私と同じ様に苦労している方が多くいると思います。
内容的に本当に初心者向けで丁寧な説明を書く人がいないなら自分が書けばいいと思ったので本当に初心者に向けたチュートリアルを作成したので公開します。
私の書いた記事で勉強して仕事に繋がれば幸いです。
この記事を最後まで読めば分かりますが完全に無料になっていますので安心して使って下さい。
目次
使っているパソコン
今回の記事はMacを使う人に向けていますのでWindowsを使う方はキーボードが若干違うと思います。
また、Macのターミナルに当たるのがWindowsではコマンドプロンプトですがMacとは何らかの違いがあるかもしれません。
対象となる人
ProgateでHTML・CSS・PHPを勉強した人（jQueryやJavaScriptは勉強してもしてなくてもどっちでもいいです）ですがそれをやらずに何を勉強すればいいか分からない状態の人の場合は何を勉強すればいいかについて記事にしているのでそれを見て下さい。
今回はCSSを使わなくていいように全てBootStrapを使いますがHTMLとPHPが全く分かっていない状態でLaravelをやってもHTMLかPHPで挫折する事になるのでどんなに短くても1ヶ月はProgateで勉強した状態にして下さい。
今回作るアプリ
アカウントを登録してログインしてつぶやきを投稿してそれを見る事ができるアプリです。
↓でつぶやきを作成します。
作成したつぶやきをつぶやき一覧のページで表示します。
編集ボタンを押すとつぶやきの内容の編集ができて（↓の赤枠）削除ボタンを押すとつぶやきの削除ができます。（↓の青枠）
ポートフォリオへの掲載
掲載可としますが練習用で作ったみたいな記載をして下さい。
ちなみに仕事で作ったみたいに書いても応募する会社には嘘だと分かるので練習したと記載しましょう。
Laravelのバージョン
8系を使います。
理由は7系以前はルーティング（後で説明します）の書き方が違うので初心者が7系で勉強して8系以降の情報を使うと混乱すると思ったからです。
開発環境とLaravelのインストール
世間ではDockerを使う人が多くてTwitterを見てもDockerを使うという超初心者がいますがデータベースに接続する所でつまづいて挫折する可能性が高いです。
もしどうしてもDockerでやりたいなら↓で環境構築をして下さい。
ですがMAMPを使えば簡単に環境が作れるのでおすすめでこれでやればつまづく事はまずないと思います。
私は絶対に↓をすすめます。
コントローラーの設定
色々説明すると複雑になって挫折するかもしれないので最低限必要だと思う内容だけ解説します。
ルーティングというのがあるのですが（内容は後で説明します）ルーティングのコードの書き方が楽になる為の設定です。
「Laravelのプロジェクト名 > app > Providers > RouteServiceProvider.php」を開きます。
29行目辺りがコメントアウトになっているはずですがコメントアウトを外して下さい。
「これをすればコントローラーというものの書き方が楽になるんだ〜」 位の感覚でいいです。
ログイン認証機能
Laravelにデフォルトで入っているのですがログイン機能で↓の赤枠です。
Login（ログイン）をクリックすると↓のページになります。
Register（アカウント登録）をクリックすると↓のページになります。
ターミナルで「composer require laravel/ui」のコマンドを叩きます。
もうすぐLaravelのバージョン10が発表されるみたいですがこの記事を書いているのが2023年2月で↓のエラーが出る様になりました。
もし同じ現象になったら「composer require laravel/ui」ではなく「composer require laravel/ui:3.*」 のコマンドにして下さい。
これで上手くいくはずです。
話を戻してインストールが終わったら次は↓のコマンドを叩きます。
次は↓のコマンドを叩きます。
次は↓のコマンドを叩きます。
このコマンド（npm run dev）をするといつも初回だけ↓のエラーが出ます。
もう一度「npm run dev」を叩いて下さい。
そうすればエラーは出ません。
BootStrapの導入
↓ですが見た目（レイアウト）が綺麗になっていますよね。
これはBootStrapというcssを自動的に付ける事ができる物を使っています。
今回使ったBootStrapに関しては「そんなもんなんだ」と思って下さい。
CSS系なので説明すると今回のアプリ作成の話がそれるので説明を省きます。（私は普段はBootStrapを使わずsassを使います）
BootStrapを導入するためにこのページに入ります。
そして↓の赤枠をクリックするとBootStrapを導入するのに必要な物がダウンロードできます。
ダウンロードした圧縮ファイルを解凍します。
圧縮したフォルダの中にcssフォルダがあってその中に「bootstrap.min.css」があるので「Laravelのプロジェクト > public > css」の下に置きます。
圧縮したフォルダの中にjsフォルダがあってその中に「bootstrap.min.js」があるので「Laravelのプロジェクト > public > js」の下に置きます。
そして「Laravelのプロジェクト > resources > views > layouts > app.blade.php」に記述を追加します。
24行目〜27行目を追加しています。
これで「http://localhost:8888/」 にアクセスすると↓の見た目になります。
今回はここまでですが慣れるまではやる事が多くて大変ですが慣れなので何度も繰り返すしかありません。
次回からアプリを作っていきますが2回目の解説はページを表示するまでの流れとコードの書き方の解説です。
