LaravelでReactのサンプルプログラムを表示させてみる
新しいプログラミングに触れるには、まず実行環境を作ってサンプルを動かしてみることである。 今回は実際にLaravelでReactの実行環境を作りReactのサンプルを動かしてみます。
0. 実行環境を構築してみる
LaravelでReact環境構築するのは、以下に掲載してますので、参考にしてください。
pgslit.hatenablog.com pgslit.hatenablog.com
1. ReactサンプルプログラムのJavaScriptファイルを作成する
今回は、以下Reactの公式ページの時計のサンプルプログラムを表示させてみます。 ja.reactjs.org
まずプロジェクトフォルダ内の”resources\js\components”に"TestReact.js"というファイルを作成します。
その中に公式ページの以下、時計のサンプルプログラムをコピーし保存します。
import React from 'react'; import ReactDOM from 'react-dom'; class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } ReactDOM.render( <Clock />, document.getElementById('root') );
2. "app.js"に作成したReactファイルを記述する
"resources\js\app.js"に以下を追記してください。 ※Exampleの行はコメントアウトしといてください。バッティングするといろいろ面倒なので。
//require('./components/Example');
require('./components/TestReact.js');
ReactのソースはBabelでコンパイルされ”public\js\app.js”に書き込まれますが、Laravelの初期設定では、"resources\js\app.js"に記述したソースがコンパイル対象となっています。
3. Reactのソースをコンパイルする
コンパイルはシェルで以下のようにタイプすればコンパイルできます。
#npm run dev
もしくは
#npm run watch
上のほうが、ソースを更新するたびにコンパイルしてくれるので便利です。ただし、ずっと実行させておく形となりますので、この辺は好みになるのかなー
4. Bladeファイルを編集する
最後に、"home.blade.php"を編集します。card-body内に以下を記載すればOKです。
<div id="root"></div>
これで、完了となります。サーバーを起動して、ホーム画面にアクセスしてみてください。問題なければ時計が表示されるはずです。
上記のように、ReactDOMで、Bladeファイルにコンポーネント感覚で、組み込めるのでいいですね。
5. まとめ
サンプルプログラムが表示できると、なんだか、安心感がでてきますね。サンプルプログラムをいろいろいじって、引き続き勉強していきたいと思います。
Reactを知る
ReactについてはLaravelのカテゴリーで適当に扱おうと思ってましたが、煩雑になりそうだったので独立したカテゴリーにすることにしました。
今、Reactも勉強中なのですが、Reactについて学ぼうと、公式ページのチュートリアルからやり始めました。しかしながら、オッサンの頭ではなかなかReactについて身になっていく感じがしませんでした。
こういう時はたいていの場合、段取りをスキップしすぎているときです。チュートリアルから始めるといい場合もありますが、私にとっては飛ばしすぎだと思いました。
そこで、Reactってそもそもな何なのかというところから、見ていこうと思います。
Reactって何？
wikiによれば"Facebookとコミュニティによって開発されているユーザインタフェース構築のためのJavaScriptライブラリ"らしい、なるほどこういうのを聞くとすごく親近感がわくし、人気がでるのもなんとなくわかりますね。
Reactの使うメリットとは?
いろいろとメリットはありますが、小生的には公式ページに記載されている"アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。"というところが一番の肝だと思ってます。
私が、Reactを使うとしたら、ここが生かせるアプリケーション開発に使いたいですね。
Reactの文法はJavaScriptなのか？
ReactはJavaScriptですが、ECMAScript 2015(ES6)というJavaScript規格とJSXというJavaScriptの構文の拡張によりコーディングしていく形となります。
ここが重要で、ここをすっ飛ばしてReactのチュートリアルやっていて、まったく頭にはいってきませんでした。
特に、ES6に関する勉強はある程度しといたほうがいいです。Reactの公式ページにも一応、解説されてますが、ES6の基礎ないと私にはきつかったです。
JavaScriptに規格があることは知っていたのですが、Reactやるまでほとんど意識することはありませんでした。基本的に現在のブラウザでサポートされているJavaScriptの規格はES5でReactはES6規格で記述したJavaScriptをBabelという下位のJavaScript構文に変換するトランスコンパイラを用いて変換しこの変換されたJavaScriptを利用するイメージです。尚、JSXはBabel標準では変換できないので、JSXも変換できるプラグインを含んだBabelを利用します。
しかし、ES5に慣れすぎていて、ES6のコーディングをミスることが多いです。先入観というかなんというか、まだまだ先は長そうです。
普段からES5やJqueryに慣れている人はES6で新しくなった構文をよく理解しておくことをお勧めします。
次回からLaravelでReactを扱うための手順等、学んでいきたいと思います。Laravel使うことはお許しください。Reactメインで業務システム構築する自身まったくないので・・。
では今日はここまで
バリデーションにカスタマイズルールを適用してみる
前回、新規登録画面にバリデーションをつけました。今回はこのバリデーションにカスタマイズルールを加えてみようと思います。
作成するカスタマイズルール
作成するルールは登録する顧客IDがすでにDBに存在している場合はエラーメッセージを出すようにするものです。DBを参照してチェックすることも割とあるので、今回はこの辺も勉強したいと思います。
カスタマイズルールファイルを作成する
カスタマイズルールはまずカスタマイズルール記述したルールファイルを作成しそのクラスをリクエストファイルのルールに加えることで実装できます。
ルールファイルは以下のようにArtisanで作成できます。
#php artisan make:rule MstCustomerIdRule
ルールのファイル名は"MstCustomerIdRule"としました。
ルールファイルのpassesとmessage関数を以下のように記述します。
public function passes($attribute, $value) { return Customer::where('customer_id', $value)->doesntExist(); } public function message() { return 'すでにこの顧客IDは登録されております。'; }
基本的にpasses関数の中にバリデーションルールを記載します。この関数でfalseを返せば、ルールに違反したということになります。
重複判定については EloquentのdoesntExistで完結な記述にしてみました。非常に楽ですね。
尚、DBを参照しますので、ルールファイルに以下のようにモデルクラスをインポートしておく必要あります。
use App\Models\Customer;
リクエストファイルとの紐づけ
まずリクエストファイルにルールファイルのクラスをインポートするために以下を記述します。
use App\Rules\MstCustomerIdRule;
次にすでに実装したリクエストファイルのルールを以下のように変更します。
'customer_id' => ['required','min:10','max:10',new MstCustomerIdRule]
既存ルールのようにカスタマイズルールクラスのインスタンスを指定します。
注意が必要なのは、既存ルールの場合は配列でなくバリデーションルールを"|"で区切られた形で指定できるのですが、カスタマイズルールクラスのインスタンスは配列でないとエラーになります。最初、少しはまってしましました・・。
以上で実装完了です。
まとめ
カスタマイズルールも比較的容易に実装できました。また、ロジックも汚さず実装できますので、非常にいいですね。
新規登録画面にバリデーションをつけてみる
今回は新規登録画面にバリデーションをつけてみようと思います。
システムにおいてバリデーションは入力ミスを防ぐために重要でありなくてはならないものです。Laravelにもバリデーション機能がありますので、どのように実装するか見ていきます。
どのようなバリデーションをつけるか
勉強ということで、今回は、登録ボタンを押すと、顧客IDが10桁以外の場合、エラーメッセージを顧客IDの入力ボックスの下に出すようにします。
Bladeファイルの編集
まず初めにBladeファイルを編集します。エラーメッセージはBootstrapの機能を利用し表示させるよにしてみます。
すでに、入力画面を作った際に記述しておりましたが、以下のように、入力ボックスのclassに"is-invalid"を記述し、classに"invalid-feedback"を指定したdivタグに記述したメッセージを入れると、Bootstrapのエラーメッセージを表示できます。"@error"ディレクティブはバリデーションでエラーが発生した場合に真になります。よって、エラーがでたときのみエラーメッセージを表示させることができます。
<label for="customer_id">顧客ID</label> <input name="customer_id" type="number" class="form-control @error('customer_id') is-invalid @enderror" id="customer_id" placeholder="顧客IDを入力してください" value="{{ old('customer_id') }}" required> @error('customer_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
リクエストファイルの作成
次にリクエストファイルを作成します。
リクエストファイルの中にバリデーションルールを記述し、データがPostされた際、このリクエストファイルを通してチェックを行います。リクエストファイルを作成せず、直接コントローラーに記述できるようですが、コントローラーになんでもかんでも記述することはよくないため、ファイルは分けといたほうがいいでしょう。
リクエストファイルは以下のようにArtisanで作成できます。
#php artisan make:request MstCustomerRequest
リクエストファイルのルールとカスタマイズメッセージを以下のように記述します。
public function rules() { return [ 'customer_id' => ['required','min:10','max:10'], ]; } public function messages() { return [ 'customer_id.min' => '顧客IDは10桁です。', 'customer_id.max' => '顧客IDは10桁です。', ]; }
rules関数にルールを記述します。ルールはいろいろと用意されてますが、カスタマイズルールをつくることもできます。実際はカスタマイズルールのほうが主になるかもしれません。
messages関数はなくても動作します。ただし、その場合は、言語ファイルのデフォルトメッセージがでてしまい、言語ファイルを日本語化していても、分かり難いメッセージとなりますので、messages関数を用いてメッセージをカスタマイズしてます。
このルールのところはすこし変わった記述でとっつきにくいかもしれないですが、すぐに慣れます。
コントローラとリクエストファイルの紐づけ
次にコントローラー内のstore関数とリクエストファイルを紐づけます。
まずMstCustomerController.php内に作成したリクエストクラスをuse演算子を以下のように記述しインポートします。
use App\Http\Requests\MstCustomerRequest;
次にstore関数の引数をリクエストクラスの型宣言(タイプヒント?)に変更します。‘
public function store(MstCustomerRequest $request)
以上で、今回やりたかったことは終わりです。
まとめ
なんか、これだけでできるなんて、狐につままれた感じですが、ほかの方法でバリデーションを実装することが馬鹿らしくなるほど便利ですね。
次回は、カスタマイズルールも実装してみたいと思います。
開発における最近の横文字は難しい
小生のようなオッサンが最近のモダンな開発を勉強していると、なんだこれと思う横文字が多くでてきます。
昔から、開発言語等は海外で作られることがほとんどなので、横文字は当然あるわけなのですが、最近はものすごいです。
この辺の背景としては、いろんな技術が昔に比べどんどん出てきているので、日本語として定着しないということもあるのかもしれません。
ここで注意せねばならないのは、言葉の意味を曖昧のままにしとくと、まったく頭に入らないということです。
例えばLaravelをやっていると「タイプヒント」という言葉がでてきます。最初これを見て、変数の頭に型を指定することかーという感じで、そういうもんだと流してました。よくよく考えると、「型宣言」のことやんと後でわかったのですが、きちっと言葉の意味を理解してないとまったく頭にはいりません。
すべてが日本語に置き換えれるわけでないですが、その言葉の本質を曖昧にしておくと、なぜ必要なのかなどの本質面が見えてこずに私のようなオッサンでは頭にまったく入ってこないわけです。
特に、わかるようでわからない横文字が一番危険です。まずは翻訳してみて日本語にするとどうなるか見てみるのもいいかもしれません。
