話題のReactを使ってみる。
Reactを使う目的ですが、最も便利な機能として、
大きい企業や優秀な個人が作って、公表している機能を、自分が作った”イマイチ”な
ホームページに組み込み、そこそこ見栄えが良くて便利なホームページに変身させてくれる。
と言うところでしょうか。
もっと説明すると、仮想DOM機能により、ブラウザーに表示される画面の一部分のみを変更させる。
つまり、
”画面をいくつかに分割（コンポーネント化）し、それを組み合わせて全体を構成する。”
という作り方を行う事ができる。
”小っちゃなソフトをみんなでコツコツと作って、大きなものをつくる”
と言うソフトの流行り的な作成方法が実現できる。
分割された画面の一部分が非同期で更新され、いろいろな便利機能をストレスなく実現できる
ホームページが完成する。これをアプリケーションと呼べば、SPA（Single Page Application）
と呼ばれる意味も理解できる。
例えば、病院の位置情報を記載する場合に
当日の天気予報と地図、ついでに現在の交通情報をさりげなく記載する
として、これらの情報をリアルタイムにサクサクと表示してくれる機能をコピペで出来る
としたら、なかなか便利ではないでしょうか？
Reactでよく言われる事
・宣言的なView
宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、
デバッグのしやすいものになります。
要約すると
ライブラリの関数や変数、オブジェクトに処理を表現した名前を付けたので、使うときに見ただけで、
やりたい事が理解できる。
宣言的：ライブラリ処理に対して、処理の特色となるオブジェクトデータを引数で渡し、
独自の結果を得る方法で、処理の内容を知る必要がない。
・コンポーネントベース
自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、これらを組み合わせることで複雑なユーザインターフェイスを構築します。
要約すると
コンポーネントと名付けたブラウザ画面の一部の変化を、少量のデータ通信で更新できるので、
高速で画面の変更が可能となる。コンポーネント内に別のサーバーで管理されているデータを
コンポーネントとして読み込み、あたかも自分で作ったホームページであるかのようい表示できる。
・一度学習すれば、どこでも使える
React と組み合わせて使用する技術に制限はありません。React を使って新しい機能を追加する際に、既存のソースコードを書き換える必要はありません。
要約すると
JavaScriptを踏襲しているので、汎用性が高く、Nodeを使ったサーバー上でも使えます。
と、便利さを謳っています。
これらを使ってブラウザベースの”Webアプリケーション“を作ってみます。
その前にWebサイトとWebアプリケーションの違いですが、
ユーザーを主軸に考えて、
・Webサイトは、情報を観るだけです。静的と呼ばれます。
・Webアプリケーションは、アプリケーションソフトとコミュニケーションがとれます。
動的と呼ばれます。
サンプル作成
簡単なサンプルを作成してみる。
シーケンス図はこんな感じ
APIへのアクセスに必要なIDを隠す為、サーバーを挟んでいます。
ローマ字でtokyoやsaitamaと入力すれば、現在の天気と気温、緯度経度が表示されます。
一連の処理をLaravelを使うと、なかなか便利なので、別ページで記述してみます。
