CODEPREPで勉強しよう その8
その1(CODEPREPとは/学習予定ブック紹介)はこちら
その2(Sass,Bootstrap,Fontawesome編)はこちら
その3(HTML&CSS実践編 前編)はこちら
その4(HTML&CSS実践編 後編)はこちら
その5(JavaScript編 前編)はこちら
その6(JavaScript編 後編)はこちら
その7(Three.js,moment.js,Canvas編)はこちら
その9(Rust,GoogleMap,Webカメラ編)はこちら
その10(Ruby,Scala編)はこちら
その11(CODEPREPやってみた感想等)はこちら
CODEPREP勉強中です
そろそろCODEPREPさんの提供期間が終わりそう(2018/09/30に終了)だと戦々恐々しながら日々ブックをこなしています。
やりたいんだけどね、他にもやりたいことが…うう、がんばるぞい！
さて、今回はReactとVue.jsにまつわるブックをやっていこうかなと思います。
具体的には下記のブックを…。
- はじめてのReact
- Reactで作るTodoアプリ
- はじめてのVue.js
- Vue.jsで作り直すアコーディオンパネル
- Vue.js で作るインクリメンタルサーチ
前回もそうでしたが、ReactやVue.jsに関する事前知識が全くない状態で取り組むので…。
「そもそも〇〇とは?」という項目の章が大量にできそうな予感…また長くなりますよ〜記事。
何はともあれ、早速学んだブックの感想やらまとめをば!
各ブックの感想など
いつもの様に、各ブックで学んだことのまとめや感想などを書き連ねていきたいと思います。
はじめてのReact
今回のブックでは、JavaScriptのUIライブラリの1つ、Reactの基本的な使い方等を学びました。
reactjs.org
※なお、このブックではReactのv15.6を使い学習しました。
2018/09/20段階での最新Verは、v16.5.2となっています。
さて、ここからはReactに関して少々まとめようか…と思いましたが、ググった際にとっても素晴らしい記事やらスライドやらがぼろぼろ出てきましたので…。
そちらのリンクを貼っておくだけにとどめておこうかと思います。
(下手に自分でまとめて間違った認識を蔓延させるのもアレですし…。)
※こちらはReactについて…というよりは、JSの今までの歴史的なのをまとめてくださっているものです。 めっちゃコミカルで面白く、楽しく読めるので参考に…。
余談-jQueryに関して
Reactについて調べてると「jQueryなんて必要ないお!」という記事が多く出てくるんですよね本当(上記参考記事とかもそうですね)。
記事内に貼られていたリンクの記事の中には、jQueryのメリットやデメリットを述べてる記事も結構見受けられました。
筆者はいまだにjQueryで〜とかって考えちゃう超レガシー人間だったので、色々参考にさせていただきました…。
その中でも面白かったりためになった記事やスライド等のリンクをここに残しておこうかと。
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット | dwango creators' blog（ドワンゴクリエイターズブログ）
こちらはすっごくいい意味で色々と強烈なスライドでした。
声あげて笑った箇所がいくつあったか…。
タイトルから笑わせにくるところもポイント高いですな。
こちらはjQueryで用意されているメソッド等の処理を、ネイティブなJavaScriptで書き起こしたサンプルコードが大量に載っているサイトです。
ここを見るとjQueryの恩恵をひしひしと感じられますお…。
You Might Not Need jQuery
Reactで作るTodoアプリ
今回のブックでは、前回の基礎編を踏まえたReactの実践編ということで…。
下記のようなTodoアプリを作るものでした…と、いつもならCODEPENに書き起こしたのを掲載するところですが、今回はやめておきます。
※何時もであれば、この様な「作ってみよう」系統のブックだと、PlayGroundという作ったものを自由に編集してみようというセクションがあるのですが…。
今回のブックではなかったんですよね。
もしかしたらそうやって他の人にいじってもらうときつい内容があるのかなと思い、やめておきました。
にしてもやはり、実際に作りながら学ぶと理解が早い感じがしますね。
入門編の後、すぐにこのブックに取り掛かったのは正解でした。
今の所Webアプリを作る予定は…ありますが、あれは恐らくReact使わない気がするので…。
本格的にReactに触れる機会はまだまだ先だとは思いますが、こうして入門だけでも出来たのはすごくありがたかったです…感謝！
はじめてのVue.js
今回のブックでは、JavaScriptのUIライブラリの1つ、Vue.jsの基本的な使い方等を学びました。
なお、Vue.jsには日本語の公式ドキュメントが存在します。
この手のフレームワークでは珍しい感じもしますが…いや本当ありがたいことですよ。
jp.vuejs.org
とりあえず今回のブックで一通りVue.jsを学び、Todoアプリも作った訳ですが…。
正直…うん、さっきのReactと似ているような…。
ただ、個人的にはReactの方がいいかなとも思いました。
(まだCODEPREPさんのブックでしか、両者には触れてないのでなんとも言えませんが…)
他の記事を見ると叩かれている印象も多い、JSXファイル…HTMLタグとJSが混在しているあの記法が、自分としては扱いやすいなと思ったり。
Vue.jsだと、HTMLタグはHTMLタグ、JSはJS…と切り分けられていますからね。
少し大きめなプロジェクトになると、分離してる方がやりやすそうとは思いますが、小さなプロジェクトならまとめてかける方がありがたいですし…。
それに、Vue.jsやってると本来のHTMLにはないタグを結構書きますが、それにめっちゃ抵抗があると言うか…混同しそうだなぁとも思ったり。
まぁ筆者の技術力ではあまり語れないし、先人たちはどう思っているのだろう…と、ReactとVue.jsの比較記事を色々漁ってみました。
比較記事の中には、これもJSライブラリの1つの「Angular」というものとも比較してるものがあり…。
というかAngularの方がReactやVue.jsよりも有名とする記事もありました。まぁ天下のGoogleさんが作ってるものですからね…。
とりあえずまずは、このAngularについてちょっとまとめてみようと思います。
Angularとは
AngularはGoogleと個人や企業のコミュニティによって開発されている、フロントエンドWebアプリケーション用のフレームワークです。
シングルページアプリケーション(SPA)の開発が可能なフレームワークで、このフレームワークだけで全ての機能が完結する「フルスタックスレームワーク」とのこと。
初版は、Miško HeveryとAdam Abronsによって2009年に発表され、2012年6月にVer1.0.0がリリースされました。
その後、2016年9月にはVer1.xとの互換性のないVer2.0がリリースされており、こちらではJavaScriptではなくTypeScriptを使って作る様に推奨されているみたいです。
※公式のドキュメント見ても、基本TypeScript前提で書かれてました…。
また、AngularはデータベースにMongoDB、ウェブアプリケーションサーバーフレームワークにExpress.js、フロントエンドフレームワークにAngular.js、 実行環境にNode.jsを用いて構成されるMEANスタック)のフロントエンド部分であるそうな…。
※MEANについてはこちらを(Wikipediaからの抜粋です)
MEANを採用すると、サーバサイドからクライアントサイドまでの全ての実装作業がJavaScriptとJSONのみで完結できる。
従って、Webアプリにおける内部処理の全工程を単一の言語で記述でき、データベースの入出力におけるデータ変換も行う必要がない。
また、サーバの役割を果たすNode.jsが、シングルスレッド、ノンブロッキングI/Oにより、省メモリかつ高速で動作する。
従って、開発作業の効率化やサーバマシンの大幅な負荷低減を実現できる。
これらの非常に大きなメリットを理由に、LAMPやRuby on Railsの次世代を担うスタックであると言われている。[要出典]
MEANにおける開発作業を効率化するため、スクリプトをビルドするためのGrunt、クライアント・サイドの依存関係管理をするBower、Scaffolding（Webアプリケーション開発の足場となる構造の作成）を行うYoといったツールが開発され、その上でGrunt、Bower、Yoのワークフローを制御するYEOMAN等も開発されている。
従って、MEANとYEOMAN等の関連ツール群は、所々に機能不足や破綻が見られるものの、フルスタックフレームワークの先駆者であるRuby on Railsにも匹敵するWebアプリケーションフレームワークに成長しつつある。[要出典]
なお、Githubのreleaseを見ると、なんとも盛んにアップデートが行われているみたいでした…このスピード感はすごい。
Releases · angular/angular · GitHub
また、公式ドキュメントのQuickStartを見てみた感じ、何となくRuby on Railsに近い印象を受けました。
Angular
提供されているCLIを使ってng new my-appと叩き、プロジェクトを作成。
するといっぱいファイルが生成されて、その中の必要なファイルを弄って…と言った感じの様です。
少なくともReactやVue.jsの様な少ないファイルでアプリが作れる感じではなさそう…。
他にも色々と調べていくと、このAngularとRuby on Railsを組み合わせてアプリを作ろうという記事も見受けられました。
(RailsをAPIサーバーとして機能させ、Angularでフロントエンド部分を行う感じの)
RailsアプリとAngularをうまく組み合わせたWebアプリケーション - Practical Web Coding
https://blog.mismithportfolio.com/web/rails-angular
新しい技術を組み合わせて新しいものを作る…今の時代っぽくて筆者は結構好きです。
まぁその分、勉強だったり日々の情報収拾をしないとついていけなくなっちゃいますけどね。
Vue.js vs. React vs. Angular
さて、本題に入りましょう。この3つのフレームワーク…どの様に違うのか。
自分でまとめてみようかと思いましたが…うん、自分でまとめるよりもすでにわかりやすくまとめていらっしゃった記事がたくさんあったので…。
強いていうなら…。
- Angular: 大規模プロジェクト向け/学習コスト高い(TypeScript等の知識必要)
- React: 中大規模プロジェクト向け/学習コスト中くらい/JSX形式に慣れる必要が
- Vue.js: 小中規模プロジェクト向け/学習コスト小(その分複雑なことはやりにくい)/HTMLベースの既存Appに流し込むならコレ
といった感じでしょうか。
ともあれこの件に関しては、参考になった記事のリンクを貼っておくに留めておきます。
Angular、React、Vue.jsを一通り使ってみた個人的な感想｜OAR CODE
こちらは3つのライブラリ・フレームワークについてのざっくりとした情報が載っていました。
非常に読みやすく簡潔にまとまっているので…さらっと見たい場合に非常に参考になるかと！
【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口
こちらは3つのライブラリ・フレームワークについての比較情報等が本当にたくさん載ってます。すごい量です…本当すごい、有難や…。
ちょっと長いかもしれませんが、ここまでまとめてくださってる記事はそう無いと思うので…是非是非！！
他のフレームワークとの比較 — Vue.js
こちらはVue.jsの公式ドキュメント(日本版)に掲載されている比較記事です。
英語を日本語に訳した都合上、少々読みにくい文体となってますが…。
また、Vue公式である以上、どうしてもVue寄りの意見にはなってます。
ですが、参考になる記事であることは間違い無いので…是非是非。
ReactとVueのどちらを選ぶか - Qiita
こちらはReactとVue.jsに関する比較記事です。
ちょっと(お察し)な感じの記事ですが、記事のコメントにもある様に要点はしっかり抑えられている様な感じがします…是非是非。
Vue.jsで作り直すアコーディオンパネル
今回のブックでは、前回の基礎編を踏まえたVue.jsの実践編ということで…。
CODEPREPさんの提供ブック「jQueryとCSS3で作るアコーディオンパネル」を、Vue.jsでリメイクしようというブックでした。
どんな風なものができたかを、いつもならCODEPENに書き起こしたのを掲載するところですが…。
先にあった「Reactで作るTodoアプリ」と同じく、PlayGroundが設けられていなかったので、今回もやめておきます。
にしてもやはり…Vue.jsには慣れません。
既存のHTMLタグにはないタグやら属性やらを書くのにここまで抵抗を感じるとは…びっくりです。頭固いのかな…。
あともう1つ、Vue.jsの実践編ブックをやる予定ですが…。
そこでVue.jsの魅力に気づけなければ、もう触ることはないかもしれません。
(お仕事等で使うことになれば別だとは思いますが)
Vue.js で作るインクリメンタルサーチ
今回のブックでは、Vue.jsでインクリメンタルサーチを作るブックでした。
※インクリメンタルサーチについてはこちらを
インクリメンタルサーチ(英語: incremental search)は、アプリケーションにおける検索方法のひとつ。
通常、単語の検索を行うには、検索したい文字列を完全に入力してから開始させなければならない。
しかし、インクリメンタルサーチでは、検索したい文字列を1文字入力するたびに自動的に検索を開始する。
辞書アプリケーションなどではあてはまるものすべてがリストアップされ、エディタであれば即近の項目にジャンプする。
文字を追加入力することにより絞り込みも行える。
このことにより、検索単語のすべてを打ち込む必要がなく、入力の誤りへの対処も即座に行うことができ、人間側の手間を省くことが期待できる。
※参考(Wikipedia): インクリメンタルサーチ - Wikipedia
どんな風なものができたかについては…。
先のブックの様にPlayGroundが設けられていなかったので、今回もやめておきます。
また、今回Vue.jsを扱った際、<transition-group>が結構便利だなぁと思いました。
せっかくなのでちょっとまとめたいと思います。
transition-group
※公式ドキュメント: https://jp.vuejs.org/v2/guide/transitions.html#リストトランジション
<transition-group>は、この配下にある子要素の順番や数が変わった時に、その移動をスムーズにアニメーションさせる機能です。
具体的には、子要素にv-moveやv-enterなどのクラスが実装され、そのクラスにCSSでアニメーションを設定することで、子要素に動きを持たせることが可能になります。
例えば下記の様なクラスが提供されています。
.v-mode: 要素が動いた時のアニメーション設定v-enter: 要素が出現する際のアニメーション前設定v-enter-to: 要素が出現する際のアニメーション後指定v-enter-active: 要素が出現する際のアニメーション中指定v-leave: 要素が消える際のアニメーション前指定v-leave-to: 要素が消える際のアニメーション後指定v-leave-active: 要素が消える際のアニメーション中指定
例として、今回のブックでは下記の様なCSSを組みました。
※長いので折り畳んでます
展開する
/* ---------------------- transition-group ------------------------ */ .v-move { transition: transform 300ms ease-out; } .v-enter-active { transition: 300ms; } .v-enter { opacity: 0; } .v-enter-to { opacity: 1; } .v-leave-active { transition: 300ms; } .v-leave { opacity: 1; } .v-leave-to { opacity: 0; }
※ここからは筆者の感想となります、あしからず
要素が消えたり出現したりするのを、手軽に設定できるのはすごい魅力的だなぁと思いました。
これをjQueryで実装するのは…addClassとかでごちゃごちゃすればいけますが、ここまで手軽にはできませんしね。
とても素敵な機能だとは思いましたが…うーん、これだけではまだVue.jsを本格的にやろうという気にはなりません…。
Reactの方にどうしても魅力が…何だか申し訳ない。
どこかでまた、Vue.jsの魅力に気づけたらいいなぁ。
次回の記事について
次回記事では、RustやGoogleMap、Webカメラ辺りに関するブックを見ていきたいと思います。
特にGoogleMapやWebカメラは、それを用いたWebアプリケーションはいっぱいありますからね…非常にためになりそうな予感!
ではでは|дﾟ)
