【React + TypeScript】Laravel のフロントを React にしてみました。~初心にかえって~

こんにちは。

色々と手を出してみるがだいたいは挫折をする john です。

 

 

今回のテーマは

 

 

 

 

YES、初心にかえりました。

 

入社当初にて構築したLEMP環境を利用して

Reactを用いたSPA化にチャレンジしてみました。

 

 

参考：Dockerを用いたLEMP環境構築

 

システム郡の命名に個人的な趣味が垣間見えるかと思いますが

それはさておき、

 

 

 

 

フレームワークではありません。JavaScriptライブラリです。

 

 

 

 

位置づけがいまいち理解できなかったので

私の認識にて図にしてみました。（訂正あれば是非コメントを！）

 

 

つまり、

“React” はあくまでフロントを構成する一部品であって

フロントをコントロールするようなものではないみたいです。

 

 

後述しますが

”React Native” とは枠組みが少し違うようですね。

※当方モバイルアプリ系はネイティブ開発(Java)のみが有識のエンジニアです。

 

 

Reactの優位点としては以下３つ。

 

 

 

 

拡張性は、ちょっと開発者よりの発想ですかね。笑

※SPA(Single Page Application)とは、ブラウザによるページ遷移を行わず、単一のページにてコンテンツの切り替えを行うアプリケーションだそうです。

 

 

 

 

正直、このコンポーネントって呼称分けが私にとって一番理解に時間が掛かった内容ですね。笑

 

 

• コンポーネント（Component）・・・システムの構成要素。
• モジュール（Module）・・・全体の中での部分的なプログラム。
• ライブラリ（Library）・・・よく利用する関数や機能をまとめたファイル。

 

 

え、

じゃあフレームワークもコンポーネントじゃね。。？

 

意味わからん。。。

 

 

ってのを

 

 

私は

視点によって呼称が変わるのかなって解釈に落ち着きました。チガッテタラオシエテ。

 

 

一製品としての観点だと

• コンポーネント：Laravel（PHPフレームワーク）
• モジュール：MySQL（RDB）
• ライブラリ：React（JavaScriptライブラリ）

 

 

アプリケーションとしての観点だと

• コンポーネント：

1. フロントエンド：React（JavaScriptライブラリ）
2. バックエンド：Laravel（PHPフレームワーク）
3. データベース：MySQL（RDB）

• モジュール：

1. フロントエンド：react-beutiful-dnd（カード形式UI）
2. バックエンド；curl （外部サイト送受信）
3. データベース：mysqli （DB接続）

• ライブラリ：

1. mysqlnd（mysqliにおけるドライバー）

 

 

プログラムとしての観点（フロントエンドのプログラムを例）とすると

• コンポーネント：react-beutiful-dnd （ドラッグ＆ドロップを行う部品の名称）
• モジュール：DragDropContext （react-beutiful-dnd のモジュール）
• ライブラリ：react-beutiful-dnd（ドラッグ＆ドロップのライブラリ）

 

 

この認識に落とすことで

私は私自身の憤怒から免れました。←

※名称言ったもん勝ちが故の区分けであってっていう、よくある不明瞭感をすごく感じました。

しかもここにインフラ系技術まで乗ってきたらいよいよ大変よね。。。笑

 

 

で、

コンポーネント志向って話を戻すと

まあつまりはUI系の部品がいっぱい使えるってこと！（さっきの内容、いらんね。笑）

 

 

 

 

これが私がReactをフレームワークと誤認した所以。

 

 

“React Native”については、フレームワークのくくりだそうです。基本的には同じ記述をするくせに。←

※”React Native”は、JavaScriptの記述でモバイルアプリが動作するようにコンパイルしてくれるクロスプラットフォームです。

 

 

Reactは、JavaScriptとCSSでアニメーション、つまりはブラウザ上で仮想DOMを構築/レンダリングするのに対して、

ReactNativeは、アニメーション用のAPI経由にてデバイス上にUIを構築/レンダリングするそうです。

 

 

似た名称でありながら違った挙動をする点、

JavaとJavaScriptの違いを彷彿しましたね、私は。笑

 

 

ただ、

React（中身はJavaScript）の有識者であれば、ReactNativeといったモバイルアプリ開発への移行/学習コストも抑えられるといった点での拡張性があるなといった旨で記載しました。

まあこれは、

完全にキャリア観点ですね。はい。笑

 

 

 

 

先程でもちらっと出できたキーワード ”仮想DOM”

 

 

そもそもDOMとは：

　HTMLドキュメントをJavaScriptで操作するための設計図

 

従来のDOM(JavaScript/jQuery_Ajax通信:非同期通信)：

　改めてDOMを一から再構築

 

仮想DOM：

　変更箇所のみ差し替えてDOM構築

 

 

まあ要は多少イニシャルコスト（初回読み込み時間）は掛かるけど、以降は比較的軽い挙動でレンダリング出来る技術って理解でおｋなのかと。

 

 

これら学習した上で構築。。。！

 

 

 

 

はい、

React経由でのcard情報レンダリングで今回は終了です。

 

 

 

 

※ローカル版のTr◯lloが作りたかった。。！

 

 

今後も、どうぞよしなに。