タグ: フレームワーク

今日はLaravelでアプリケーションを開発するときの大まかな流れを備忘録として説明したいと思います。

アプリケーションの立ち上げ

まずはLaravelでアプリケーションを立ち上げます。次のいずれかのコマンドを入力して、アプリケーションを作成します。ちなみにアプリケーションの名前をlaravel-appとしています。ここは皆さんの任意の名前をつけてください。

$ composer create-project 'laravel/laravel=8.5.19' --prefer-dist laravel-app
$ laravel new laravel-app

このどちらかのコマンドを実行するとlaravel-appというアプリのデフォルトが作成されます。

DBを用意する

今度はアプリケーションで用いるDBを用意します。これにはLaravelの特徴的な要素でもあるMigrationファイルを用いて用意します。

Databese自体の用意

その前に、LaravelではDBの中身をいろいろと操作できますが、唯一Laravelからだとできない操作が「Database自体の作成」です。まずはDBの作成を直接しましょう。ターミナルからMySQLに接続したら、以下のコマンドでDatabaseを作りましょう。ちなみに、Databaseの名前はlaravelにしました。

mysql> CREATE DATABASE laravel

これを実行すると”Query OK, 1 row affected (0.00 sec)”と返ってきて、Databaseを作成することができます。

tableの用意

次にそのDatabaseにtableを用意します。ここからのDB周りの操作はすべてLaravel上で作業できますので、次のようにファイルを書いてください。

そもそもですがMVCモデルをとっているLaravelにおいて、DBとやりとりをするのはModelなのでまずはModelらへんを見ていくことにしましょう。まずターミナルで次のコマンドを実行してください。仮のtable名はmemoです。

$ php artisan make:model Memo -m

上記のコマンドを実行することで「app > Models」にMemo.phpというModelファイルが生成されます。加えて上記のコマンドに”- m”というオプションを付けることで、migrationファイルを一緒に生成してくれます。このmigrationファイルは「database > migrations」にファイルを生成した日時と先ほど命名したModel名の複数形と、、、などが命名されたmigrationファイルが生成されます。今回、作成したファイルでいうと「2021_08_06_174912_create_memos_table.php」というファイルが生成されました。

migrationファイルの編集

それぞれのmigrationファイルを編集して、対応するそれそれのtableの仕様を書いていきます。

migrationファイルを編集し終わったら、ターミナルで以下のコマンドを実行します。

$ php artisan migration

このコマンドによってMySQLに先程書いた仕様が反映されたtableが生成されます。MySQLで以下のコマンドを実行すると、実際にtableが作成されたのが確認できます。

mysql> show tables from laravel

ログイン機能を実装する

今度はcomposerを用いて、手軽にログイン機能を実装しましょう。まずは以下のコマンドを入力してください。

$ composer require laravel/ui
$ php artisan ui bootstrap --auth
$ npm install && npm run dev

これらのコマンドを実行すると、認証周りの機能とBootstrapのデザインを用いて実装することができます。実際にLaravelを”php artisan serve”で起動して、サイトを見てみると、サイトの右上に「Login（ログイン）」と「Regester（登録）」のボタンが増えているのが確認できます。

このRegesterボタンをクリックして、遷移したページで情報を入力すると、実際にユーザー登録もできますし、登録したユーザーの情報もDatabaseのUsersテーブルで確認することができます。

Laravelのテンプレートファイル

• @extends
• @yield
• @section

上記の3つを用いて、サイトのviewをテンプレート化する！

軽く触れておくと、テンプレートファイル化しておくていちいち同じ構造を書き直さなくてもいいから、汎用性が高くなるよ！これくらいの説明でも伝わるよね？！

@extends

• 子要素に用いる
• @extends(‘layouts.auth’)と書くと、そのファイルは親要素であるlayouts > auth.blade.phpに当て込まれる

@yield

• 親要素
• @yield(‘content’)と書くと、子要素の@section(‘content’) ~ @endsection部分を親要素に出力できる

@section

• 子要素
• @section(‘content’) ~ @endsectionと書くと、@extends(‘layouts.register’)で指定したファイル（今回だとlayouts > register.blade.php）の@yield(‘content’)部分に出力したコードを表示できる

Form周りの作り方

