20210501のlaravelに関する記事は12件です。

[簡単]モダン構成なSPAで作るチュートリアル②(ルーティング編)

SPAで作るタスク管理アプリのチュートリアル - ルーティング編 今回は第②弾でReact側ルーティングを設定する部分をやっていくで ①環境構築(Docker/Laravel/React.js/Material-UI) ②React側でルーティング設定 ③Reactで一覧テーブル作成 ④seederで作ったDBのデータをReactに渡して一覧に表示 ⑤新規登録機能 ⑥編集・削除機能 react-router-domとは react-router-domってなんやねんって話なんやけど、簡単に言うとURLのPathに対してReact側で表示するコンポーネントを切り替えることができるで。 使い方とか詳しいことに関しては、まぁググってや。 こんなんできるようになるで ボタンクリックするとページ切り替えできるような機能をこれから作っていくな。 npmでreact-router-domを導入 make npm-install react-router-domを実行 $ make npm-install react-router-dom docker-compose exec web npm install ---------下記のようなメッセージ出たらOK + react-router-dom@5.2.0 added 10 packages from 5 contributors and audited 1241 packages in 11.827s 100 packages are looking for funding run `npm fund` for details found 0 vulnerabilities こんな感じでpackage-jsonが更新されるはずやわ package.json "dependencies": { "@material-ui/core": "^4.11.4", "react-router-dom": "^5.2.0" } ルーティング設定のため/js以下のディレクトリ構成を変更する やることは - /components下のExample.jsを新規ディレクトリpages下に移動 - /js直下に新規ファイルroute.jsを作成 実行後のディレクトリ構成はこんな感じ VSCODE使っててExapme.jsの移動のときに、「import先のディレクトリを変えますか」的なメッセージが出たら「はい」を押す ┗ js ┗ components (Example.jsを空になる) ┗ pages (新規ディレクトリ) ┗ Example.js (/componentsから移動) ┗ app.js ┗ bootstrap.js ┗ route.js (新規作成ファイルで中身はまだ空のままでOK) /js直下のapp.jsがエディタが良しなにやってくれていることを確認する (変更されていない場合は自分で変更を加える) app.js // 15行目 - require('./components/Example'); + require('./pages/Example'); pages下のExample.jsが表示できることを確認 Example.js <div className="card-header">React導入できたわな??</div>   //13行目辺り - <div className="card-body">Im an example component!</div> + <div className="card-body">pages下に移動出来た??</div> <Button color="secondary" variant="contained">ワイがMaterial-UIのボタンやな??</Button> ビルドする $ make npm-dev localhostにアクセスし表示できることを確認 「pages下に移動出来た??」が表示できていればOK 変更差分は下記のようになるはずや コミットしておこう $ git add . $ git commit -m "react-router-dom導入しディレクトリ変更" react-router-domを利用してページを表示してみる laravelでphp artisan ui react --authによってReactを導入した場合、 /js/app.jsが読み込まれる様になっているな。 先程requireの部分を './components/Example' → './pages/Example'に変えたことによって pages下のExample.jsが表示されたことからも分かるように、 app.jsの中のrequire()の中で呼ばれたjsファイルが一番最初に呼ばれるんやな。 React側でルーティングしたいので最初に呼ばれるファイルを /js/route.js/ /js/app.jsを変更する app.js // 15行目 - require('./pages/Example'); + require('./route'); route.jsに下記を貼り付ける import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter, Route, Switch, } from 'react-router-dom'; import Example from './pages/Example'; function App() { return ( <div> <Switch> //ここに、pathと対応するコンポーネントを書いていく </Switch> </div> ); } ReactDOM.render(( <BrowserRouter> <App /> </BrowserRouter> ), document.getElementById('app')) 使っているタグがどんな意味か知りたかったらreact-router-domをimportしてるから、ドキュメント読もうな。 公式ドキュメント の中にルーティングの設定を書いていくで //route.jsに下記を追記 <Switch> <Route path='/example' exact component={Example} /> </Switch> これはpathが/exampleだったらExampleコンポーネントを表示するっているルーティングの設定やね。 変更箇所がわかるようにボタンの文字を変更し不要な記述を削除する Example.js <div className="card-header">React導入できたわな??</div> <div className="card-body">pages下に移動出来た??</div> //14行目のボタンを「Homeに遷移ボタン」に変更する - <Button color="secondary" variant="contained">ワイがMaterial-UIのボタンやな??</Button> + <Button color="secondary" variant="contained">Homeに遷移ボタン</Button> </div> </div> </div> @@ -20,7 +20,3 @@ function Example() { } export default Example; 下記の表示設定はroute.js側で行えるようになったため、削除 //if (document.getElementById('app')) { // ReactDOM.render(<Example />, document.getElementById('app')); //} ビルドする $ make npm-dev 先程同様にlocalhostにアクセスしたら、返す対象がないため、jsエラーが出るはず。 localhost/exampleにアクセスすると下記が表示されるはず ボタンが変わっていればOKな!!!! コミットしとくで $ git add . $ git commit -m "routerを経由してページを表示" もう一つページ(Home.js)を用意してボタンで遷移できるようにしてみる /pagesディレクトリにはExacple.jsとHome.jsが存在する状況になるで ファイル作れたら進んでな。 /pages/Home.jsを用意し下記の様に設定する Home.js import React from 'react'; import ReactDOM from 'react-dom'; import { Button, Card } from '@material-ui/core'; function Home() { return ( <div className="container"> <Card> <Button color="primary" variant="contained" href={`/example`}>Exampleに遷移</Button> </Card> </div> ); } export default Home; ボタンが一つあるだけの画面のコンポーネントやな。 表示するにはルーティングの設定がいるな。 Home.jsのルーティングを記載する route.js // 8行目 以降 import Example from './pages/Example'; // Exampleの下にHome.jsをインポートする import Home from './pages/Home'; function App() { return ( <div> <Switch> <Route path='/example' exact component={Example} /> // Homeコンポーネントを表示するための設定を記述 <Route path='/' exact component={Home} /> </Switch> </div> ); } コンポーネントのimportとルーティングの設定を書いただけやな。 exactってなんやねんって気になってる人いてるかもしれへんけど、 これ書いてなかったら前方一致で判定されるはずやから基本は書いといたほうがえと思うわ。 ビルドする $ make npm-dev ビルドできたらlocalhostにアクセスして下記のように表示されたらOKや 表示されているボタンにhrefに/exampleを設定したのでクリックすると expampleページに遷移できるはずやで Exampleコンポーネントのボタンにもhrefを設定する Example.js //14行目にhrefを追加 <Button color="secondary" variant="contained" href={`/`}>Homeに遷移ボタン</Button> これで互いのページを行き来できるようになったはずやで ビルド $ make npm-dev ビルドできたら互いのページ行き来してみて遊んでみたや つかめてきたら新しいページを用意してroute.jsにルーティングの設定を記述したら 理解深まると思うわ コミットしとこうな $ git add . $ git commit -m "Homeコンポーネントを作成しrouteingの設定" 纏め このようにlaravel側では環境構築編で設定したように、どのパスが指定されたとしてもapp.blade.phpを表示するように設定しておいてReact.js側でルーティングの設定をすることが出来たな。 ここまで出来たらReactやったことある人ならどんどんページ作っていくことはできそうやな。 ただデータのやり取りが出来てないからそれは次回以降の記事に書いていくことにするで 次はReactで一覧テーブルのコンポーネント作っていくところをやっていこうと思うで。 次回はReactで一覧表示 ほなここまで出来た人はLGTMしといてな。 ソースはGitHubに乗せておくから分からんときはコミット履歴見たら解決できるかもな。 https://github.com/morry48/LaravelReactTaskApp
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Controllerの作成(Laravelでウェブアプリを作ろう⑤)

