Vue.js logo

JSのフレームワークを知らない人間がVue.jsを2ヵ月触ってみたって話

2019/10/12

2018/03/02投稿で, はてなブログから移行した内容です.

(この記事では, フレームワークとライブラリは同じとして扱います)

『Vue.js 何がすごい』と検索して来てくださった方へ

2021年3月5日　追記
『Vue.js 何がすごい』という検索キーワードでアクセスしている方がとても多くビックリしております.
しかし, 上記の検索キーワードですと知りたいことと記事の中身が一致していないように感じましたので,
新卒（2018年）の時に外部研修でVue.jsの凄さについて発表したスライドを添付させていただきます.
Vue.jsとは何か？

前書き

最後の更新が2017年9月26日...

10月～1月は卒業研究を主にやっており, バイトにもあまり行かず, 自主勉強なども行っていなかったため, 更新できませんでした.

しかし, 1,2月は時間が出来たので, Vue.jsを触ってました.

筆者はどんな人間？

僕は, 大学1年生からプログラミングを始め, JavaScriptに触れJavaScriptを大好きになりました.

しかし, JavaScriptのフレームワークは1つも使ったことがありません.

大学の先生からの
『流行りのフレームワークを使えることは良いこと．でも，フレームワークを作れる人間になりなさい．』

『フレームワークを使ってる人は，台風の中にいる人．フレームワークの仕様変更，フレームワークの流行りに振る舞わされる．』

『フレームワークを作る人間になり，台風の目にいなさい．そうすれば振り回されない』

という言葉が好きで，素のJavaScriptばかり使っていました．
(無駄な機能が入っているのが好きじゃなかった)

バイト先でjQueryやプラグイン関係を使うことがあり，ある程度は読めますが，使いこなしているレベルではありませんでした．

そんな僕がVue.jsを触ったので，思ったことや，勉強の過程？，作ったものなどを書いていこうと思う．

なぜVue.jsを選んだ？

2017年の2月頃，ニコニコで配信している時に，リスナーさんにお勧めされたことがVue.jsを知るきっかけでした．

そこから約半年後の10月頃に，小学校時代の友達に10年ぶりに会うことになりました．
彼は，高校から独学でプログラミングを勉強し，現在はWeb系のフリーランスをやっています．

彼がすごいという噂は何度も聞いており，彼の職場と僕のバイト先が同じ渋谷であったため，仕事終わりに飲もうとなりました．

彼からReactの素晴らしさやVue.jsがこれから来るという話を聞かしていただき，
どうしても，JSのフレームワークを勉強したくなり，卒業研究ツールを現在流行っているフレームワークに対応する必要があるという言い訳を考え，
AngularとReactとVue.jsがどんなものかを軽く勉強しました．
理由は2017年でGithubでスターを多く貰っていたからというだけ笑

3つ触ってみて驚いたのは，トランスパイル，コンポーネント指向，仮想DOMです．
JSもわかるし，型で困ったことないからTypeScriptとかやる必要なくね笑．なんでわざわざコンパイルするんだよ笑と思ってた自分を殴りたくなりました．

HTML, CSS, JSを１つのファイルに書けたり，サイトをパーツごとに分けられるのも衝撃的でした．
その中でもVue.jsの最小構成から始められて，プロジェクトの規模ごとに必要な機能を追加していく．という考えに感動し，
Vue.jsを選びました．

1作品目

一番最初に作成したのは，DoCheckというサイトです．

フロント側はVue.js＋Vuetify
バックエンドはNode.js(express)＋MySQL
サーバはさくらVPS
です．

Vue.jsのリファレンスとVue.jsの例を数個やり，次にデザインテンプレートのライブラリを探し始めました．

とりあえず，なんでもよかったので一番最初に環境構築できたものを使おうと決め，その希望にかなったのがVuetifyでした．
この選択は間違っていなかったと思いますし，初心者は特に使った方が良いと思います．
Vuetifyのコンポーネントを組み合わせることで，それっぽいサイトができます．

加えて，Vuetifyにはコンポーネントごとにサンプルコードがたくさんあるので，コピペもでき，
サンプルコードごとの比較で，何が変わればどんな動きをするのかってのが，すぐわかります．
Vuetifyで得たデータバインディングの知識はVue.jsに使えます．(というかVue.jsの機能)
これにより，VuetifyをいじってるだけでVue.jsの知識がついてるって感じでした！

次に，ログイン機能を実装する時に，ルーティング機能が必要になり，vue-routerの勉強を始めました． これもvue-routerの公式リファレンスなどを読み，動きを把握しました．

次に，コンポーネント間のデータの受け渡しを
blog.mio3io こちら様のサイトを利用して，行っていました．

しかし，ログイン情報や様々なフラグ管理が面倒になり，Vuexの勉強を始めました．
色々なサイトを読みましたが，やはり公式リファレンスが一番良いと思います．

2作品目

二番目に作成したのは，VIROというサイトです．
こちらは，Nuxt.js + Firebaseで作成しました．

Nuxt.jsを利用することで，vue-routerの部分はフォルダの作成ルールに従えば良いだけなのですごい楽です．
Vuexに関しても今まで通りで使えます．

衝撃を受けたのはfirebaseです．
Hostingに関しては，json形式の設定ファイルを作成し，firebaseコマンドを打てば，勝手に送ってくれて公開できます．
独自ドメインも簡単に設定でき，httpsにも対応してくれます．

一番衝撃を受けたのは，firebase Authenicationです．
10行程度のコードを書くだけで，メール＆パスワードでのログインが可能になり，
10行程度書けば，Twitterでログインできるようになります．
後は2行ほど追加すれば，GoogleやFacebookにも対応できます．

Realtime Databaseに関しても簡単です．
保存するプロパティ名を指定して，後はオブジェクトを代入する形やpushする形でできます．

所感

2ヵ月Vue.jsを触ってみた感想としては，本当に学習コストが低いです．

ランディングページくらいならVue.jsだけで作成し，
複数のページが必要になったらvue-routerを利用し，
ログイン状態や複数のページで同じ情報を利用することになるのであればVuexを利用
など，本当に作成するものの規模間に応じて付け足して対応することができます．

HTML, CSS, JavaScriptが１つのファイルにできるので，ページごとや部品ごとに管理できるのは，本当に良いです．
適当に作っていても，後で読みやすくリファクタリングもしやすいです．

加えて，Firebaseは本当に神でした．
個人で何か軽いものを作るならFirebaseは本当にお勧めです．

Nuxt.js + Firebaseは爆速＆無料で作れるので本当にお勧めです．

Vue.js

Twitterフォロー待ってます！