LaravelでForm周りの作り方を説明する。

Formを作るときの注意点

Webアプリケーションを作るときに、 Formを作ることは頻繁に登場する。このときにformの開始タグの直後に次のコードを挿入しておいてほしい。

<form action="/" method="POST">
    @csrf
    <input type="text">
    <button type="submit">送信する</button>
</form>

この「csrf」はCross-site Request Forgeryの略で、認証済みユーザーに代わって不正なコマンドを実行する、悪意のある攻撃の一種である。「@csrf」をinput開始タグの直後に挿入することで、LaravelはCSRFトークンを生成して、このCross-site Request Forgeryを防止することができる。詳しいことは別記事に記載するが、Laravelではこのコマンドを入力することでこのCross-site Request Forgeryを防止することができる。

dd関数について

dd関数とは、引数に変数（もちろん文字列でも数値でもいいが、目的には適していない）を入力すると、ブラウザでその引数の中身を参照できる。要はデバック用の関数で、開発の際はこのdd()に変数を入れるとよい。またdd()はそこで処理が止まるので、それ以降のコードは読まれない。

また似たような関数にdump関数があるが、これはdd()とは異なりdump()以降のコードも読まれる。

今回は僕がLaravelでアプリケーションを作成しているときに遭遇したTailwindcssをインストールできなかったお話とそれを解決した方法をご紹介したいと思います。

問題が生じた背景

僕はYoutubeの教材でLaravelを用いたアプリケーションの開発の勉強をしていました。その教材ではcssのデザインにTailwindcssという、cssのフレームワークを使うそうでした。教材の冒頭でLaravelをインストールし終わったあとに、このTailwindcssもインストールするように案内されます。そのときの教材に書いてあるコードは以下です。

npm install tailwindcss

これをターミナルに入力して実行しました。すると次のようなエラーが返ってきました。

npm ERR! code ENOTDIR
npm ERR! syscall open
npm ERR! path /Users/tomoyasusunagawa/node_modules/color-name/npm-shrinkwrap.json
npm ERR! errno -20
npm ERR! ENOTDIR: not a directory, open '/Users/tomoyasusunagawa/node_modules/color-name/npm-shrinkwrap.json'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tomoyasusunagawa/.npm/_logs/2021-08-09T08_50_35_395Z-debug.log

最初はビックリしましたが、よく読むと真ん中ら辺に「npm-shrinkwrap.jsonはディレクトリではありません」みたいなことを言われています。

解決した方法

（そんなこと、僕に言われても）という気も一瞬しましたが、すかさずGoogle先生に聞いたところ、次のように実行すると期待通りにTailwindcssをインストールできると書いてありました。

$ cd [PATH_TO_DIR]
$ npm init -y
$ npm install tailwindcss postcss-cli autoprefixer

作業ディレクトリに移動して、npmパッケージを使う準備をして、tailwindcssのインストールをする、的な意味のコマンドらしいです。

無事にさきほどのエラー文も返って来なくなったので、正常にインストールできたことが確認できました。

タイトルの通りです。この夏にWeb開発を勉強しようと思って、ReactやVue.js、Ruby on Railsなどで迷ったのですが、Webサイト制作上がりでPHPは理解しているのでなるべく勉強の負担を減らそうと考えて「Laravel」をフレームワークに選びました。

以前にFuel PHPを使っていたのですが、Webサイト制作でとっくに忘れました。

Laravelでアプリを始める

自分のパソコンにLaravelをインストールできたら、アプリケーションを作成したいディレクトリまで移動します。そこで次のコマンドを入力してください。以下の「〇〇」にはディレクトリの名前というか、アプリケーションの名前を入力してください。

$ laravel new 〇〇

これを入力するとLaravelの初期の状態のアプリケーションが作成されます。

「laravelコマンドがない」と言われたとき

プログラミングにはエラーがつきものです。上記のコマンドを入力して以下のように返されることがあります。

zsh: command not found: laravel

このように言われたときは以下のコマンドを実行して、パスを通しましょう👍

$ export PATH="$PATH:$HOME/.composer/vendor/bin"

これは ~/.composer/vendor/bin のパスを通すコマンドで、これを実行するとlaravelコマンドが使えるようになるそうな。

以上、よいプログラミングライフを！