Vue.js勉強会資料作成中(その1)
不肖ながら会社でVue.jsの勉強会を開くことになったので、 作成途中の資料をそれとなく載せておきます。(第1回前編)
Vue.js勉強会 vol.1
Hello Worldから始めるVue.js
対象者
Vue.jsというかJavaScript初心者。 デザイナーも含めるので、基礎の基礎からやってみます。
JavaScriptってなに
PHP と JavaScript の ちがい
項目 | JavaScript | PHP |
---|---|---|
実行環境 | ブラウザで動くので、ファイルを作成するだけでOK。 | サーバーが必要。ファイルだけでは動かない。 |
実行タイミング | 必ずイベントを指定する。ページロード時・クリック時、など | ページ表示のタイミングのみ。 |
HTMLの変更部分 | ページ全部を書き換えなくてもいい。変えたい部分を変更するだけでOK。(非同期) | 1箇所を書き換えるだけでも、1ページ丸々再度描画しないといけない。(同期) |
ページ全部を変えたい時はPHP。 ちょっとだけ変えたい時はJavaScript。
何が違うんですか?
- JavaScript
- jQuery
- Vue.js
ライブラリとフレームワークのちがい
jQueryっていうライブラリ
よく使うものを集めたものがライブラリ。 もちろんjQuery以外もたくさんある。
jQureyは、JavaScriptをより扱いやすく、簡単に書けるようにしたもの。
そのライブラリの決まった記述で呼び出して扱う。
[参考コード] https://jsfiddle.net/pocchi/udhacmdo/8/
簡単なhoverの処理ですが、 jQueryで4行、JavaScriptで8行になってます。
[引用] https://webkikaku.co.jp/blog/webdesign/jquery_start/
[参考] http://semooh.jp/jquery/
Vue.jsというかフレームワーク
すでに決まっている設計に基づき、開発者は基本的には、そのひな形に沿ってコードを書いて行く。
[参考コード] https://jsfiddle.net/chrisvfritz/50wL7mdz/
ライブラリが部品なら、フレームワークはひな形 なので、一緒に使うことも可能。
[参考・引用] http://itpro.nikkeibp.co.jp/article/lecture/20070205/260697/?rt=nocnt http://pikurusux.hatenablog.com/entry/2015/05/28/123326
Vue.jsと他のJSフレームワーク
他にももちろんいっぱいJSフレームワークはあります。
などなどなど・・・いっぱいあるので、 開発に合わせて選択すること、 流行り廃れをなんとなく知っておくが必要。
Vue.jsの良きところ
- 学習コストが比較的低め
- 小中規模のシステムに向いている
- 他フレームワークの良いところをあわせもち、現在も吸収していっている
- 日本語リファレンスが充実していてわかりやすい。
なので、JSフレームワークこと初めには良いんじゃないでしょうか。