Hyper-Positive-Diary

TWICE/遊戯王/バイオインフォ/読書記録/アニメの感想等を走り書きします。

Vue.js初心者だった僕が、何度も参考にした記事/教材集

近頃、Vue.jsを使ってフロントエンドの開発に携わることがありました。 それまでVueなど触ったこともなかったので、当時はとても戸惑いました。 しかし、先人たちの積み上げや、よく整備されたドキュメントのおかげで、 ふられたタスクも、なんとか乗り切ることができました。

今回は、私が読んでとても役に立ったと感じた、技術ブログの記事やドキュメント、動画、書籍を紹介しようと思います。

最初に読むべき記事

qiita.com

Vueを語る上で欠かせない、dataプロパティやmethodsプロパティに始まり、v-bindやv-modelの直感的な導入がなされています。 初めて読んだ人には、「なるほど〜。Vueってこんなもんなのか〜」というVueの導入に役立つ記事です。

5分じゃわからないかもしれませんが、何度でも立ち戻る価値のある記事かとお思います。 二回目以降はVueがわからない時にググるべき単語集みたいな感じでお世話になりました。

qiita.com

こちらは、Vueと同じくWebフレームワークとして人気の高いReact.jsとVue.jsを比較した記事です。 私はVueを触る前に若干Reactをかじったことがあったので、この記事のおかげで、Vue.jsの全貌 をイメージながら勉強を進めることができました。

UIコンポーネント

vuetifyjs.com

Vue.jsのUIコンポーネントである、Vuetifyの公式ドキュメントです。 リンク先のページでは、UIコンポーネントを検索できるようになっており、 実装の手が止まってしまった時にチラチラ見てると役に立つことが多かったです。

また、画像のボタンから、各コンポーネントのコード例も見ることができます。 勉強になるだけでなくコピペ用としても重宝しました。

f:id:slmnphmet1-2:20200805214442p:plain

# Vue + Tyepscript

私に限った話かもしれませんが、Vue + Typescriptを使わなければいけない機会が多く、当初はTypescript独特の書き方に戸惑いました。 しかし慣れた今となっては、Vue.jsよりVue+Typescriptの方がシンプルに書けることが多いので好きです。

現状 Vue + Typescriptの日本語の書籍は、そんなにない印象だったので(今後増えるかもしれませんが)、 技術ブログをたくさん参照しました。特に、一つ目のJavascriptとTypescriptの書き方を比較してくれている記事は、 頭の整理にとても役立ちました。

qiita.com

qiita.com

jp.vuejs.org

書籍

読んだ書籍はこの一冊だけです。 DOMって何?とかコンポーネントって何?とか超基礎の話から、外部APIへとの接続やアプリケーションの作成までを網羅しています。 もちろんこれを読んだからと言ってすぐにVue.jsが書けるようになるとは限りませんが、初心者の私は何度もこの書籍に助けられました。 また、ここでは紹介していませんが、Nuxt.jsについても導入があり、Nuxt.jsによりアプリケーションを作成する予定がある方にもおすすめです。

Vue.js&Nuxt.js超入門【電子書籍】[ 掌田津耶乃 ]


感想(0件)

動画

www.youtube.com

最後に、技術系Youtubeのrともすたさんの動画シリーズです。 Vueを始める前にReactをかじっていた私は、最初にともすたさんのReactの動画を拝見しました。 Reactの動画がとても分かりやすかったので、Vueも試聴したところ、これまた傑作でした。 見るだけで、なんだかVue.js書けるようになった気がする(大いなる錯覚)ので、Vueを始めるモチベーションにもなります。

最後に

初めてのフレームワークを勉強する時って、たくさん障壁があると思います。 そんな障壁をいくつか乗り越えるために、この記事が役に立ってくれればと思います。 また、他にもVue.jsの初学者や中級者におすすめのソースがあれば、是非教えてください。