仮想サーファーの波乗り

仮想サーファーの日常

プログラミング・エンジニアのスキルアップ・ブログ運営などに関してよく書く雑記ブログ

➡ Udemyで8/27(木)まで割引セール開催中! 1,200円〜で普段の90%以上OFF!

初めてのVue.js(Nuxt.js)開発業務を始める前に学んでよかった技術書・記事まとめ

f:id:virtual-surfer:20200723113048j:plain

フロントエンド開発の経験がなかったのですが、4ヶ月ほど前に始めた副業先で急にVue.js(Nuxt.js)でフロントエンド開発することになりました。

「急いでVue.jsを学ばないと!フロントエンド開発はじめてだけど何から学べば!?」

と色んな情報や学習ツールをあさりつつ四苦八苦したので、後世のフロントエンド(Vue.js)開発入門エンジニアに向けて参考になった情報をまとめておきます。


これからVue.js(Nuxt.js)で開発をしようとしている方の参考になれば幸いです。


Vue.js(Nuxt.js)の学習内容と技術書・記事

Vue.jsを業務で扱えるようになるために学習したい内容には、ざっと以下があります。

Vue.jsを業務で扱えるようになるために学習したい内容

  • JavaScriptの基本(Vue.jsの理解を進めやすくするために必要)
  • JavaScriptの開発方法(JavaScript開発の手順とノウハウ)
  • Vue.jsの基本(業務でVue.jsで開発する上で最低限必要)
  • Nuxt.jsの基本(業務でVue.jsで開発する上で最低限必要)

Vue.jsでのフロントエンド開発を業務で始めて、困り果てないために最低限必要だった知識はこんなものかなと。


それでは、これらを学ぶ上で効果的だった技術書・記事をまとめていきます。


Vue.jsを学ぶ上で効果的だった技術書・記事まとめ

JavaScriptの基本(Vue.jsの理解を進めやすくするために必要)

まずは、JavaScriptの基本をおさえることが大事ですね。

Vue.jsの文法を学ぶ際にも、JavaScriptの基礎は理解できている前提で進んでいる本や記事が多いので、まずはJavaScriptを学んでおくといいです。


JavaScriptの周辺知識をざっくり

JavaScriptでの開発方法、基本的な書き方と、JavaScript開発で最低限知っておくべき知識がまとまっている良書。

JavaScriptをちゃんと学ぼうと思って渋谷の一番大きな本屋で立ち読みしまくった結果、一番良さそうなのがこの本でした。

全部しっかり読むと数日かかってしまうので、忙しい方はいったんパラパラと流し読みしておいて、業務で実装する範囲に関してしっかり読み込むという使い方がよいと思います。


Awesome JavaScript : 素晴らしい JavaScript ライブラリ・リソースの数々 - Qiita

JavaScript関連の有益なリンクがまとまったGithubページの転記記事。

JavaScriptで開発する際に必要になる技術知識領域をざっくり知るためにさーっと目を通すとよい。


JavaScriptの歴史をざっくり

JavaScriptが辿った変遷 - Qiita

JavaScriptがどのような経緯で誕生して変化してきたのかをざっくり知ることができる記事。

歴史を知ることで今の技術の理解が深まるし、さくっと読めるので読んでおきたい。


JavaScriptの文法・コーディング規約

JavaScriptとは · JavaScript Primer #jsprimer

JavaScriptの基礎の基礎を学べる良サイト。

基本的なコーディング規約や文法がさくっと学べるので読んでおくとよい。


ES2015

ES2015(ES6) 入門 - Qiita

ES2015での書き方をざっくり学ぶことができる記事。


TypeScript

qiita.com

TypeScriptをWeb開発で利用する時のベストプラクティスがまとまっている記事。

TypeScriptが利用されている開発環境で開発するなら読んでおきたい。


TypeScriptの型入門 - Qiita

TypeScriptの型についてまとめられている良記事。TypeScriptが採用されている開発環境で働く場合は目を通しておきたい。


HTML・CSS

こんなHTMLとCSSのコーディング規約で書きたい - Qiita

HTMLとCSSのコーディング規約について参考になる記事。

