Try T.M Engineer Blog

多摩市で生息するエンジニアが「アウトプットする事は大事だ」と思って初めたブログ

書籍「Vue.js入門 基礎から実践アプリケーション開発まで」を読んで、入門できなかった話

はじめに

年初から、ポートフォリオを「Vue.js」で作ろうと思い、以下本を読んでいたのだが、ついに途中で挫折して(心が折れて)しまった。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

誤解がないように言うと、この本自体は素晴らしい本だ。
ただ、私がこの本を手にするには、レベルが低すぎたという話。

ちなみに、私のスペックはJavaScriptを書いた経験はほとんど無く、なんとなくソースコードは読める程度だ。
そもそも、このレベルの人が、Vue.jsに手を出すのはちょっと・・・という話もあると思うが、それは一旦置いておく。

まずは、この本の素晴らしさ、Vue.jsの素晴らしさについて以下に書いていく。

1章がとても良かった

「1章かよっ」とツッコミを入れた人もいると思うが、1章では、複雑化していくフロントエンドの開発、それを踏まえた「Vue.js」の特徴を説明している。私が「あ、なるほどなぁ」と感じた部分は「すべてはUIコンポーネントから構成される」という言葉だ。 UIコンポーネントというのは、たとえばWebページにあるヘッダー。
ヘッダーにログインボタンや複数のリンクがあった場合、その纏まりを1つのコンポーネントと呼ばれる単位に置く。すべてのWebページは、このコンポーネントと呼ばれる単位で構成されているよ。という事。
さらに、コンポーネント単位で再利用が可能であり、どのWebページにも配置する事ができるエコシステムである。との事。 こういった再利用が可能な考え方は、個人的にも好きなので、とても楽しんで読むことができた。

Vue.jsってライブラリ?フレームワーク

Vue.jsはフレームワークだという言葉を良く耳にする。(私だけ?)
でも、中にはライブラリと呼ぶ人もいる。
結局どっちなの!?というモヤモヤが私の中にずっとあったのだが、この本はこれを解決してくれた。

結論:Vue.jsはライブラリです。

ただ、「Vue.js」はプログレッシブフレームワークという考え方のもとに作られている。

プログレッシブフレームワークとは「Vue.js」自体はViewに焦点を集めたライブラリだが、+αのライブラリやツールを用いる事で、フレームワークとして機能する。という考え方。
なので、「Vue.js」自体はライブラリだが、+αの「Vue-Router」や「Vuex」等を組み合わせるとフレームワークとして使う事もできる。

これで私のモヤモヤが解決された。
また、この辺りも個人的にとても面白い仕組みだと思った。

2〜7章は、ひたすら写経

2〜7章はひたすら写経していました。
細かいところまで、丁寧に解説してくれているので理解しやすかった。
(今となっては、理解した気になっていただけですが・・・)

8章〜は鬼門

8章から「中規模・大規模向けのアプリケーション開発」に入っていくのですが、ここで挫折しました。
というのも、「JavaScriptチョットデキル」程度では、本から入ってくる情報量が多くて歯が立ちませんでした。
以下の知識・経験があれば、私のように挫折することはないと思います。

  • JavaScriptのTDD開発の知識・経験
  • Webpack
  • ESLint

8章は「Vue.js」を使ってログイン画面とTrelloのようなタスク管理ツールを作ろう。というもので、内容はとても魅力的なのですが、上記についての知識がないと個人的には厳しかったです。

というわけで「挫折しました。Vue.js諦めます!」

とは、したくないので別のアプローチで理解を深めて行こうと思います。

そんな風に考えていたときに、以下記事と出会いました。 qiita.com

この方は「Vue Router」でプチパニックがおき、「じゃんけんゲーム」を作る事で「Vue」への理解を深めたとの事。
この記事に倣って「よし、私もじゃんけんゲームを作ろう!!」という考えに至りました。

Vue.jsでじゃんけんアプリを作ってみた

f:id:special-moucom:20190206235257g:plain
Vue.jsでじゃんけん

驚くべきことに、記事に書いてあった通り「Vue」への理解が深まりました。
だけど、もう少し理解を深めていきたいと思うので、あと1つ何か作ろうかと思います。