初心者がJavaScriptのフレームワークVue.jsを覚える時のまとめ

JavaScriptのフレームワークは大量にありますが、その一つとして2015年くらいから人気のフレームワークの一つである「Vue.js」。中国人のエンジニア（Evan You）・コミュニティが作っているので、中国語で書かれている解説ページが多いのが珍しい特徴です。

スタートアップ・ベンチャーを中心に日本でも流行している「Vue.js」の基本とサンプル、覚える時のページのまとめをしておきます。

JavaScriptを効率的に勉強して、プログラミングスキルをあげたい方はこちら

Vue.jsの特徴

Vue.jsを覚える時の勉強になるサイト・リンクまとめ

基本的にアプリケーション開発で、ある機能ごとにコンポーネントを作成するかと思います。タブ機能、フォーム機能、TODO機能、メッセージ機能、他はUIやアクションに紐付く処理が大半です。

最初の導入ハードルを下げるために、機能や処理という観点でリンクをいくつかまとめておきます。

そもそも他のJSフレームワークとの比較が気になる

Vue.jsの公式ドキュメントに日本語で他のフレームワークとの比較が書かれています。これで全体像を把握した上でやりたいという方はまずはこちらを確認して見てください。

• https://jp.vuejs.org/v2/guide/comparison.html

単一・複数クラスの切り替え

フロントエンドエンジニアとしては必須ですよね。こちらは公式ドキュメントに掲載されています。

・https://jp.vuejs.org/v2/guide/class-and-style.html

タブの切り替え

アプリケーションでよく使われるタブの切り替えの処理のサンプルリンク
Vue.jsの公式サイトのようなデザインですが、こちらはサンプルのサイトとなっているので注意です。

・http://vuejsexamples.com/vue-tabs-component/

開発系でおすすめのリンク

デバックがしやすくなるdevtoolを入れて置くことをおすすめします。
コンポーネント、イベントなどなにがどれに紐づいているのか、わかりやすいです。インターフェースもかなり使いやすいですね。

・https://github.com/vuejs/vue-devtools

初心者が最初に読んでおくと理解できる系のリンク

そもそもJavaScriptのフレームワークを初めて使う、そしてそれをVue.jsにしたいという方がざっくり全体を把握できるようなリンク

Vue.jsを使って、airbnbのようなスライダーを実装したい場合の参考リンク

導入方法も簡単なので、わからない場合はGithubの公式ドキュメントなどを参考にしてみることをオススメします。

• ・https://nightcatsama.github.io/vue-slider-component/example/

Vue.jsを使ってみて

React.jsよりもシンプルにコンポーネントの中に処理をまとめて書いておくのがわかりやすいですね。ルーティングや、アプリケーション開発に必要なものはdev toolを含めて一式揃っているので、特に不便なこともありません。

しかも、アプリケーションのサイズが最初は小さなものだったのが、大きくなっていくことが想定されてもVue.jsは様々なアプリケーションに対応できるかと思います。

皆さんもVue.jsを使ってみてください。

JavaScript初心者の方には学習スクールが効率的で、おすすめです。
マンツーマンで現役エンジニアの先生がついてくれるので自分が問題につまづいた時や、効率的な学習方法を教えてくれます。

エンジニアがCodeCampでJavaScriptコースを受講した感想と体験談

JavaScriptが学べるプログラミング学習スクールの説明会に文系出身の営業・運用職が
参加した時の記事です。こちらの記事で、プログラミングスクールの雰囲気を感じていただけると思います。

・Webスク・WebCampの無料説明会に参加。料金・雰囲気・カリキュラムなど徹底紹介！ 

プログラミングを勉強して、実際どうなっていくのか「未来の姿」が描けないと
一歩踏み出すのが怖いですよね。
一般の人が、プログラミングを１ヶ月学習してどうなっていっているのかインタビューしてみました。

・非エンジニアがプログラミング学習のDive into Codeに1ヶ月間通ってみた – インタビュー