Controller(コントローラー) Controllerは、ユーザーからのリクエストをもとにモデルに処理を依頼したり、レスポンスを返したりと、その名の通りコントロール(制御)に携わる部分です Controllerの作成 Controllerの作成は手動でも行えますが、コマンドで実行したほうが間違いがなく確実です。 Controllerの作成 php artisan make:controller モデル名Controller コマンドを実行すると[app>Http>Controllers]にファイルが生成されます。 単純な全件取得や削除処理など、モデルに処理を依頼するまでもない場合Controllerから直接データベースにアクセスすることが可能です。 その場合、以下のように実装が可能です UserController <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use \App\Models\User; class UserController extends Controller { //全件取得します public function getAll(){ return User::all(); } //1件取得します public function getOne($userId){ return User::find($userId); } //新規に作成します。 public function create(Request $request){ $newUser = new User; $form = $request->all(); $newUser -> fill($form) -> save(); //登録したidを返却します return $newUser->id; } //名前を変更します。処理一緒? public function changeName($userId){ $newUser = new User; $form = $request->all(); $newUser -> fill($form) -> save(); //登録したidを返却します return $newUser->id; } //削除します。 public function delete($userId){ User::delete($userId); } } Routesの作成 routesというのはURIとコントローラー内のメソッドの紐付けのことで、これを行うことにより様々な処理ができるようになります。 上記で作成したように手動でコントローラーの中身を作成することもできれば、Route::resourceのように記述し、簡単に実装することもできます。 ただし、Route::resourceで実装した場合には必要のないURIを作成してしまったり、逆に必要なURIが足りない場合に追加したりすると、何があるのか分かりにくくなることがあります。 さらに同じ更新処理でも苗字だけ更新する処理、名前だけ更新する処理、など処理を分ける際にもresouceの場合には分かりにくくなりがちです。 そのため、少し作業は多くなりますが最初から自動実装の機能を使わずに実装した方が結果的に見やすくなることが多いです。 [routes>api.php]の内容を以下に書き換える api.php Route::group(['middleware' => ['api']], function(){ //users //全件取得します Route::get('users', 'UserController@getAll'); //1件取得 Route::get('users/{userId}', 'UserController@getOne'); //新規作成 Route::post('users/', 'UserController@create'); //名前の更新 Route::put('users/{userId}', 'UserController@changeName'); //削除 Route::delete('users/{userId}', 'UserController@delete'); });
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Laravelでユーザーごとにセレクトボックスの内容を変える

ユーザーごとに選択肢が変わるセレクトボックスを作ったので、そのメモとして。 前提 バージョン:Laravel6 データベース構成:usersとitemsをuser_idで紐づけ users id|name items id|user_id|name データベースの中身は冗長なのでページ下部に記載 実装方法 ①選択肢の抽出 controller側でログイン中のuserのidを取得して、選択肢を抽出する。 sellectionsには連想配列でitemのidとnameを紐づけておく。 抽出条件を変えればより複雑な条件分岐もできそう。 SelectboxController.php public function selectbox() { // ログイン中のユーザーを取得 // findOrFail使用のためゲストや存在しないidの場合は404エラー $user = User::findOrFail(\Auth::id()); // user_idでitemを抽出 $items = Item::where('user_id', $user->id)->get(); // 抽出したitemから選択肢を作成 $selections = []; foreach($items as $item) { $selections[$item->id] = $item->name; } // viewを出力 return view('selectbox',[ 'user' => $user, 'selections' => $selections ]); } selectbox.blade.php <p>{{ $user->name }}としてログイン</p> // Laravel collectiveを使う場合 {!! Form::open(['route' => 'selectboxResult', 'method' => 'post']) !!} {!! Form::label('selection', '選択肢') !!} {!! Form::select('selection', $selections) !!} {!! Form::submit('送信') !!} {!! Form::close() !!} // パッケージを使わない場合 <form method="post" action="{{ route('selectboxResult') }}" accept-charset="UTF-8"> {{ csrf_field() }} <label for="selection">選択肢</label> <select id="selection" name="selection"> @foreach($selections as $itemId => $itemName) <option value="{{ $itemId }}">{{ $itemName }}</option> @endforeach </select> <input type="submit" value="送信"> </form> web.php Route::get('/selectbox', 'SelectboxController@selectbox')->name('selectbox'); ②送信結果の表示 optionタグでitemのidを送信しているので、controllerでidから抽出する。 SelectboxController.php public function selectboxResult(Request $request) { // idからitemを抽出 $item = Item::findOrFail($request->selection); //viewを出力 return view('selectboxResult',[ 'item' => $item ]); } ```html:selectboxResult.blade.php <p>idは{{ $item->id }}</p> <p>名称は{{ $item->name }}</p> web.php Route::post('/selectbox/result', 'SelectboxController@selectboxResult')->name('selectboxResult'); ③実行結果 user1でログインしている場合 user7でログインしている場合 サンプルコード全文 SelectBoxController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\User; use App\Item; class SelectboxController extends Controller { public function selectbox() { // ログイン中のユーザーを取得 // findOrFail使用のためゲストや存在しないidの場合は404エラー $user = User::findOrFail(\Auth::id()); // user_idでitemを抽出 $items = Item::where('user_id', $user->id)->get(); // 抽出したitemから選択肢を作成 $selections = []; foreach($items as $item) { $selections[$item->id] = $item->name; } // viewを出力 return view('selectbox',[ 'user' => $user, 'selections' => $selections ]); } public function selectboxResult(Request $request) { // idからitemを抽出 $item = Item::findOrFail($request->selection); //viewを出力 return view('selectboxResult',[ 'item' => $item ]); } } selectbox.blade.php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>selectbox</title> </html> <body> <p>{{ $user->name }}としてログイン</p> {!! Form::open(['route' => 'selectboxResult', 'method' => 'post']) !!} {!! Form::label('selection', '選択肢') !!} {!! Form::select('selection', $selections) !!} {!! Form::submit('送信') !!} {!! Form::close() !!} <form method="post" action="{{ route('selectboxResult') }}" accept-charset="UTF-8"> {{ csrf_field() }} <label for="selection">選択肢</label> <select id="selection" name="selection"> @foreach($selections as $itemId => $itemName) <option value="{{ $itemId }}">{{ $itemName }}</option> @endforeach </select> <input type="submit" value="送信"> </form> </body> </html> selectboxResult.blade.php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>selectboxResult</title> </html> <body> <p>idは{{ $item->id }}</p> <p>名称は{{ $item->name }}</p> </body> </html> web.php <?php Route::get('/selectbox', 'SelectboxController@selectbox')->name('selectbox'); Route::post('/selectbox/result', 'SelectboxController@selectboxResult')->name('selectboxResult'); データベースの中身 users SELECT * FROM users; id|name 1|user1 2|user2 3|user3 4|user4 5|user5 6|user6 7|user7 8|user8 9|user9 10|user10 items SELECT * FROM items; id|user_id|name 1|9|item1 2|2|item2 3|6|item3 4|4|item4 5|6|item5 6|9|item6 7|8|item7 8|1|item8 9|3|item9 10|5|item10 11|1|item11 12|9|item12 13|10|item13 14|4|item14 15|2|item15 16|7|item16 17|7|item17 18|10|item18 19|3|item19 20|10|item20 21|2|item21 22|9|item22 23|7|item23 24|2|item24 25|4|item25 26|1|item26 27|5|item27 28|2|item28 29|4|item29 30|3|item30
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

モデルとシーダーの作成(Laravelでウェブアプリを作ろう④)

モデル モデルはテーブルとマッピングされたオブジェクトで、DB操作を行うためにクラスです。 モデルの作成 モデルはテーブル名の単数系を名前につけることで、自動的にそのテーブルとマッピングします。 ローカル環境でのモデルの作成 php artisan make:model モデル名 docker環境でのモデルの作成 docker-compose exec app php artisan make:model モデル名 シーダーの作成(初期レコードを挿入ファイル) シーダーはテストデータやマスタデータなどのアプリケーション起動時に必要なレコードをコマンドで登録する仕組みです。 シーダーの作成 シーダーファイルの作成 php artisan make:seeder データベースのテーブル名TableSeeder シーディング時に[public function run()]関数が呼ばれるので、ここに追加したいレコードの情報を記載しておきます。 最後にforeachでcreate関数を呼び出して登録処理を行います。 UseresTableSeeder.php <?php namespace Database\Seeders; use Illuminate\Database\Seeder; use \App\Models\User; class DatabaseSeeder extends Seeder { public function run() { $users = [ [ 'title' => "タイトル1", 'description' => "説明1", ], [ 'title' => "タイトル2", 'description' => "説明2", ], [ 'title' => "タイトル3", 'description' => "説明3", ] ]; //一括登録 foreach($users as $user) { User::create($user); } } } シーディング ローカル環境でのシーディング php artisan db:seed docker環境でのシーディング docker-compose exec app php artisan db:seed mysqlに対しselect文を発行し、レコードが追加できていればOKです。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ModelとSeederの作成(Laravelでウェブアプリを作ろう④)

Model(モデル) Modelはテーブルとマッピングされたオブジェクトで、DB操作を行うためにクラスです。 Modelの作成 Modelはテーブル名の単数系を名前につけることで、自動的にそのテーブルとマッピングします。 ローカル環境でのModelの作成 php artisan make:model モデル名 docker環境でのModelの作成 docker-compose exec app php artisan make:model モデル名 Seeder(シーダー) Seederはテストデータやマスタデータなどのアプリケーション起動時に必要なレコードをコマンドで登録する仕組みです。 Seederの作成 Seederの作成 php artisan make:seeder データベースのテーブル名TableSeeder シーディング時に[public function run()]関数が呼ばれるので、ここに追加したいレコードの情報を記載しておきます。 最後にforeachでcreate関数を呼び出して登録処理を行います。 UseresTableSeeder.php <?php namespace Database\Seeders; use Illuminate\Database\Seeder; use \App\Models\User; class DatabaseSeeder extends Seeder { public function run() { $users = [ [ 'title' => "タイトル1", 'description' => "説明1", ], [ 'title' => "タイトル2", 'description' => "説明2", ], [ 'title' => "タイトル3", 'description' => "説明3", ] ]; //一括登録 foreach($users as $user) { User::create($user); } } } Seeding(シーディング) ローカル環境でのSeeding php artisan db:seed docker環境でのSeeding docker-compose exec app php artisan db:seed mysqlに対しselect文を発行し、レコードが追加できていればOKです。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

laravelで視覚的に理解する論理削除

論理削除とは? 論理削除とは実際にはデータを削除せず、見かけ上削除しているように見える技術である。 データベースにはデータが残っているので、必要な時にそのレコードを復元したり、一部の権限の人にはレコードを公開したりできる。 例えば、管理者はそのレコードを確認できるがユーザーはその内容を確認できないように設定することができる。 パソコンの不要ファイルを削除してゴミ箱に格納するイメージに近い。 Laravlではマイグレーションファイルとモデルへの設定で論理削除用のカラムを設定できるので視覚的に検証してみることにした。 マイグレーションファイルの準備 今回はpeopleテーブルをもとに論理削除する。 論理削除をする上で対応するpeopleテーブルに対応するモデルも必要となる。 Person.phpは以下のようにする。 Person.php <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; use Illuminate\Database\Eloquent\SoftDeletes; class Person extends Model { use SoftDeletes; use HasFactory; } まずはrunメソッドを以下のように編集してマイグレーションする。 xxx_create_people_table public function up() { Schema::create('people', function (Blueprint $table) { $table->id(); $table->string('name'); $table->integer('age'); $table->timestamp('created_at')->useCurrent()->nullable(); $table->timestamp('updated_at')->useCurrent()->nullable(); $table->softDeletes(); }); } また、ダミーデータも挿入するとテーブルの中身は以下のようになる。 コントローラーの作成 今回はSoftDeleteControllerという名前で作成する。 コントロローラーは以下のように記述します。 SoftDeleteController <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\Person; class SoftDeleteController extends Controller { public function index() { $people = Person::all(); // softdeletesカラムがnullの物を取得 $deleted = Person::onlyTrashed()->get(); // 論理削除済のデータ取得 $param = ['people' => $people,'deleted' => $deleted]; return view('delete.index', $param); } /* * 論理削除 */ public function delete($id) { Person::find($id)->delete(); // softDelete return redirect()->to('delete/index'); } public function restore($id) { Person::onlyTrashed()->find($id)->restore(); // restoreメソッドで復元 return redirect()->to('delelte/index'); } /* * force delete Person */ public function forceDelete($id) { Person::onlyTrashed()->find($id)->forceDelete(); //forceDeleteメソッドで物理削除 return redirect()->to('delete/index'); } } 論理削除されたレコードの取得 indexアクションの Person::onlyTrashed()->get(); のように モデル名::onlyTrashed()->get(); で論理削除されたレコードを取得できる。 論理削除 deleteアクションの Person::find($id)->delete();のように モデル名::find(対象のレコード)->delete(); で論理削除が実行できる。 論理削除されたレコードの復元 restoreアクションの Person::onlyTrashed()->find($id)->restore();のように モデル名::onlyTrashed()->find(対象のレコード)->restore(); で対象の論理削除されたレコードを復元ができる。 論理削除したレコードの完全削除 forcedeleteアクションの Person::onlyTrashed()->find($id)->forceDelete(); で対象の論理削除されたレコードを完全削除(物理削除)できる ビューページ ビューページとしてdeleteディレクトリを作成し、index.phpを作成する。 index.php <style> th { background-color: black; color: white; padding: 5px 30px; } td { border: 1px solid black; padding: 5px 30px; text-align: center; } </style> <body> <a href="/delete/create">メンバー追加</a> <h2>未削除</h2> <table> <tr> <th>ID</th> <th>名前</th> <th>削除ボタン</th> </tr> @forelse ($people as $person) <tr> <td>{{ $person->id }}</td> <td>{{ $person->name }}</td> <td> <a href="/delete/delete/{{ $person->id}}">削除</a> </td> </tr> @empty <tr> <td>-</td> <td>-</td> <td>-</td> </tr> @endforelse </table> <h2>削除済</h2> <table> @forelse ($deleted as $delete) <tr> <td>{{ $delete->id }}</td> <td>{{ $delete->name }}</td> <td> <a href="/delete/restore/{{ $delete->id}}">復旧</a> <a href="/delete/force-delete/{{ $delete->id}}">完全削除</a> </td> </tr> @empty <tr> <td>-</td> <td>-</td> <td>-</td> </tr> @endforelse </table> </body> ルーティングを設定してこのdelete/index.blade.phpにアクセスすると以下のようになる。 ルーティングも設定する。 web.php Route::group(['prefix' => 'delete'], function () { Route::get('', [SoftDeleteController::class,'index'])->name('delete');// 一覧表示 Route::get('delete/{id}', [SoftDeleteController::class,'delete']); // 論理削除 Route::get('restore/{id}', [SoftDeleteController::class,'restore']); // 復元 Route::get('force-delete/{id}', [SoftDeleteController::class,'forceDelete']); // 完全削除 }); 実際にdeleteにアクセスして削除ボタンを押して、論理削除してみる。 画面は下記のようになる。 また、テーブルには削除された時刻が表示される。 削除済のレコードの復旧ボタンを押して、復元するとそのレコードは未削除の欄に戻り、テーブルの削除された時間もNULLになる。 また、完全削除ボタンを押すとテーブルからレコードが削除されて、ブラウザからも存在がなくなる。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

マイグレーションの作成(Laravelでウェブアプリを作ろう③)

マイグレーションは、データベースのテーブルに関する情報を設定するファイルで、テーブルごとに作成します。 テーブルにはどんなカラム(フィールド)があって、そのカラムにはどんな情報が付与されるのかを設定します。 マイグレーションファイルの作成 手動でも作成は行えますが、コマンドで実行する方が確実です。 注意点としては、マイグレーションファイルを複数作成した場合、一括実行を行うと実行される順番はファイルを作成した順番になります。 そのため外部キーの設定をする場合に参照するテーブルを先に生成しておかないとエラーになるため注意が必要です。 php artisan make:migration create_テーブル名_table --create=テーブル名 作成されたファイルは[database>migrations]に格納されます。 デフォルトで3つファイルが作成されています。 [public function up()]こちらのメソッドに、テーブルの作成時に行いたい処理を記載します。 記載の仕方は以下のようになります。 2014_10_12_000000_create_users_table.php public function up() { Schema::create('users', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('email')->unique(); $table->timestamp('email_verified_at')->nullable(); $table->string('password'); $table->rememberToken(); $table->timestamps(); }); } よく使うカラムのキーやそのほかの情報については以下を参照してください //文字列 $table->string('カラム名', バイト数); //数字 $table->integer('カラム名'); //正の数のみ $table->unsignedInteger('カラム名'); //真偽値 $table->boolean('is_archived') //作成日及び更新日 $table->timestamps(); //インクリメント $table->increments('カラム名'); //nullを許容する(デフォルトではnotnullになっている) $table->型名('カラム名')->nullable(); //デフォルト値の設定 $table->型名('カラム名')->default(値); //プライマリーキー(idをincrementsにした時点で自動的にprimarykeyになっているため基本的には不要) $table->primarykey(['カラム名']); //ユニークキー $table->unique(['カラム名']); //外部キー $table->foreign('参照元のカラム名')->references('参照先のカラム名')->on('参照先のテーブル'); マイグレーションの実行 マイグレーションの実行にはコマンドで実行します ローカル環境でアプリケーションを開いている場合 php artisan migrate docker環境でアプリケーションを開いている場合 docker-compose exec app php artisan migrate テーブルが追加されていれば成功です 補足 詳しくは記載しませんが、MySQL接続の際のコマンドです dockerのコンテナ名の確認 docker ps docker環境でMySQLに接続するコマンド docker exec -it コンテナ名 mysql -u ログインユーザー名 -p
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Migrateの作成(Laravelでウェブアプリを作ろう③)

Migrate(マイグレート) Migrateは、データベースのテーブルに関する情報を設定するファイルで、テーブルごとに作成します。 テーブルにはどんなカラム(フィールド)があって、そのカラムにはどんな情報が付与されるのかを設定します。 Migrateの作成 手動でも作成は行えますが、コマンドで実行する方が確実です。 注意点としては、Migrateを複数作成した場合、一括実行を行うと実行される順番はファイルを作成した順番になります。 そのため外部キーの設定をする場合に参照するテーブルを先に生成しておかないとエラーになるため注意が必要です。 php artisan make:migration create_テーブル名_table --create=テーブル名 作成されたファイルは[database>migrations]に格納されます。 デフォルトで3つファイルが作成されています。 [public function up()]こちらのメソッドに、テーブルの作成時に行いたい処理を記載します。 記載の仕方は以下のようになります。 2014_10_12_000000_create_users_table.php public function up() { Schema::create('users', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('email')->unique(); $table->timestamp('email_verified_at')->nullable(); $table->string('password'); $table->rememberToken(); $table->timestamps(); }); } よく使うカラムのキーやそのほかの情報については以下を参照してください //文字列 $table->string('カラム名', バイト数); //数字 $table->integer('カラム名'); //正の数のみ $table->unsignedInteger('カラム名'); //真偽値 $table->boolean('is_archived') //作成日及び更新日 $table->timestamps(); //インクリメント $table->increments('カラム名'); //nullを許容する(デフォルトではnotnullになっている) $table->型名('カラム名')->nullable(); //デフォルト値の設定 $table->型名('カラム名')->default(値); //プライマリーキー(idをincrementsにした時点で自動的にprimarykeyになっているため基本的には不要) $table->primarykey(['カラム名']); //ユニークキー $table->unique(['カラム名']); //外部キー $table->foreign('参照元のカラム名')->references('参照先のカラム名')->on('参照先のテーブル'); Migration(マイグレーション) Migrationにはコマンドで実行します ローカル環境でMigration php artisan migrate docker環境でMigration docker-compose exec app php artisan migrate テーブルが追加されていれば成功です 補足 詳しくは記載しませんが、MySQL接続の際のコマンドです dockerのコンテナ名の確認 docker ps docker環境でMySQLに接続するコマンド docker exec -it コンテナ名 mysql -u ログインユーザー名 -p
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Laravelで複数Middlewareを指定するときは優先度も指定しよう

3行まとめ LaravelのMiddlewareは書いた順に実行されるわけではない LaravelのバージョンをアップしたりするとMiddlewareの実行順が変わったりして危険 app/Http/Kernel.phpに$middlewareGroupsを指定して、優先度を明確にしましょう。 RouteでMiddlewareを設定する LaravelでMiddlewareを指定するときにはどこで指定していますか?私はroute.phpのrouteの指定でmiddlewareを設定することがよくあります。以下の様な感じですね。 <?php Route::get('/hoge', 'HogeController@index') ->middleware(['a_middleware']) ->name('hoge.index'); このように指定して/hogeにアクセスが来たときにa_middlewareを実行します。 では適用したいミドルウェアが複数あるときはどうでしょうか?以下のように書きますね。 <?php Route::get('/hoge', 'HogeController@index') ->middleware(['a_middleware', 'b_middleware']) ->name('hoge.index'); このとき、書いたプログラマーとしてはa_middleware→b_middlwareという順番で実行されると期待するはずです。 しかし残念ながらそうではありません。実際にLaravelのバージョンをアップグレードしたらMiddlewareの実行順が変わってテストが落ちたので慌てて優先度を設定するということがありました Middlewareには優先度がある 実はドキュメントにも書かれているのですが、LaravelではMiddlewareの優先度を指定することが出来ます。 https://laravel.com/docs/8.x/middleware#sorting-middleware しかしこの優先度は事前にapp/Http/Kernel.phpに書いておくと反映されるという形式のもので、routeの設定に書いたらその順番に実行してくれるというようなものではありません。 <?php class Kernel extends HttpKernel { ... 略 ... protected $middlewarePriority = [ \Illuminate\Cookie\Middleware\EncryptCookies::class, \Illuminate\Session\Middleware\StartSession::class, \Illuminate\View\Middleware\ShareErrorsFromSession::class, \Illuminate\Contracts\Auth\Middleware\AuthenticatesRequests::class, \Illuminate\Routing\Middleware\ThrottleRequests::class, \Illuminate\Session\Middleware\AuthenticateSession::class, \Illuminate\Routing\Middleware\SubstituteBindings::class, \Illuminate\Auth\Middleware\Authorize::class, ]; むしろroute.phpの配列に渡している順番は保証されないと思って、信用せずに書いたほうが良いでしょう。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Dockerでコンテナの作成とその接続設定(Laravelでウェブアプリを作ろう②)

データベースを利用するためにはアプリケーションサーバーとデータベースサーバーを接続しなければいけません。データベースの情報を作っているとき(docker-compose.yml)に接続情報(.env)についても記載してしまいます。 データベースを作成 Docker上にservice名をdbという名前で作成し、test_dbデータベースを作成、test_userというユーザーをpasswordというパスワードで作成してください。 docker-compose.yml version: '3' services: db: image: mysql:5.7 environment: MYSQL_ROOT_PASSWORD: root MYSQL_DATABASE: test_db MYSQL_USER: test_user MYSQL_PASSWORD: password TZ: 'Asia/Tokyo' volumes: - ./docker/db/sql:/docker-entrypoint-initdb.d ports: - 3306:3306 versiondocker-composeのバージョン services立ち上げるコンテナのホスト名 image使うイメージの種類(:バージョン) environtmen環境変数- MYSQL_ROOT_PASSWORD:ルートアカウントのパスワード- MYSQL_DATABASE:データベース名- MYSQL_USER:作成するユーザー名- MYSQL_PASSWORD:上記のユーザーのパスワード- TZ:タイムゾーン volumes初期化するボリュームのパス ports使用するポート(3306が多い) 接続設定 dockerに接続するための情報を記載する (基本的にはdocker-compose.ymlに記載してある内容をコピーする) .env DB_CONNECTION=mysql DB_HOST=db DB_PORT=3306 DB_DATABASE=test DB_USERNAME=test_user DB_PASSWORD=password DB_CONNECTIONdocker-compose.ymlで立ち上げるデータベースの種類 DB_HOSTdocker-compose.ymlの[services] DB_PORTdocker-compose.ymlの[ports] DB_DATABASEdocker-compose.ymlの[ports] DB_USERNAMEdocker-compose.ymlの[MYSQL_USER] DB_PASSWORDdocker-compose.ymlの[MYSQL_PASSWORD]
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ループ内の要素をすべて書き換えたい

例えばforeach内のテキストを、innerHTMLですべて書き換えたい場合の方法 hoge.php @foreach($hoges as $hoge) <p class="rewrite">これから変更されます</p> @endforeach hoge.js var target = document.getElementsByClassName("rewrite") for(var i = 0; i < target.length; i++){ target[i].innerHTML = "<p>すべて変更されました〜</p>" }
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

全角・半角カタカナのバリデーションルール設定方法(正規表現)

はじめに ユーザー登録機能等を実装する際のバリデーションルールに、例えば 氏名のフリガナには全角カタカナを、 口座名義には半角カタカナのみを入力させるようにしたい時があると思います。 そんな時に、どのような正規表現を使えば良いのかをご紹介します。 全角カタカナのバリデーションルール 全角カタカナのバリデーションルールを設定するときは、以下のように正規表現を使うと、 全角カタカナと、全角カタカナ小文字、長音記号(ー)のみを許容するようにできます。 /^[ァ-ヴー]+$/u キモとなる部分は[ァ-ヴー]の部分ですが、この部分の意味としては ァ-ヴは、文字コードの「ァ」から「ヴ」までの全角カタカナを意味し、ーはまんま長音記号「ー」を意味しています。 なお、全角カタカナの文字コードの順番としては、以下のようになっています。 ァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶ このうち、小文字の「ァ」から始まって、最後は「ヴ」までの範囲の全角カタカナが対象となっています。 カタカナの並び順って、綺麗に「アイウエオ」や「ァィゥェォ」、「カキクケコ」等となってはいないのですね。 ちゃんとマッチしてるかチェック↓ Rubularというサイトで正規表現がマッチしているかを簡単に確認できるので便利です? なお、最後の「ヵ」、「ヶ」については、 「3カ所」や「1ヶ月」などに使われる文字なのですが、フリガナ等のカタカナとして含めたくないことの方が多いのではないかなと思います。 もし含めたい場合は、正規表現を /^[ァ-ヶー]+$/u とします。 ちなみに、全角カタカナの正規表現として [ァ-ン]というものも見かけますが、この場合「ヴ」が含まれなくなってしまいます。 半角カタカナのバリデーションルール 半角カタカナのバリデーションルールを設定するときは、以下のように正規表現を使うと、 半角カタカナと、半角カタカナ小文字、半角の長音記号(-)のみを許容するようにできます。 /^[ヲ-゚]+$/u キモとなる部分は[ヲ-゚]の部分ですが、この部分の意味としては ヲ-゚は、文字コードの「ヲ」から「゜」までの半角カタカナを意味します。 (濁点「゛」、半濁点「゜」の半角カタカナも含む) なお、半角カタカナの文字コードの順番としては、以下のようになっています。 ヲァィゥェォャュョッーアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘノマミムメモヤユヨラリルレヒロワン゙゚ ちゃんとマッチしてるかチェック↓ 正規表現についてとても参考になる記事 そもそも正規表現のルールがよくわからん!基礎から学びたい! という場合は、こちらのQiita記事が初心者向けにかなり丁寧に解説されていて、参考になりました。 初心者歓迎!手と目で覚える正規表現入門・その1「さまざまな形式の電話番号を検索しよう」
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む