【リンク集】役立つドキュメント

Vue.jsは、ドキュメントが充実している点も魅力の1つです。ここでは、Vue.jsの利用するうえで役立つリンクをまとめています。

Vue.js

ガイド

https://jp.vuejs.org/v2/guide/

ストーリー形式の解説がされています。
初めてVueを利用されるかたが、まず最初に読むべきドキュメントです。

クックブック

https://jp.vuejs.org/v2/cookbook/

下記のように独立した解説が掲載されています。

  • VS Code によるデバッグ
  • Vue コンポーネントを npm パッケージ化する

APIリファレンス

https://jp.vuejs.org/v2/api/

コンポーネントは全てVueインスタンスです。

Rootインスタンス          // new Vueで作成されたVueインスタンス
 ├─ Headerコンポーネント   // Vueインスタンス
 ├─ Menuコンポーネント     // Vueインスタンス
 │  ├─ Itemコンポーネント  // Vueインスタンス
 │  └─ Itemコンポーネント  // Vueインスタンス
 └─ Footerコンポーネント   // Vueインスタンス

APIリファレンスから インスタンスプロパティ インスタンスメソッド の利用方法を確認できます。

スタイルガイド

https://jp.vuejs.org/v2/style-guide/

下記のように、Vue.jsを利用する上で気をつけるべき記述方法を確認できます。

  • コンポーネントの命名
    • 複数単語にすべき
    • 1つしかアクティブにならないなら The というプレフィックスをつける
  • v-for と一緒に v-if を使うのを避ける

定期的に読み返したい内容です。

利用例

https://jp.vuejs.org/v2/examples/

下記のように、Vue.jsの利用例を確認できます。

  • Markdown エディタ の例
  • Firebase + バリデーション の例

リポジトリ

https://github.com/vuejs/vue

Vue CLI|開発環境構築ツール

概要

Vue CLIを利用することで、Vue本体以外にも「Babel」や「ESLint」などフロント開発に必要な環境を手軽に構築できます。

リンク

Vue Loader|Webpackのローダー

概要

Webpackのローダーです。SFC(Single-File Component) 形式で書かれた .vueファイル をJavaScriptコードにコンパイルします。

リンク

Vuex|状態管理

概要

Vuexは、アプリケーション内の全てのコンポーネントで共有する 状態 を管理します。
以下のようなケースで活躍します。

  • 兄弟コンポーネント間でデータを共有したいとき
  • 階層が深い親子関係でデータを共有したいとき

アプリケーションの規模が大きくなるほど役立つライブラリです。

構成要素

Vuexの構成要素は以下のようになります。

502-vue-useful-link_vuex.png

store:アプリケーションの状態状態の操作方法を持つコンテナ。

state:アプリケーションの状態。

mutationsstateを変更するためのもの。

actions:必要に応じて外部APIの呼び出しなどを行い mutationを呼び出す。

gettersstateをもとに値を返す。

modulesstoreを管理しやすくするために、ストア内部でモジュール単位に分割できる。

Vuexドキュメントのモジュールで書かれている内容ですが、ソースで表すと以下のようになります。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

リンク

Vue Router|SPAの構築

概要

コンポーネントルート のマッピング機能などを提供しています。SPAを構築したいときに利用します。

リンク

Vue Test Utils|単体テストライブラリ

概要

Vueコンポーネントの単体テストをサポートします。

テストでは、入力 に対して 出力 が期待した結果であることを確認します。

  • 入力
    • ユーザー操作(ボタンクリックなど)
    • propsへの値渡し
    • ライフサイクルメソッドの実行
  • 出力
    • HTMLへ描画
    • イベント発行

リンク

awesome-vue

awesome-vueは、vue.jsに関するリンク集です。3rd Partyの Component Framework Utility などを探すときに役立ちます。

Cheatsheet

【エンジニア向け】仕事を見つける方法

転職する

転職エージェントを活用する

転職サイトの場合、自身でサイト上から企業を探す必要があります。 一方「レバテックキャリア」 などの転職エージェントの場合、エージェントが企業を紹介してくれます。エージェントが間に入ることにより、日程調整や、条件交渉などもサポートしてくれます。

転職ドラフトを活用する

転職ドラフト」は、 企業がITエンジニアをドラフトという形で指名するサービスです。年収が最初に提示されるなどのメリットがあります。 ただ、初回登録時にレジュメ作成が必要で、すでにエンジニア経験が豊富にあるエンジニア向けのサービスかと思います。 レジュメ作成が手間ですが、自身のキャリアを見直す機会になり、他の仕事探しにも役立つはずです。

エンジニア転職保証のあるスクールを活用する

ある程度、開発経験のあるかたであれば、独学で必要なスキルを身につけることができるはずです。ただ、別業種からエンジニアに転職したい場合など、1から独学で学ぶのはハードルが高いです。そういった方は、スクールの活用を検討しても良いと思います。 「TechAcademy」は、エンジニア転職保証コースを提供しています。給付金制度の対象講座として認定されているため、金銭面の負担も抑えることができます。

フリーランスとして活動する

レバテックフリーランス」「ITプロパートナーズ」「ギークスジョブ」は、フリーランスエージェントサービスです。 エージェントによって、支払いサイトなど細かい違いはありますが、まずは良い案件を見つけることが重要です。 登録自体は無料なので、複数エージェントに登録して、より多くの案件を紹介してもらうのがおすすめです。

logo
わくわくBank.
技術系の記事を中心に、役に立つと思ったこと、整理したい情報などを掲載しています。