- 投稿日：2021-05-04T21:46:44+09:00
Laravelでstylusを使う方法
LarvelでStylusを使う方法 LaravelでStylusを使う方法を紹介します。 最近では、フロントエンドはフロントのフレームワーク バックエンドではLaravelを使うケースが増えてきているので あまり使う機会がないかもしれませんが、自分が忘れないためにも記載しておきます。 環境 npm 6.14.7 PHP 7.3.24 Laravel Framework 8.40.0 使い方 webpack まずは、webpack.mix.jsに下記を追記します。 mix.js('resources/js/app.js', 'public/js') .stylus('resources/stylus/app.styl', 'public/css'); // この行追記 第１引数はデバックを行うファイルのパスを記載 laravelではresourceshtmlやcssを記載してくことが多いです。 'resources/stylus/app.styl' 第２引数にはコンパイル後のファイルの保存先を指定します。 laravelでは、public配下がホームディレクトリとなるので、吐き出し先はpublicのままで問題ないかと思います。 'public/css' // コンパイル後の書き出し先のディレクトリ npmのインストール ※npmがインストールされいない場合はnpmのインストールを事前に行ってください。 npm i // npmのインストール npmのインストールを行います。 npmのインストールが終わるとpackage.jsonが作成されます。 npm run dev 上記を実行すると、コンパイルされます。 今回は、/public/css/app.cssのファイルが作成されていればOKです。 watchを使って自動コンパイル 上記でnpmを実行したあと、下記コマンドを実行します。 npm run watch 該当のstylusファイルに変更があったとき、自動でコンパイルされるようになります。 便利なのでセットで覚えておくと効率的に作業ができると思います。
- 投稿日：2021-05-04T17:30:24+09:00
Laravelのbladeで現在のURLによって条件分岐させる方法
LaravelでWebアプリを作っていると、テンプレートファイル（bladeファイル）内でURLによって条件を分岐させたいという場合があると思います。 例えばNavはすべて同じものを使いたいがURLによって表示させる項目を変えたい場合など。 方法は二つあるのでメモ用に書いておきます。 ①Request::is() 一つ目は「Request::is()」を使う方法。 ()の中にドメイン後のURLを記述するだけ。 @if(Request::is('users')) <p>hogehoge</p> @endif このようにすれば「https:://ドメイン名/uesrs」にアクセスした時にif文内の処理が表示される。 ②Request::routeIs() こちらは()の中にルーティング名を記述するだけ。 @if(Request::routeIs('users.show')) <p>hogehoge</p> @endif web.phpでルートに名前を付けておけば使用できます。 Route::get('users', 'UsersItemController@index')->name('users.show'); 参考記事
- 投稿日：2021-05-04T16:54:55+09:00
Laravel + React(TypeScript)の開発環境を構築する方法 ～DB接続まで～
はじめに この記事では、LaravelとReact(TypeScript)の開発環境構築と、DB接続までできるようになります。 React(TypeScript)環境構築の部分については、下記の動画で紹介されている手順とほぼ同じですが、メモも兼ねてまとめさせていただきました。 LaravelにReact.jsとTypeScriptをインストール：React.js + LaravelでSPA開発講座#08 開発環境 Windows10 XAMPP php version 7.4.18 laravel version 8.40.0 事前準備 以下の項目のインストールが済んでいない場合、下記のサイトを参考にインストールを完了してください。 「php」のインストール 「node.js」のインストール 「composer」と「XAMPP」のインストール 環境構築 Laravelのインストール 任意のフォルダを作成＆フォルダの階層まで移動し、VScodeのターミナルで以下のコマンドを実行 $ composer create-project laravel/laravel example-app "8.*" 作成されたプロジェクトの階層に移動、インストールされたlaravelのバージョンを確認 $ cd example-app $ php artisan -V Laravel Framework 8.40.0 と表示されていればOKです。 ReactとTypeScript のセットアップ LaravelのプロジェクトでReact(TypeScript)を扱えるようにします。 TypeScriptとSCSSでビルドするように、webpack.mix.jsを以下の様に書き換え ※webpack.mix.jsはexample-appディレクトリ直下に配置されています webpack.mix.js const mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel applications. By default, we are compiling the CSS | file for the application as well as bundling up all the JS files. | */ mix.ts('resources/ts/index.tsx', 'public/js') .sass('resources/sass/app.scss', 'public/css'); ターミナルでnpm install実行 $ npm install ビルドを実行 $ npm run prod Reactのインストール $ npm i -D react react-dom @types/react @types/react-dom 再度npm install $ npm install tsconfig.jsonファイル を作成 ※example-appディレクトリ直下に作成される $ ./node_modules/.bin/tsc --init tsconfig.jsonファイルの内容を下記に書き換え tsconfig.json { "compilerOptions": { "target": "es5", "module": "commonjs", "jsx": "react", "strict": true, "esModuleInterop": true } } reourcesディレクトリ直下にtsディレクトリを新しく作成、作成したtsディレクトリ直下にindex.tsxファイルを作成 index.tsxに下記の内容を記載 index.tsx import React from 'react' import ReactDOM from 'react-dom' const App = () => { return ( <h1>Laravel SPA</h1> ) } ReactDOM.render( <App />, document.getElementById('app') ) resourcesディレクトリ直下のcssディレクトリとapp.cssフォルダの名前と拡張子を変更 変更前 変更後 再度ビルドを実行 $ npm run prod viewディレクトリ直下のwelcome.blade.phpの内容を下記の様に変更 welcome.blade.php <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <link rel="stylesheet" href="/css/app.css"> </head> <body> <div id="app"></div> </body> <script src="/js/index.js"></script> </html> VScodeの「Split Terminal」で2つのターミナルを起動し、それぞれ下記のコマンドを実行する $ php artisan serve $ npm run watch ブラウザが起動し、下記の画面が表示されたらOK DB接続 データベース作成 「XAMPP」を起動し、ApatcheとMySQLの「Start」を押下 MySQLの「Admin」を押下する。ブラウザが起動しAdmin画面が表示されたら、「データベース」タブを押下 任意のデータベース名を入力し、「作成」ボタンを押下 ※ここではexample_appと入力 データベースが作成され、テーブルが無い趣旨のメッセージが表示される envファイル変更＆マイグレーション example-appディレクトリ直下にある、.envファイルの「DB_DATABSE=laravel」を接続したいデータベース名に変更 ※ここではexample_appと入力 ターミナルで下記のコマンドを実行 $ php artisan migrate adminを再度確認し、下記の様にテーブルが作成できていればOK 以上が環境構築からDB接続までの流れになります。次はこの環境でaxiosを利用したCRUD処理の記事を書ければなと思います。 参考文献 LaravelにReact.jsとTypeScriptをインストール：React.js + LaravelでSPA開発講座#08 【Windows編】今すぐ簡単にできる！PHPのダウンロード方法 Node.jsの開発環境を用意しよう！（Windows） Windows Laravelの環境構築の手順書
- 投稿日：2021-05-04T14:02:01+09:00
Laravelの多対多で中間テーブルのレコードを論理削除する
Laravelの多対多のリレーションで、中間テーブルに論理削除を実装する。 テーブル準備 マイグレーションファイル作成 php artisan make:migration create_article_tag_table deleted_atカラムを追加する <?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateArticleTagTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('article_tag', function (Blueprint $table) { $table->integer('article_id'); $table->integer('tag_id'); $table->timestamp('deleted_at')->nullable(); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('article_tag'); } } 中間テーブルの更新 updateExistingPivotを使用して中間テーブルを更新。 use Carbon\Carbon; public function delete(Request $request, Article $article) { $ids = $article->tags->pluck('id'); $article->tags()->updateExistingPivot($ids, ['deleted_at' => Carbon::now()]); return redirect('/articles'); } 論理削除以外のレコードを取得 whereNullメソッドでdeleted_atを使用すると、論理削除以外のレコードが取得できます。 use App\Models\Tag; class Article extends Model { public function tags() { return $this ->belongsToMany(Tag::class) ->whereNull('deleted_at') ->withTimestamps(); } } 中間テーブルで論理削除するべきか 中間テーブルで論理削除をするのなら、そもそもテーブル設計を見直す必要がありそうです。 注意： ピボットモデルでは、SoftDeletesトレイトを使わないほうが良いでしょう。ピボットレコードのソフト削除が必要な場合は、ピボットモデルを実際のEloquentモデルに変換することを考えてください。 「とりあえず削除フラグ」はSQLアンチパターンです。 参考 https://www.it-swarm-ja.com/ja/laravel/%E5%A4%9A%E5%AF%BE%E5%A4%9A%E3%81%AE%E9%96%A2%E4%BF%82%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E4%B8%AD%E9%96%93%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%AE%E3%82%BD%E3%83%95%E3%83%88%E5%89%8A%E9%99%A4/1072983220/
- 投稿日：2021-05-04T12:14:26+09:00
インフラエンジニアのlaravel学習(サーバ設定)
はじめに 本記事は以下の記事の分割記事のパート２となります。 前回の投稿から約２週間強サボってました(汗)前回の記事はこちら 参考文献 以下の記事をかなり参考(かなりパクってます、著者様すみませんm(_ _)m) https://qiita.com/h19e/items/02d1301d4fdd8dfa88ac 前提条件 本記事を見る上で以下を考慮してください。 執筆者はあくまでインフラエンジニアとしての経験を元に 本記事を記載しているので、自分がわかってしまう部分は意識せず割愛してしまうこともあります。 逆にプログラマ目線でみたら意味不明なコードを書いたりすするかもしれまsんので、ご容赦ください。 また、あくまで学習の備忘録なので間違っていることも多々ありますので、参考にされる方は注意してください。 自分が試験的に使えるAWSアカウントを所持していること 自分の場合は会社がエンジニア検証用に用意してくれたアカウントがあるので、それを使用 なるべく費用は抑えて(無料の範囲)作る予定ですが、個人持ちではないのであまり金銭的なことに気をかけてないです IAMはAdministator権限想定 実装者はインフラエンジニア目線 Linuxの知識はそこそこある PHP初学者(というよりもプログラム初学者笑) Terraformはある程度わかる人 CI/CDツールもほぼ初学者レベル目線 記事分割 多分上で記載した構想を１つの記事にはまとまらないと思うので、以下の単位で記事を分割すると思います。 (★マークが今回の記事) AWSリソース作成 サーバ設定★ コード作成 手動でデプロイ CI/CDツール導入して自動デプロイ 本パートの流れ サーバー基本設定 必要なパッケージのインストール PHPの設定 Laravelインストール Apache VirtualHost設定 1. サーバー設定 サーバーの基本設定を行います。 パッケージを最新に更新 $ sudo yum update -y ec2-userのままでも良いですが、実際に利用するユーザーを作成 本記事では laravel として進めます。 ※ここは好きな名前にしてください $ sudo su - # useradd laravel # passwd laravel # usermod -G wheel laravel laravel に sudo権限を付与します。 # visudo root以下に追加 visudo ## Allow root to run any commands anywhere root ALL=(ALL) ALL laravel ALL=(ALL) ALL laravelのホームディレクトリ(/home/laravel) 以下の .ssh/authorized_keys に公開鍵をセット。 すでにご自身の公開鍵はお持ちかと思いますが、まだない方は作成してください。 SSHキー等で検索すれば、いくつか情報が出てくるかと思います。 一応、権限を記載しておきます。 権限 パス 700 ~/.ssh 600 ~/.ssh/authorized_keys これで、laravelユーザーでログインする準備は完了です。 一度ログアウトして、実際に新しいユーザーでログインしてみましょう。 ssh laravel@ec2-**-**-**-***.ap-northeast-1.compute.amazonaws.com -i ./.ssh/(laravelの秘密キー) ローカライズ設定を行います。 タイムゾーンを日本時間にセット /etc/sysconfig/clock $sudo vim /etc/sysconfig/clock ZONE="Asia/Tokyo" UTC=false 反映には再起動が必要なので、とりあえず日本時間にセット $ sudo cp /usr/share/zoneinfo/Japan /etc/localtime 日本語設定 /etc/sysconfig/i18n $ sudo vim /etc/sysconfig/i18n LANG=ja_JP.UTF-8 ここまでで、ざっとEC2の初期設定が完了です。 2. 必要なパッケージのインストール ここからは、AmazonLinux2でLaravelを構築するために必要なパッケージをインストールしていきます。 なるべく特殊なことはせず、ある程度AWSで用意された標準的なもので構築したいと思います。 WEBサーバーとして、apache2.4 、PHPのバージョンは、PHP7.3 を使用します。 いきなりですが、AmazonLinux2で、yumを利用してPHPをインストールするとPHP5になってしまいます。 AmazonLinuxでは、yum install php72 でPHP7.2をインストールできたのですが、AmazonLinux2には用意されていません。 その代わりに、Extra Library が用意されているようです。 Extra Library は、amazon-linux-extras で利用可能です。 php7.3をインストールしてみます。 $ sudo amazon-linux-extras install php7.3 一緒に必要なパッケージもインストールされます php-cli.x86_64 7.3.6-1.amzn2.0.1 @amzn2extra-php7.3 php-common.x86_64 7.3.6-1.amzn2.0.1 @amzn2extra-php7.3 php-fpm.x86_64 7.3.6-1.amzn2.0.1 @amzn2extra-php7.3 php-json.x86_64 7.3.6-1.amzn2.0.1 @amzn2extra-php7.3 php-mysqlnd.x86_64 7.3.6-1.amzn2.0.1 @amzn2extra-php7.3 php-pdo.x86_64 7.3.6-1.amzn2.0.1 @amzn2extra-php7.3 確認してみましょう。 $ php -v amazon-linux-extras でパッケージをインストールすると、拡張モジュールに関しては、yumを使って適切なパッケージをインストールしてくれるようになります。便利ですね！ 実際にインストール可能な拡張モジュールを確認してみましょう。 $ sudo yum list php* | grep php7.3 必要な拡張モジュールをインストールしていきます。必要に応じて各自検討ください。 php-xmlは、Laravelインストール時に、phpunitのインストールに必要になるようなので、事前にインストールしておきましょう。 $sudo yum install php-mbstring php-pecl-memcached php-gd php-apcu php-xml 次に、apache2.4をインストールします。 AmazonLinuxの場合は、2.4系を入れる場合は、 httpd24 でしたが、AmazonLinux2の場合は、httpd で、2.4系になるようです。 $ sudo yum install httpd 起動します。 $ sudo systemctl start httpd コンソール上には何も出力されないので、実際に動いているか確認します。 下記のコマンドで、active (running) とか表示されているはずです。 $ sudo systemctl status httpd 実際にWEBブラウザから確認してみます。 今回起動したEC2にはパブリックIPが紐付けれていないので、作成したターゲットグループにEC2のプライベートIPを紐付け、ALBのドメイン名をURLとして確認すると、Apacche2.4のTestPageが表示されるかと思います。 ※ここ結構省略してます 3. PHPの設定 この時点で、Laravelのインストール自体は可能なのですが、PHP、Apacheの細かい設定もしていきましょう。 PHPの設定は、 /etc/php.ini で行います。 設定した値を確認できるように、phpinfoの表示ページを作成しておきましょう。 設定内容は、各自調整してください。 私がよく変更する箇所は、この辺です。 php.ini ; HTTPヘッダにPHPのバージョンを記載しない(一応セキュリティ的にOffにしておいたほうが良い) ; expose_php = On expose_php = Off ; メモリ上限を引き上げる(結構デフォルトのメモリは少なめなので増やしておくことが多い) ; memory_limit = 128M memory_limit = 256M ; POST送信の許容サイズを引き上げる ; post_max_size = 8M post_max_size = 16M ; アップロードファイルの許容サイズを引き上げる(スマホの写真のサイズが大きくなっているので、2Mだとほぼ画像投稿できないので増やす） ; upload_max_filesize = 2M upload_max_filesize = 16M ; timezoneの設定 ; date.timezone = date.timezone = Asia/Tokyo 設定を反映します。 モジュール版のPHPの場合、通常httpdを再起動すると、php.iniの内容が反映されるのですが、AmazonLinux2で、PHP7.3とhttpd2.4を構築した場合、デフォルトでSever APIが FPM/FastCGI となるため、httpdでは、php.iniの設定が反映されず、php-fpmの再起動が必要となります。 php-fpmについて詳しく知りたい方は、「php-fpm」等のキーワードでお調べください。 $ sudo systemctl restart php-fpm 4. Laravelインストール DocumentRootにLaravelを配置することも可能なのですが、開発環境として構築するので、今回はVirtualHostの機能を利用して、ホームディレクトリに、htmlディレクトリを作成して、その配下にLaravelプロジェクトを配置します。 ホームディレクトリの権限が700のままだと、アクセスした際にforbiddenになってしまうので、755に変更しておきます。 まずは、Composerをインストール 公式のインストール方法に記載されているコマンドを実行してcomposer本体を取得する。(Download Composer)(※$ php -r "if (hash_file・・・のコマンドは変更になる可能性があるので最新のコマンドは公式ページをご確認いただきたい。) php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" php composer-setup.php php -r "unlink('composer-setup.php');" 下記コマンドを実行してcomposerの実行ファイルを移動する。 sudo mv composer.phar /usr/local/bin/composer 下記コマンドを実行してパスを通す。 echo "export PATH=~/.config/composer/vendor/bin:$PATH" >> ~/.bash_profile source ~/.bash_profile 下記コマンドを実行してコマンドにパスが通ったことを確認する。 composer これで composer が利用できるようになったので、Laravelをインストールします。 $ sudo su - laravel $ cd ~/html/ $ composer create-project --prefer-dist laravel/laravel blog これで、blogというLaravelプロジェクトが構築されます。 あとは、Laravelのドキュメントに記載がある通りに設定をしていきます。 $ cd ~/html/blog $ composer update $ chmod -R 777 bootstrap/cache $ chmod -R 777 storage $ php artisan key:generate 基本的には、設定ファイルは、.envになりますが、開発環境専用にする場合は、下記のようにリネームします。 $ mv .env .env.development 5. Apache VirtualHost 設定 最後に、ApacheのVirtualHost設定を行います。 Virtual Hostの記述は、自動で設定が読み込まれる /etc/httpd/conf.d 配下にファイルを作成して記述します。 ファイル名は任意ですが、vhost.confで作成します。 $ sudo su - # cd /etc/httpd/conf.d # vim vhost.conf 一旦必要な記述を記載しますが、Virtual Hostの詳しい記述方法については、他で調べてみてください。 アクセス予定のドメインは、blog.laravel.net を仮定しています。適宜変更ください。 vhost.conf <VirtualHost *:80> DocumentRoot /home/laravel/html/blog/public ServerName blog.laravel.net ServerAlias blog.laravel.net <Directory "/home/laravel/html/blog/public"> #.htaccessを利用可能にする AllowOverride All # Laravelで利用する環境変数を development に設定 SetEnv APP_ENV development #アクセス許可 Require all granted </Directory> </VirtualHost> httpd再起動 $ sudo systemctl restart httpd Route53で、設定したドメインを紐付けるか、ご自身のマシンのhostsを設定して、ブラウザでアクセスしてみてください。 Laravelのトップページが表示されていれば、一旦完了です。 おわりに 本記事はここまでです。 今回は参考文献の方の記事をほぼ丸パクリで掲載しています。 一部不要と思うところや直しを行っていますが、私の環境では無事動いています。
- 投稿日：2021-05-04T08:59:59+09:00
[簡単]モダン構成なSPAで作るチュートリアル④(API取得してReactで一覧表示)
SPAで作るタスク管理アプリのチュートリアル - seederで作ったDBのデータをAPI取得してReactで一覧表示 今回は第④弾でReactで一覧テーブル作成する部分をやっていくで ①環境構築(Docker/Laravel/React.js/Material-UI) ②React側でルーティング設定 ③API取得してReactで一覧テーブル作成 ④API取得してReactで一覧表示 ⑤新規登録機能 ⑥編集・削除機能 今回の章から本格的にバックエンドとフロントエンドをAPI連携してデータ取得する部分を実装していくで。 APIの連携の部分だけをやりたい人もおるやろうからこの章のスタート地点としてのブランチを用意しといたから、この章から始める人はAPIっていうブランチがあるから、それを使ってな。 ③章までやってきた人はそのままのブランチで大丈夫やで！ データ表示のためのDB周りの準備(テーブルとテストデータ作成) postsテーブルを作成するためのマイグレーションファイルを作成する // migrationファイルを作成 $ docker-compose exec app php artisan make:migration create_posts_table --create=posts 上記のコマンドを実行すると_create_posts_tableと名のつくファイルが生成されるのでup()の部分を更新する _create_posts_table.php //ファイルを開くとfunction up()が存在するので書きを記載する public function up() { Schema::create('posts', function (Blueprint $table) { $table->id(); $table->string('name'); $table->text('content'); $table->timestamps(); }); } migrateionを実行する $ docker-compose exec app php artisan migrate Migrating: 2021_05_03_081009_create_posts_table Migrated: 2021_05_03_081009_create_posts_table (31.42ms) migratedされたらDBを確認 DBクライアントで確認する(mysqlコマンドで確認してもOKやで) postsテーブルが生成されて id, name, content, create_at, updated_atカラムが生成されていればOKやで。 postsテーブルのテストデータを作成するためのseederファイルを作成するで $ docker-compose exec app php artisan make:seeder PostsTableSeeder Seeder created successfully. 上記実行するとdatabase/seeders/PostsTableSeeder.phpが作成されるので開くと既存コードがあるので function run()に下記を記載する(3レコード分を記載するで) PostsTableSeeder.php public function run() { //書きを記載する \DB::table('posts')->insert([ [ 'name' => 'モーリー', 'content' => '肩トレ', 'created_at' => date('Y-m-d H:i:s'), 'updated_at' => date('Y-m-d H:i:s'), ], [ 'name' => 'ドンキーコング', 'content' => 'バナナ食う', 'created_at' => date('Y-m-d H:i:s'), 'updated_at' => date('Y-m-d H:i:s'), ] [ 'name' => 'データベース太郎', 'content' => 'データ投入', 'created_at' => date('Y-m-d H:i:s'), 'updated_at' => date('Y-m-d H:i:s'), ] ]); } 記載したらdatabase/seeders/DatabaseSeeder.phpに実行するための設定をするで function run()に下記を記載する DatabaseSeeder.php public function run() { $this->call([ PostsTableSeeder::class, //追記する ]); } 追記したら、seederを実行するで //dump-autoload $ docker-compose exec app composer dump-autoload // seedを実行する $ docker-compose exec app php artisan db:seed Seeding: Database\Seeders\PostsTableSeeder Seeded: Database\Seeders\PostsTableSeeder (28.15ms) Database seeding completed successfully. データベース確認する 3レコード分を登録出来ていることを確認。 確認出来たらコミットしておこうな add . git commit -m "postsテーブル作成とテストデータ投入" Postのバックエンドを構築する mvcに沿ってバックエンドを作っていくな。 この辺が分からん人は個別にLaravelの勉強とかMVCフレームワークをなにか一個やっとくとええと思うわ。 Postモデルを作成 $ docker-compose exec app php artisan make:model Post 今回のプロダクトはメモとしてCRUDするだけやからモデル部分は実装なしやな。 Postコントローラーを作成 今回はApiでやり取りするから/Apiの下に作る $ docker-compose exec app php artisan make:controller Api/PostController ①コントローラーを作成したら作成したファイルにindex()を作成する ②(Postモデルをuseしておく) PostController.php <?php namespace App\Http\Controllers\Api;//追記 use App\Http\Controllers\Controller; use Illuminate\Http\Request; use App\Models\Post; //Postをモデルをuseする class PostController extends Controller { // postの一覧を表示する public function index() { $posts = Post::all(); return response()->json($posts, 200); } } Post::all()でpostの一覧を取得してJOSNを返す ルーティングを記載する こちらもapiなので、routes/api.php api.php Route::group(['middleware' => 'api'], function(){ Route::get('posts', 'App\Http\Controllers\Api\PostController@index'); }); //下記は使わないので削除しておく //Route::middleware('auth:api')->get('/user', function (Request //$request) { // return $request->user(); //}); ここまで出来たら ルーティング コントローラー モデル の流れが出来たからAPIのテストして見るな Postmanを使ってAPIテストしてみる APIの開発現場で、よく使うツールやから使えるようにしといたらええと思うわ。 まぁcurlとかで、確認してもええと思うけど 設定に対して投げるURIを確認する artisan route:listで現在の設定を確認できるで % docker-compose exec app php artisan route:list +--------+----------+-----------+------+-----------------------------------------------+------------+ | Domain | Method | URI | Name | Action | Middleware | +--------+----------+-----------+------+-----------------------------------------------+------------+ | | GET|HEAD | api/posts | | App\Http\Controllers\Api\PostController@index | api | | | GET|HEAD | api/user | | Closure | api | | | | | | | auth:api | | | GET|HEAD | {any} | | Closure | web | +--------+----------+-----------+------+-----------------------------------------------+------------+ App\Http\Controllers\Api\PostController@indexを叩くには http://localhost/api/postsをgetで叩けばいいことが分かるね。 Postmanでhttp://localhost/api/posts叩く JSON形式でDBに設定した3レコードがjson形式で返ってきたな。 React側でこのデータを取得すればええことが分かるね。 次のところでやっていくからここまで出来たら コミットしておこうな $ git add . $ git commit -m "laravel側でindex()でpost一覧の取得を実装" React側でデータを取得する 固定データを表示してるHome.jsにデータをを表示する部分をやっていくで。 既存コードにデータ取得用のコードを追記する Home.js import React, { useState, useEffect } from 'react'; //1行目にuseStateを変更する import axios from 'axios'; //追記する useStyle();している下に ステートの定義(posts)とaxiosの定義をする Home.js //定義したスタイルを利用するための設定 const classes = useStyles(); //既存コードなのでこの下に書く //postsの状態を管理する const [posts, setPosts] = useState([]); //バックエンドからpostsの一覧を取得する処理 axios .get('/api/posts') .then(response => { setPosts(response.data); //バックエンドから返ってきたデータでpostsを更新する console.log(response.data); //取得データ確認用のconsole.log() }) .catch(() => { console.log('通信に失敗しました'); }); return ( ステートとはフロント側で状態を管理するために定義するもの。 初期値としてから配列を定義しておいてバックエンドから返ってきたresponse.dataで更新する。 axiosの説明記事 https://qiita.com/ksh-fthr/items/2daaaf3a15c4c11956e9 ビルドする $ make npm-dev 画面リロードするとデータが取得できている事がわかる。 ３つデータが取れているが繰り返しリクエストが送られてしまっているため、useEffectを利用して対処する(詳しくは記事参照) 先程のコードに対して、axiosの処理部分を関数化してuseEffect()の中で呼び出すことで、画面についた際の一回だけリクエストするようにする Home.js import React, { useState, useEffect } from 'react'; //useEffectする //画面に到着したらgetPostsDataを呼ぶ useEffect(() => { getPostsData(); },[]) //一覧情報を取得しステートpostsにセットする const getPostsData = () => { axios .get('/api/posts') .then(response => { setPosts(response.data); }) .catch(() => { console.log('通信に失敗しました'); }); } ビルドする $ make npm-dev 上記の様に、データが取れたらOK。画面についた時点では空の状態でその後リクエストが投げられてデータが取得出来ていることが分かるね 次はデータを一覧表示するためにrowsにpostsを繋ぎこむで その前にコミットしておこうな $ git add . $ git commit -m "DBのpostsデータをフロント側で取得しステート(posts)にセット" バックエンドから取得したデータを一覧表につなぎこむ Home.js(旧コード) let rows = [ { name: "モーリー", content: "肩トレ", editBtn: <Button color="secondary" variant="contained">編集</Button>, deleteBtn: <Button color="primary" variant="contained">完了</Button>, },{ name: "ドンキーコング", content: "バナナ補給", editBtn: <Button color="secondary" variant="contained">編集</Button>, deleteBtn: <Button color="primary" variant="contained">完了</Button>, }, ]; getPostDataの下にpostsを整形したデータを入れるrowsを定義する Home.js(新コード) const getPostsData = () => { axios .get('/api/posts') .then(response => { setPosts(response.data); }) .catch(() => { console.log('通信に失敗しました'); }); } //空配列として定義する let rows = []; //postsの要素ごとにrowsで使える形式に変換する posts.map((post) => rows.push({ name: post.name, content: post.content, editBtn: <Button color="secondary" variant="contained">編集</Button>, deleteBtn: <Button color="primary" variant="contained">完了</Button>, }) ); ちょっと何してるかわかりにくいかもしれんけど空配列rowsにmap中のpostのデータを整形して配列の要素として追加してるな。 バックエンド側から取得したデータ(posts)を フロントエンド側で使う形に整形する変数(rows)に加工し 表示 という流れはよく使うからマスターしとこうな ビルドする $ make npm-dev 表示確認 一番下にデータ投入という行が追加されてたら、実装成功やで 纏め フロントエンドからAPI叩いてデータ取得 データを整形して表示という部分をやっていったな。 次の⑤ではデータの新規登録をやっていくで github乗っけとくわな。 https://github.com/morry48/LaravelReactTaskApp ほな、LGTMよろしゅーやで
- 投稿日：2021-05-04T08:24:35+09:00
php初学者がLaravelの環境構築した
phpとは サーバーサイド側のプログラミング言語。 JavaScriptはフロント側の言語。 DBの内容を入力したり更新したりするのに裏側で動いている言語ってことだな... Laravelとは MVCのWebアプリケーション開発用のオープンソースフレームワーク。 php使ってWebアプリ構築する際に使えるフレームワークの一種ですね... Laravel構築の方法 phpのパッケージインストールソフト"Composer"が必要（例の指揮者的なアイコンのアレですね...わかります...） composerのインストール方法はこちらから （WinとMacでインストール方法が違います。そこら辺もdocumentを見てください...） Macならターミナルで、 composer create-project laravel/laravel project名 --prefer-dist "version指定" 「project名」と「version指定」の部分はお好きな名前、versionを指定してください。 project名が全体のディレクトリ名になります。 versionを指定しない場合、最新版が勝手にインストールされます。 動作確認 動作テストをするLaravelのディレクトリ上で、 php artisan serve を入力→簡易サーバーが立ち上がります。 artisan神か webブラウザでlocalhost:8000を使えば、、、 こんな感じに表示されました。（version6.xの場合） 使用感 Laravelを少し触り開発をした感想としては、phpで細かくバリデーションする必要もないし、bootstrap4などのフロント側も様々なフレームワーク？があり使いやすいかと思う。 php初学者なので、ここから色々触っていきたいと思います！！ →もっと面白みのある記事書きたいですね...
- 投稿日：2021-05-04T03:53:22+09:00
【最新】Laravel8でサーバーを起動し、ログイン機能を実装しよう！
目標 Laravelのインストール MySQLのインストール ログイン機能の実装 Laravel v8.40(最新:2021年5月4日時点)のartisanコマンドでサーバーを立ち上げ、 データベースを作成しログイン機能を実装します。 前提条件 composer (v2.0.13) PHP (v8.0.3) Homebrew (v3.1.5) 自身の環境では、以上のツールとバージョンをインストールしています。 まだ、インストールされていない方・バージョンが古い方は、 事前にインストール・アップデートを済ませていただきますようお願いします。 Laravelのインストール それでは早速、実装していきましょう！ まずは、以下ディレクトリ内でcomposerコマンドを使用し、laravelをインストールします。 /Users/user Users-PC:~ user$ composer create-project laravel/laravel laravel インストールしたlaravelディレクトリに移動し、 artisanコマンドを使用することでversion確認をすることができます。 /Users/user/laravel Users-PC:laravel user$ php artisan -v Laravel Framework 8.40.0 laravelディレクトリ直下でサーバーを起動します。 /Users/user/laravel Users-PC:laravel user$ php artisan serve 以上で、laravelがインストールされたのページにアクセスすることができます。 http://localhost:8000/ MySQLのインストール 続いて、MySQLをインストールします。 好きな場所でHomebrewを活用し、mysqlをインストールします。 Users-PC:laravel user$ brew install mysql 以下コマンドでmysqlファイルのインストール先を確認することができます。 Users-PC:laravel user$ which mysql /usr/local/bin/mysql 今回/Users/user/laravel/.envファイルの中では、 データベース名は「laravel」で初期設定されているため、 MySQLに「laravel」という名前のデータベースを追加します。 .env DB_DATABASE=laravel 因みに、ls -aというlinuxコマンドを使用することで .envファイルの存在を確認することができます。 /Users/user/laravel Users-PC:laravel user$ ls -a . .env .gitignore app composer.json database package.json resources storage vendor .. .env.example .styleci.yml artisan composer.lock node_modules phpunit.xml routes tailwind.config.js webpack.config.js .editorconfig .gitattributes README.md bootstrap config package-lock.json public server.php tests webpack.mix.js laravelディレクトリ直下でmysqlコマンドを使用し、mysqlにアクセスします。 /Users/user/laravel/ Users-PC:laravel user$ mysql -uroot SQL文でlaravelというデータベースを作成します。 mysql mysql> create database laravel; Query OK, 1 row affected (0.00 sec) SQL文でlaravelというデータベース名があることを確認できます。 mysql mysql> show databases; +--------------------+ | Database | +--------------------+ | information_schema | | laravel | | mysql | | performance_schema | | sys | +--------------------+ 5 rows in set (0.00 sec) 以上でmysqlの設定は終わりです。 しかし、このままページにアクセスした際に.envに記述されているDB_HOST名に誤りがあるため、 以下のようなエラーメッセージが出てしまいます。(正式にいうと誤りではありませんが、接続方法が異なります。） SQLSTATE[HY000] [2002] Connection refused .envファイルのDB_HOST名を127.0.0.1 → localhostに変更します。 localhost・・・ソケットファイルを使用した接続 127.0.0.1・・・TCP/IPを使用した接続 .env 変更前 DB_HOST=127.0.0.1 変更後 DB_HOST=localhost .envファイルやconfig/*.phpファイルを編集した際には、 必要に応じてartisanコマンドを活用し変更した設定を反映させましょう。 (過去に数時間悩んだエラーが、これらによって解決したこともあるため、覚えて損はないかと思われます。) php artisan config:cache php aritsan config:clear php artisan cache:clear php artisan route:clear php artisan view:clear /Users/user/laravel Users-PC:laravel user$ php artisan config:cache jetstreamのインストール&ログイン機能実装 最後に、jetstreamのパッケージをインストールしてログイン機能を実装していきましょう。 それではまず、composerのjetstreamのパッケージをインストールします。 /Users/user/laravel Users-PC:laravel user$ composer require laravel/jetstream artisanコマンドでjetstreamをインストールしましょう。 jetstreamでは、「livewire」と「inertia」のパックを選択してインストールすることができます。 livewire これまでのlaravelのbladeを活用するパック inertia Vue.jsやReactといったjavascriptを活用するパック 今回当方では、inertiaをインストールしていきます。 /Users/user/laravel Users-PC:laravel user$ php artisan jetstream:install inertia jetstreamのインストールが完了したら、npmをインストールしてビルドしていきましょう。 /Users/user/laravel Users-PC:laravel user$ npm install && npm run dev 最後にartisanコマンドを実行し、データベースにテーブルを挿入していきましょう！ /Users/user/laravel Users-PC:laravel user$ php artisan migrate Migrating: 2014_10_12_000000_create_users_table Migrated: 2014_10_12_000000_create_users_table (14.84ms) Migrating: 2014_10_12_100000_create_password_resets_table Migrated: 2014_10_12_100000_create_password_resets_table (8.38ms) Migrating: 2014_10_12_200000_add_two_factor_columns_to_users_table Migrated: 2014_10_12_200000_add_two_factor_columns_to_users_table (8.48ms) Migrating: 2019_08_19_000000_create_failed_jobs_table Migrated: 2019_08_19_000000_create_failed_jobs_table (9.86ms) Migrating: 2019_12_14_000001_create_personal_access_tokens_table Migrated: 2019_12_14_000001_create_personal_access_tokens_table (14.20ms) Migrating: 2021_05_03_160333_create_sessions_table Migrated: 2021_05_03_160333_create_sessions_table (19.12ms) 上記のようにphp artisan migrateが実行できれば、恐らくログイン機能が実装できていることでしょう！ 右上にLogin / Registerが表示されていれば成功です！ ご拝読ありがとうございました！ もし、参考になった方がいらっしゃいましたらLGTMボタンのクリックをお願いします！