カメ飼ってる新米エンジニアの覚書き

とにかくカメがかわいい

Vue.js勉強会資料作成中(その1)

不肖ながら会社でVue.jsの勉強会を開くことになったので、 作成途中の資料をそれとなく載せておきます。(第1回前編)

Vue.js勉強会 vol.1

Hello Worldから始めるVue.js

対象者

Vue.jsというかJavaScript初心者。 デザイナーも含めるので、基礎の基礎からやってみます。

JavaScriptってなに

f:id:pocchi13:20170328005020p:plain

PHPJavaScript の ちがい

項目 JavaScript PHP
実行環境 ブラウザで動くので、ファイルを作成するだけでOK。 サーバーが必要。ファイルだけでは動かない。
実行タイミング 必ずイベントを指定する。ページロード時・クリック時、など ページ表示のタイミングのみ。
HTMLの変更部分 ページ全部を書き換えなくてもいい。変えたい部分を変更するだけでOK。(非同期) 1箇所を書き換えるだけでも、1ページ丸々再度描画しないといけない。(同期)

ページ全部を変えたい時はPHP。 ちょっとだけ変えたい時はJavaScript

何が違うんですか?

f:id:pocchi13:20170328005046p:plain

[ 参考 ] http://paiza.hatenablog.com/entry/2015/03/11/Backbone_JS%E3%81%8B%E3%82%89Angular2%E3%81%BE%E3%81%A7%E3%80%81%E5%85%A89%E5%A4%A7JavaScript%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%92%E6%9B%B8%E3%81%8D%E6%AF%94%E3%81%B9

ライブラリとフレームワークのちがい

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フレームワークはあります。

f:id:pocchi13:20170328005137p:plain

などなどなど・・・いっぱいあるので、 開発に合わせて選択すること、 流行り廃れをなんとなく知っておくが必要。

Vue.jsの良きところ

  • 学習コストが比較的低め
  • 小中規模のシステムに向いている
  • フレームワークの良いところをあわせもち、現在も吸収していっている
  • 日本語リファレンスが充実していてわかりやすい。

なので、JSフレームワークこと初めには良いんじゃないでしょうか。