はじめに
おはこんばんにちは。
フロントエンドエンジニアとして働いているいくです。
社内にてVue.js気になってるんですよねぇ、と呟いたところ
ちょうどいいね。仕事の時間使っていいからVue.js勉強して習得してよ。
と頼まれたので、勉強することになりました。
小さい会社ですが、1年目のぺーぺーに技術習得の時間を費やしてくれるなんて、いい会社ですね。
ということで、JavaScriptもロクに書けない1年目フロントエンドエンジニアがVue.jsを学習していきます。
Vue.jsとは
Vue.jsとはなんぞやここから始まりました。というのも、ちらっと話を聞いて気になっていただけでどんなものなのか、何者なのかも全く把握していませんでした。
Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。
あなたが Vue についてもっと深く学ぶ前に概要を知りたいのなら、中核となる原則とサンプルプロジェクトを元に説明するビデオを作成しているので、それを見るとよいでしょう。
あなたが経験豊富なフロントエンド開発者で、 Vue.js と他のライブラリ/フレームワークを比較したい場合、他のフレームワークとの比較を確認してください。
公式サイトより引用
ふむふむ、view層に焦点を当てたjsフレームワークですね。僕は経験豊富なフロントエンド開発者にはちっとも当てはまりませんが、習得にあたり他の有名なフレームワークと何が違って何がいいのかを調べました。
こんな親切な記事がありますね。他二つと比較してVue.jsにはこんな特徴がありそうです。
- コンポーネント的な感じ
- 学習コストが低い
- 今時
- 規模に応じて柔軟に使える
- 日本語ドキュメントが充実
- バインディングが簡単
全く技術的な特徴は見出していませんが、こんな感じみたいです。調べてみると、気になっていた通りいい感じですね。
よし、それじゃあ学習の準備をしていきましょう。
学習方法
Vue.jsは公式サイトにしっかりとしたガイドがあります。それに日本語対応です。
ガイド：https://jp.vuejs.org/v2/guide/index.html
おそらくJavascript、フロントエンド開発の最低限の知識があれば、ここをしっかりと学ぶことでVue.jsの機能を一通り習得できそうなほどの内容が詰まっています。
ですが自分にはちょっと難しいところが多かったように感じます。具体的に何が難しいかは自分でもよくわかっていませんが、なんか用語とか「Javascriptの常識」として割愛されている部分でわからないところがあるのでしょうか。
なので、今回は割と最近発売された良さそうなこちらの入門書を購入しました。
基本中の基本から、大規模開発でのセットアップや設計などまで幅広い内容を扱っていますが、その中でもjQueryからの移行という項目がビッタリハマりそうです。
「1年目フロントエンドエンジニアがVue.jsを勉強してみた」ではこの教本に沿って学習を進めていきます。
ですが、本の内容を公開するわけにはいかないので、
学んだことによってこんなコードでこんなことができた！ とか、
この本に書いてたここは重要そう とかを紹介していけたらと思います。
まとめ
この記事はシリーズ化して、最終的にはjQueryとVue.jsを適切に使い分けるところまでいけたらなあと思っています。
なので、Vue.jsに興味がある方、セレクタごとにイベント発火させてうんぬんするのが疲れてきた方、ネイティブアプリケーションライクでモダンな動作をwebサイトに組み込みたい方、自分と同じような境遇の方はぜひ最後まで追っかけてきてください。
のんびり習得するのでゆっくり記事にしていきます。
終わる頃には2年目フロントエンドエンジニアになっているかもしれないですね（）
次回の記事は「Vue.jsの基本」ということで、実際にどんなコードでどんな動作を実装していけるのか、それによってどう便利になるのかをまとめていきたいと思います。
コメント