スポンサーリンク

React.js+Fluxを試してみる(0)

JavaScriptのフレームワークが多すぎて、しかも流行りすたりが多すぎる感じで、Qiitaを読んでいても、今やっていることが1年後に使えなくなっていそうだし、わけがわからないので、こんな本を購入して読んでみた。

Javascriptの歴史、Javascriptのフレームワークがなぜ生まれたのかについて、分かりやすく記載されている。さらに、第2章では、react.js+Flux入門の方法が記載されており、540円の価値がおおいにあったと感じた。おすすめ。

Webコンテンツ(ホームページ)を作成する際、

(1)サーバーサイド(データベースなど)

(2)フロントエンド(ユーザーに見せる「見栄え」?)

の両方を開発する必要があるらしい。フロントエンドは基本的には全てブラウザにおまかせしたいところだが、Ruby on Railsでも、css, javascript (, html.erb)を用いてフロントエンドの開発を行う仕様となっている。

以前、Railsで、日付の入力でdatetimepickerを使おうとしたときに、jqueryが必要であった。

 

このフロントエンドの開発において、javascriptが用いられるが、昨今、javascriptのフレームワークが流行したり、すたれたりしているらしい(GoogleはAngularJSを作っておきながら、Angular2という全く別のもの作り、AngularJSを見捨てた(?))。また、javascript自体も、毎年、更新されているらしい。

そんなに、毎年、やりたいことが変わるのか私にはわからない。

Angular2に入門しようとしたが、難しすぎて無理だった。

最近、react.js + Flux (Facebook社が開発?)が流行っているらしいと聞いたので、上記の本を読んでみた。

 

<第1章>Webフロントエンド開発が歩んできた道

Webフロントエンド開発は、本来は、「HTML・CSS・JavaScriptをブラウザ上で読み込む」だけ、とのこと。

1995年 JavaScript誕生 →ブラウザクラッシャー、なつかしい。。。本当に、2016年の最近まで、私にとっては、JavaScriptといえば、ブラウザクラッシャーのイメージしかない。

2000年~2005年頃 Flash全盛期 →面白いFlash動画がたくさんありました!

2005年 Googleマップの登場。 →Googleマップには本当に驚いたし、今でもしょっちゅう使っているが、なんと、これはJavaScriptがふんだんに使われていたとのこと。Googleマップの登場以降、JavaScriptが徐々に存在感を増してきたとのこと。

DOM: Document Object Model   →JavaScriptからHTMLを操作する方法

Ajax : Asynchronous JavaScript + XML(2016年現在ではjson形式が多いとのこと)
①ユーザーからAPIサーバへ、HTTPリクエスト(Javascript)
②APIサーバからユーザーへ、json形式のデータを配布
③DOM操作

このAjaxの考え方は、大昔に見たNHKのProjecXでやっていた、「ATOKの漢字変換のスピードを上げるための方法」に似ていると思った。

1990年頃はパソコン(ワープロ?)の性能が悪かったためか、ひらがなを漢字に変換するのにものすごく時間がかかり、何らかの対策が必要であったとのこと。そこで、ATOKの技術者は、
(それまで)ユーザーがひらがな全部を入力してから、変換候補の漢字をリストアップしていた。
(新しい方法)ユーザーがひらがなを1文字入力した時点で、変換候補の漢字の候補を絞り込んでおいて(メモリに候補リストを読み込むのかな?)、ユーザーがひらがな2文字を入力したら、あらかじめ絞り込んでおいた漢字候補リストの中から、さらに合致する候補を絞り込み、ユーザーが「スペースキー」を押したら、その候補リストを表示する。
という方法で、ひらがなから漢字変換へのスピードをものすごく早くしたとのことであった。(うろ覚えなので正しいのかはわからない)

上記と同様に、Datetimepickerでは、あらかじめ、日付入力の部分をクリックしたら日付選択用カレンダーがポップアップされるように、javascriptをAPIサーバからユーザ側(ブラウザ)にダウンロードしておく。ユーザーが日付入力部分をクリックした瞬間にカレンダーがポップアップされるようになるというメリットがあるのであろう。(ユーザーが日付入力部分をクリックしてから、クリックしたという情報がAPIサーバへ行き、カレンダーの情報をAPIサーバからユーザー側(ブラウザ)側へダウンロードして表示しているようでは、ものすごく時間がかかってやってられないであろう。)

「ユーザーに待たせない」というのが、「非同期通信」のメリットだと思われる。(間違っていたらすみません、、、汗)

JavaScriptフレームワーク

2005年 prototype.jsが登場

2010年 jQueryが登場 → 2016年時点でも、すごく流行っているらしい。たしかに、以下の本を買ってみて読んでみたこともあった。実際には手は動かさなかったけど、読んでいて面白かった。

2009年 Node.jsの登場。サーバーサイドJavaScript環境。それまでは、JavaScriptはブラウザ上で動作する言語であったのが、サーバー上でも動作する言語となり、理論上は、Webアプリケーションのサーバーサイドとフロントエンド両方をJavaScriptで書くことができるようになった。

2011年頃 MVCフレームワークの一つであるBackbone.jsが流行。

2014年頃 双方向データバインディング(?)のAngular.js, Knockout.js, Vue.jsが流行。

2016年頃 Virtual DOM(?)の、React.jsの流行。大規模開発向けらしい。同時に、Fluxアーキテクチャ(具体的にはfluxやreduxなど)が提唱される。(?)

もう多すぎてわけわからん。Javascriptなんて勉強する意味ないんじゃない?しかし、下記の本(再掲)での結びの言葉として、とても重要なことが書かれている。

上記の本の筆者によれば、「Webフロントエンド開発に歴史の中で、数多くのプロダクトが登場してきたのは課題を解決するためである。自分が開発しようとしているWebアプリケーションが大規模ではく、今後も拡張する予定がないものなどであれば、2016年現在でも、JQuery一つあれば十分でしょう。」とのこと。

この一文を読んだだけでも、この本を購入してよかったと思った。

次は、上記の本の<第2章:TODOアプリを開発してみよう>を写経してみたい。

ソースコードは、以下にあるらしい。

https://github.com/shoma2da/simple-todo-app

Javascript

Posted by twosquirrel