目を通しておくだけでも、HTML・CSSを書く時に意識が向くので読んでおきたい。


非同期処理(Promise・await・async)

async/await 入門(JavaScript) - Qiita

非同期処理のasyncとawaitの概要と書き方が紹介されている記事。

非同期処理はどんなWebサービスでも必要になるので、学んでおくと良い。


JavaScript Promiseの本

Primiseの仕組みが詳細に解説されている良記事。

非同期処理に関して何となく分かるけど、仕組みも理解したいという時に読むとよいですね。


ブラウザの基礎知識

ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks

ブラウザの内部動作を図も見ながら視覚的に学べる良記事。新人時代に社内のフロントエンドエンジニアに聞いて教えてもらった記憶がある。

サーバーから受け取ったデータを元にページが表示されるまでブラウザがどんな仕組みで動いているのかを学ぶことで、フロントエンド開発周りのデバッグもしやすくなる。


フロントエンジニアなら知っておきたいブラウザレンダリングの仕組みをわかりやすく解説! | LeapIn

ブラウザのページ描画までをざっくり学べる記事。上の記事よりも先にこっちの記事を読んだ方がざっくり理解できてよいかもしれない。


npm(パッケージマネージャ)とpackage.json

【初心者向け】NPMとpackage.jsonを概念的に理解する - Qiita

外部のライブラリを利用する時になんとなく使っているnpmとpackage.jsonの役割と中身と使い方を学ぶことができる良記事。


CDN

JavaScriptライブラリはCDN使ったほうが便利だし早いっていう話

CDN(Contents Delivery Network)の概念と使い所の理解ができる。


JavaScriptの開発方法(JavaScript開発の手順とノウハウ)

開発ツール

フロントエンジニアになってから5ヶ月間で欠かせなくなったツールを晒す - Qiita

フロントエンド開発で使うことになるツールがまとめられている良い記事。

この用途でこのツールを使うのかと参考になる。


デバッグ

標準ビルトインオブジェクト - JavaScript | MDN

「Chromでは動くのに、IEでは動かない!IEでだけデザイン崩れてる!」となった場合にまず疑うのはjsのメソッドがIE対応されていないこと。

JavaScriptのメソッドを使う時は、MDNで各種ブラウザで利用可能かどうかを確かめましょう。


フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita

Chromを開発時に利用する上で開発者ツールの各メニューの使い方、便利なショートカットが学べる良記事。


【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita

「console.log();」だけじゃないconsoleでできることが紹介されている記事。

ずっとconsole.logだけでデバッグしていたので眼からウロコでした。


IDE設定

JavaScript開発者のための優秀なVSCodeツール26選 - Qiita

フロントエンド開発でVSCodeを使うならやっておきたい設定がまとまっています。

初期に設定しておくことで開発生産性を上げられる。よさそうなのは取り入れる。


フォーマッタ

ESLint 最初の一歩 - Qiita

JavaScriptでの静的検証ツールESLintの使い方がまとまっている。

フォーマッタを入れていると他人のコードを読みやすくなるし、推奨されている書き方を自動できに学ぶことができるので、入れておきたい。


パフォーマンス・速度改善

How to 速度改善 ーWebパフォーマンスについて知っておきたいこと7選ー - Qiita

Webサイトのパフォーマンス改善をする上で知っておきたい知識がまとまった記事。


静的サイトをとにかく高速化する話 - Qiita

サイトの高速化について、その具体的な方法が複数紹介されている。


仕様調整

実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita

フロントエンド開発をする上で仕様の考慮漏れが発生しやすいポイントがまとめられた良記事。

忙しいデザイナーとの協業で頻発する仕様の漏れを防ぐためにも読んでおくと良い。


Vue.jsの基本(業務でVue.jsで開発する上で最低限必要)

Vue.jsの基本をざっくり

Vue.jsの文法について、それぞれ詳細に仕組みが説明された良書。

Vue.jsの本は何冊か出版されていますが、個人的にはこの本が仕組みから理解できて実践でしっかり通用する学びが得られる最良の本だと思います。

