2018年11月25日LaravelではじめてのReact.JSさてさて、このブログではほぼメインでLaravelとVue.JSの話題をお届けしていますが、やはりたまには別のコンセプトで作られたフレームワークを体験するとスキルが向上しますので積極的にトライしていこうと考えています。体験するからにはシェアが大きいフレームワークがいいので今回は「JSフレームワークといったら?」という質問には必ず登場するであろう「React.JS」を触ってみることにしました。実際はReactが登場してすぐ少し使っていたことがあるのですが、その直後に出逢ったVue.JSにすっかり心を奪われてしまいました。LaravelもVueを採用するというニュースもあり完全に移行することにしたという経緯があります。Mixでもreactをサポートしていますので今回はLaravelを使って初めてReact.JSのコードを実行させるまでをまとめてみます。開発の参考にしてくださいね。合わせて読みたい準備ReactがLaravelにインストールされていないと始まりません。必要なパッケージをインストールしていきましょう。Laravelは初期状態でVueを使う形式になっていますので次のコマンドでreactを使うことを明確にします。reactすると次のようなメッセージが表示されreactを使うモードに切り替わりました。scaffolding.あとは通常通りnpmコマンドを実行すればOKです。ちなみに、resources/js内の各ファイルもReact仕様に変わります。--saveとすればVueもインストール可能です。Mixがreactのソースコードをコンパイルできるように、webpack.mix.jsを開いて以下の部分を変更しましょう。'public/js')「こんにちは」と表示させるでは、シンプルに「こんにちは」と表示させるだけの小さなコンポーネントをつくってみましょう。Mixが自動作成することになるapp.jsを読み込んでおきます。Reactのコンポーネントです。resources/js/componentsフォルダの中にHello.jsというファイルを作り次のような内容にします。document.getElementById('hello'));}やっていることはComponentクラスを継承してrender()を指定したクラスをつくり、そのクラスを「擬似的なHTMLタグ」として使っているだけです。これで実行!・・・といきたいところですがこのままでは実行できません。app.jsにこの中身が反映されていないからです。これを実行するためには、resources/js/app.jsを開いて次のコードを追加します。←先ほどつくったHello.jsのことですそして、npmコマンドでコンパイルを実行します。dev完了したら実際にブラウザで確認してみましょう。うまく表示されました。時間で「おはよう」「こんにちは」「こんばんは」を切り替えるでは次にこのコンポーネントを少し改造して、時間帯で表示が切り替わるようにしてみましょう。devを実行し、確認してみます。実行時間は夜だったので「こんばんは!」と表示されました。複数のコンポーネントを表示する続いて、時間帯で切り替わる「あいさつコンポーネント」を使って次の3人への挨拶を一気に表示してみましょう。鈴木さん佐藤さん田中さんまずは、これらの名前が表示できないといけませんのでnameプロパティが使えるようにしましょう。);}追加したのは太字部分の2ヶ所です。プロパティnameの内容を取得し、レンダリングに「●●さん、」を追加しています。次に先ほどの3人の名前が入った疑似HTMLタグを用意します。document.getElementById('hello'));ここで重要なのが、3つの<Hello>タグが<div>タグで囲まれている部分です。render()にはひとつの要素だけしか指定できないからです。次のようにするとエラーが発生します。これはエラーが発生します。document.getElementById('hello'));では実際に確認してみましょう!うまく表示されました。プロパティではなく<Hello>タグの中に名前を入れたい場合は次のようにthis.props.childrenを使います。this.props.children;こうするとタグで囲まれた部分を取得することができます。document.getElementById('hello'));イベントを実行するでは最後に<Hello>を表示だけでなく、クリックできるボタンに変えて実行してみましょう。}}>{name}さん</button>);タグを<h1>タグから<button>タグへ変更し、クリックイベントを追加しています。イベントの中ではクリックされたボタンごとに「●●さん、こんばんは!」というようなアラート表示をするようになっています。実際の画像はこちらです。おわりにということで今回はLaravelでReactを使う方法を紹介しました。個人的にReactでコードを書いたのは久しぶりだったのでほぼ知識ゼロでしたが、いくつ感じたことをまとめてみます。保守もしやすそうです。結局bableが必要なので、フルにES6が使えるVueと似てる部分もあるので学習コストは少なくなる(かな??)ただし、やはりネックはコンパイル時間がいちいちうっとおしい・・・開発スピードが絶対遅くなると感じました。コーディングにテンポってとても大事です。こんな感じでしょうか。メリットばかりですが、一番最後のデメリットが大きいので、おそらくメインでReact.JSを使うことはなさそうです。知らないいい部分が眠っているはずなのでこのブログではReactの探求を続けていきたいと思います。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。