スポンサーリンク

「React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発」を読んでみて

React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発
原 一浩  (著), taisa  (著), 小松 大輔 (著), 永井 孝  (著), & 4 その他
技術評論社 (2018/5/9)

ソースコードは、以下に記載されているので大変ありがたい。

https://github.com/okachijs/jsframeworkbook/tree/master/3_7_angular

(開発環境)(構築方法はこちら1こちら2へ)
Windows 8.1 Pro
VisualStudioCode 1.23.1
node v8.11.2
npm v6.1.0

上記の本の3分の2くらいを写経しながら読んでみたので、感想を書いてみます。

Firebase+React, Firebase+Angular, Firebase+Vue.js, Firebase+React nativeで同じチャットサイト(or アプリ)を作成しているソースコードの解説が書いてある。

作成できるチャットサイトは、完成形ではなく、「特定のチャンネルにメッセージを投稿できるようになるまで」のものである。それでも、ほぼ全く同じサイトを、

react@16.2.0

Angular@5.2.0

Vue@2.9.5

でソースコードとともに、解説してくださっているのは、この3つのJavascriptフロントエンドフレームワークを比較しゃすいという意味で、画期的だと思った。

以下に、ど素人の私が、Firebaseによるチャットサーバ構築、React, Angularによるチャットフロントエンドサイト構築について写経した際のリンクとともに感想を記載します。

●FirebaseでチャットアプリAPIサーバの実装(第5章)
  → http://twosquirrel.mints.ne.jp/?p=22789

この章は、Firebaseの実用的な使用方法がソースコードとともに掲載されていて、非常にありがたかったです。この章で作成したFirebaseサーバを、後の、React,Angular,Vueによるフロントエンドアプリ作成の際に利用します。

●Reactでチャットサイト作成(第6章)
0.Reactの準備 → http://twosquirrel.mints.ne.jp/?p=22822
1.チャンネル一覧Componentの実装
2.Routing設定Componentを実装。 → http://twosquirrel.mints.ne.jp/?p=22854
3.メッセージフィードComponentを実装 → http://twosquirrel.mints.ne.jp/?p=22925
4.チャンネル詳細にComponentを実装。このとき、Routing設定を更新。
5.メッセージフォームComponentを実装 → http://twosquirrel.mints.ne.jp/?p=23025

正直、ReactはAngularやVueと比べて、全体的に難しい気がしました。

なんか読んでいて、写経していてスッキリしませんでした。

●Angular5でチャットサイト作成(第7章)
1.Angular CLIによるプロジェクト作成 → http://twosquirrel.mints.ne.jp/?p=23088
2.Angular Materialの導入
3.チャンネル一覧の実装
4.ルーティングの設定
5.メッセージフィードの実装 → http://twosquirrel.mints.ne.jp/?p=23182
6.メッセージフォームの実装 → http://twosquirrel.mints.ne.jp/?p=23274
7.親子関係にないコンポーネント間の連携

個人的に、もともと、Angular2によるモダンWeb開発や、Ionicで作る モバイルアプリ制作入門という本を読んでいたこともあって、3つの中ではこれが一番分かりやすかった。

Angularは、サービスという名前でロジック部分を分けて考えられるので、特定のコンポーネントAから、親子関係にない、別のコンポーネントBへのデータの受け渡しがしやすい印象を持った。

他にも、ReactやVueにいいところはあるのだろうが、、、

●Vue.jsでチャットサイト作成(第8章)

第8章 Vue.js入門&実装活用は、チャットアプリの最初の方は、htmlの代わりにpug (昔のjade)という記載方法を利用しており、最初は戸惑ったが、pug、慣れれば使いやすそうであった。

Angularに標準でpugが採用されるようになったら、勉強しようかな。。。

結局、ロジックをかくところでは、vuexという、reduxのような、一つのコンポーネントにファイルを4個くらい作る必要が出てきて閉口した。

ただ、この章に記載があったが、Vue.jsでは、「htmlの部分はpugで記載したい!」とか、「cssのところはscssでやりたい!」とか、いろいろ、場合分けが比較的容易にできそうな雰囲気は感じた。

●React Nativeでスマホアプリ作成(第9章)

さらっと読んでみただけで、写経していないが、React Nativeはまだ環境構築が非常に面倒で難しそうであった。個人的にReactが好きでないこともあり、「スアホアプリはAngularの章を参考にIonicで作成すればいいかなあ?」と思って、React Nativeのところは写経する気がおこらなかった。

ちゃんと読んで写経したりすれば、React Nativeの良さが分かったのかもしれない。。。

<感想まとめ>

全体的に、章ごとに、異なる人が描いているので、統一性はない感じである。

Javascriptを少しだけ触ったことはあるが、ReacやAngularに入門しようとして挫折した人向けといった感じの本であった。

また、最初の方のECMAScriptの雑多な説明や、各章の説明のところ(たとえば、Angularの章では、AngularJS(Version1)から、Angular2への移行の方法などの記載があったが、この本を読むレベル人(超初心者のはず、、、)には関係ない話ではないではないだろうか、、、)が、なんかあまりしっくりこないところが多かった。

また、チャットアプリを、もう少し完成形(個々人の名前やアバターの登録など、ソースコードだけでも)で出してほしかった。

がしかし、繰り返しになるが、

(1)2018年6月時点で、ちゃんと動くソースコードがGitHubにアップロードされている(Angularでの、@angular/common/http の利用方法など)

(2)Firebase+React, Firebase+Angular, Firebase+Vue.jsでほぼ同じアプリを作成しているので、初心者がこの3つに触ってみて、どれを選ぶか決める参考になる

という点は非常に良い点だと思った。