913
1085

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

1週間でVue.jsをマスターしようと思った時に参考にしたサイト

Last updated at Posted at 2018-10-01

前置き(とばしてください〜)

めっちゃ久しぶりに更新します。

プロフィールなども古いですがとりあえず今度そのあたりも更新しようと思っています。

簡単に今の私について。
携帯の販売→スマートフォンアプリの専門学校→Web制作会社→フリーランス→フリーランスの時に仕事を受けたスタートアップの会社に就職(まだ2週間前の話)

こんな感じです。
フリーランスのときは(今もまだ仕事はちょこちょこ受けてますが)
基本的に私ができる仕事はなんでも受けていました。
ので、エンジニアの仕事があればデザインの仕事、Botのシナリオ作成(UXライター的な)、プログラムとはかけ離れた仕事などなどもしていました。

また、ガッツリエンジニア!!という仕事はなかったので、(なぜが割とがっつり常駐していたスタートアップではメンバー半分がエンジニアだった!)
逆に、仕事で新技術学べる機会は殆ど無く…
今の自分が活躍できる領域で生きてました。

時間あるときに勉強しよう!
隙間時間で調べて、次勉強するのはVue.jsだ!とは決めても、結局時間取れなくて勉強できていなかった。

そんなとき、社員に誘われ、これからの開発にはVue.js使おうと思っていると言われたので、お!めっちゃいい!と勉強をはじめました。

はじめてみて、正直、**え、思ってたより相当簡単!!**でした。
時間ないとか言い訳でした。猛反省。。。
タイトルには1週間って書きましたが、1日でも多分いけるレベル(あくまで基本的なことを理解するにはって意味です。あ、あとjsの知識があること前提で…)

私は本を2冊読み(うち1冊は結構流し読み)、
5日間いろいろな参考サイトを読んだり実行してみたりした。
みたいな感じでVue.jsを勉強しました。
あとは実践しながらいろいろ身に付けたい。

せっかくなので履歴を残そうと思って書くことにしました。
Vue.js以外にも最近調べものを良くするので、気が向いたら他にもいろいろまとめようと思っています。

あと、これはあくまでリンク集程度だと思いますが、プライベートでVue.js使ってブログをつくりたいなと思っているので、その時にはサンプルコード書いたりするかもしれません。とりあえず未定です。

しばらくはフロントエンドを中心にがんばります!!

そんな私の最近のあるあるは、Macの慣れでひらがなのまま色んなところで送信してしまうことです。(なんだかあたまゆるそうにみえる)
あと、キーボード操作が遅い。何回も間違えるし、たまに操作方法ぐぐってるから。。
ちなみに今は、Ubuntuです。これも初めて。

参考にした本

ってことで本題。 と言いつつサイトじゃないけど…

サイトも一通り確認したいけど、本も読んでおきたいと思い、思い立ったが吉日。
その時アマゾンで検索して、検索上位を5分くらい見比べて1冊買った。

それがいろんなサイト見て知ったけど、ちまたでは「猫本」とよばれていて、結構良いと言われていた。他にもいい本が最近いっぱい出ているそうです。

基礎から学ぶ Vue.js
cover-s.png

個人的にもとてもおすすめ。
人によっては1日で読めると思う。
そして、たいていの知識はつく。
サンプルコードがダウンロードできるので、CodePenとか使って、サクサク確認できて本当に良かったです。
私はだいたい3日間くらいでゆっくりやったイメージです。

こちらが、本のサポートページ
基礎から学ぶ Vue.js 書籍用サポートページ

もしかしたら、この本(を愛する気持ち)についてもっと書くかもですが、ここではこれくらいで。

参考にしたサイト

以下が参考にしたサイトたちです。
順番は適当です。

日本語公式サイト

Vue.js

まずは公式サイト。

日本語の翻訳がとても充実していることで有名らしいです。
たいていこういうのって日本語訳がおかしくて何言ってるかわかんないからわかんない。みたいなの多い。(←失礼)

しかし!
Vue.jsは公式がとてもわかりやすいです!!
といいつつ私はまだ全てには目を通せていませんが・・・

公式だけでも十分理解できるというかサンプルも充実しているのでしっかり身につけることができるそうです。

基礎的なことを教えてくれるサイト

jQuery から Vue.js へのステップアップ

まさに私のことだったので目につき最初に見ました。
そしたら、私がすごく気に入った本(↑)の著者でした♪

jQueryとの違いがサンプルコード交えてわかりやすく説明されているので、jQueryの知識がある方にはとてもわかりやすいと思います。

WebデザイナーのためのVue.js事始め

「Webクリエイターボックス」さんのVue.js紹介ページです。
CDNを使った方法が紹介されています。
実装サンプルもあるので、理解しやすいと思います。

やわらかVue.js

Vue.jsやその他プログラミングに役立つ情報がたくさんあります。
Vue.jsって、何?どうやって選んだらいいの?始めたらいいの?〇〇って何?
みたいな疑問が解決すると思います。

JavaScript初心者でもVue.jsをはじめられます!はじめてみましょう!

Vue.jsのインストールから画面に表示されるまでの一連の流れが載っています。
よくわからなくても、とりあえず順番通りにやってみたら、あ、できた!って感じだと思います。

Vue.js を vue-cli を使ってシンプルにはじめてみる

Vue.jsのインストールから、一通りの機能について載っています。

一通りVue.jsについて理解したうえで、おさらいがてらみたサイト

Vue.js 2.x 入門

Vue.jsの便利な機能のサンプルコードが載っている。
私は本で結構ちゃんと理解するまでやったところだったのでさらっとおさらいできた。

【超簡単】Vue.jsを使って3時間で自分のホームページを作成&公開する

HPをつくる過程なので、ふむふむなるほど、という感じ。

Vue.jsでなにか作ってみたときに参考にしたサイトとかのリンク集

こちらもおさらいがてらさらっと〜

Vue.js入門 ―最速で作るシンプルなWebアプリケーション

こちらはまだほとんど手を付けられていないが、時間見つけてあらためて理解を深めようと思ってリンクをメモした。
文字が多めで、お勉強!という感じかもしれない。
しかし、機能をしっかり理解しようと思ったらいいのではないかと思っている。

まとめ

以上、Vue.jsを初めてしっかり勉強しようと思って参考にした本とサイトでした。

私は今回ちゃんと時間が取れたので、いろんなサイトを多めにみましたが、
とりあえずなんとなく理解するのであれば、上にもリンクを載せた、基本的なことを完結にまとめているサイトだけでもいいし、手を動かす時間が取れそうであれば、公式サイトをまるっとや、本を1冊やってみるだけで十分に理解できると思います。

ドキュメントだったり機能も、結構シンプルにしっかりしているイメージなので、ぜひVue.jsを使って何かつくってみようと思います〜

913
1085
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
913
1085

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?