プログラミングライフスタイル

「Vue.js」の学習を始めます!

お久しぶりです!「サトル」です。

約2年ぶりに新たな内容の学習ですが、今回は「Vue.js」を学んでいきたいと思います。

「Vue.js」は「言葉を聞くこと」はあっても、なかなか勉強する機会が無かったため、これから学習する「Vue.js」の学習過程について書いていきたいと思います。

「Vue.js」とは何なのか?

「Vue.js」は「Javascriptのビューライブラリ」であり「フレームワーク」としても機能します。

「フレームワーク」は「ソフトウェア開発」の用語では、「ソフトウェア開発の骨格を定義しているもの」ですが、「抽象的な概念」でなかなかわかりづらいところもあります。

  • ファイルの配置位置
  • ディレクトリ構造
  • 画像などアセットの配置
  • 設定ファイルの記述内容

など、ソフトウェアを開発するためのさまざまなルールがあらかじめ定められています。

「Vue.js」を学ぶことは「Vue.jsのソフトウェア開発のルール」を学ぶことでもあるんですね。

巷では「学習コスト」も低いとされています・・・がそれは人によって捉え方が違うので、自分にとってはかなり高くなりそうです。

「Vue.js」を学習する前の前提知識として、下記のスキル習得が必要となります。

  • HTML
  • CSS
  • Javascriptの基本構文

これらは普段実務で利用しているので問題なさそうです。

「Vue.js」の機能

「Vue.js」の機能には、

  • 「HTML構成要素」のコンポーネント化
  • リアクティブ性のあるデータバインド
  • SPA(Single Page Application)
  • ルーティングの管理(Vue Router)
  • データの状態管理(Vuex)

などがあります。

「Vue.js」は拡張性があり、後から利用したい機能を追加することができるそうです。

また「Vue.js」の名部では「仮想DOM」という独自の仕組みを持っていて、「仮想DOM」を元に「DOM」を操作していくという仕組みについても学んでいきたいと思います。

ここに挙げた内容以外にも「単一ファイルコンポーネント」や「アニメーション」の方法についても学んでいく予定です。

学習量が多いため、1つずつプログラムを書いて実行しながら、着実に学習を進めていきたいと思います。

今後の学習について

「Vue.js」は「クライアントサイド(ブラウザ側)」で動作するとのことで、クライアントサイドのさまざまな技術を身に付けていきたいと思いますが、「Javascript」の本格的な学習はたぶん3年ぶりくらいなので、「Javascript」の復習も行いながら学習に取り組んでいきたいと思います。

今回の学習では「NuxtJSの学習」も視野に入れているので、「Vue.js」の学習は「NuxtJSを学ぶための基礎スキルの習得」という意味もあります。

「クライアントサイド」も「サーバーサイド」も「Javascript」で作れるようになるのが今回の学習の目標です。

「Vue.js」の利用方法

「Vue.js」には下記のような利用方法が用意されています。

  • 「VueCLI」の利用
  • 「CDN」の利用

学習初期は「CDN」の方が取り組みやすいと教えてもらったので、こちらを利用していきたいと思います。

「Vue.js」の公式サイトは下記になります。

→「Vue.js」

インストールの方法などは下記ページから確認することができます。

→「Vue.js インストール」

一番良かったのは「公式サイトが日本語であること」です。

「英語のサイト」だと翻訳しながら読んでいく必要があるので、内容を読むだけでもかなり時間がかかってしまいます。

エンジニアには「英語力」が必要なのは実感しているのですが、これからの課題ですね(;^^

では、次回から「Vue.js」の学習を始めていきたいと思います。

→(次へ)「Vue.js」の「イベント処理」について学ぼう!

HOMEへ