Vue.jsの業務開発を始める1週間前に4日くらいかけて読みましたが、この本のおかげで相当Vue.jsの理解が進みました。


はじめに — Vue.js

何はともあれ公式ドキュメント。

Vue.jsについて全く知識がない状態だと厳しいですが、ある程度Vue.jsの知識がついてきたら公式ドキュメントを読むのが一番仕様理解の助けになります。


Vue.jsを100時間勉強して分かったこと - Qiita

Vue.jsの文法に関して網羅的にまとまっている良記事。

文法の背景や挙動の詳細などはまとまっていないので、ざっくりと文法を知るかある程度Vue.jsの文法を学んだ後にさらっと復習するために読むとよい。


Vue.jsの文法・コーディング規約

Vue開発者のためのVue.jsベストプラクティス集15選 - Qiita

Vue.jsを書く上で気を付けたいことがまとまっているので読んでおくと良い。


【保存版】Webフロントエンド基礎力(初心者向け) - Qiita

業務でVue.jsでのフロントエンド開発をする場合は、必ずHTMLとCSSも書くことになります。

HTMLとCSSについてタグの種類、どのタグがどんな挙動をするのかをざっくり学ぶことができる良記事です。


Vue.jsでTypeScript

vue.js + typescript = vue.ts ことはじめ - Qiita

TypeScriptでVue.jsを書く上での基礎知識がまとまった良記事。

TypeScriptでVue.jsを書いている開発環境で働く場合もそうでない場合も、参考として読んでおきたい。


ライブラリ

Vue.js おすすめライブラリ 21選(おまけ+1) - Qiita

Vue.jsでよく使われるライブラリがまとまっている。

この用途ではこのライブラリが使われるんだなとさらっと知っておくとよい。


Vue.js + Vuexでデータが循環する全体像を図解してみた - Qiita

Vuexのデータフローについて図付きでわかりやすく説明された良記事。

Vuexをはじめて使う場合にデータの流れの理解で苦労したので、この記事を読んでおけばよかったですね。


Nuxt.jsの基本(業務でVue.jsで開発する上で最低限必要)

Nuxt.jsとPythonで簡単なWebアプリケーションを開発してGKEにデプロイするところまでの実装例を学ぶことができる本。

実際に手を動かすことでこんなふうに実装するのかと理解は進みます。

文法についての説明がほとんどなく、この本だけでNuxt.jsの文法やなぜこう書くのか?を理解することはできないので、この本でざっくり実装イメージを掴んでから公式ドキュメントを読むなり、実装したい内容に関してGithubのissueや技術記事を読み進めていくとよいです。


はじめに - NuxtJS

Nuxt.jsの公式ドキュメント。困ったら読もう。


Webアプリ無料運営のススメ:FirebaseとNuxt(Vue)なら最強! - Qiita

Nuxt.js(とFirebase)でざっくり何が作れるのかを知れる記事。

これからNuxt.js×Firebaseの開発環境で働く場合は、さっと読んでおくとよい。


Vue.js(Nuxt.js)のTwitterアカウント

ぼく自身も全然追い切れてませんが、Vue.js関連のTwitterアカウントも紹介しておきます。


Evan You(@youyuxi)

Vue.jsをつくったひと。


Vue.js(@vuejs)

Vue.jsの開発状況やリリースされた機能の説明記事が流れてくる。


Nuxt.js(@nuxt_js)

Nuxt.jsについての開発状況やリリースされた機能の説明記事が流れてくる。


Vue.js 日本ユーザーグループ(@vuefes)

日本のVue.jsのカンファレンス情報とか流れてくる。


まとめ

以上、初めてのVue.js(Nuxt.js)開発業務を始める前に学んでよかった技術書・記事まとめでした。

はじめてのVue.jsでの業務開発でしたが、この辺の本・記事を読みつつ、分からないことは都度Githubのissueや関連技術記事を読むことで、「実装方法分からなくて実装が終わらない...タスケテ...」となる事態は避けることができました。


もちろん自分自身、まだ全然Vue.jsの理解は乏しすぎるので、これからも日々精進していきます。


では。


www.virtual-surfer.com


www.virtual-surfer.com