Vue JS Crash Course 2019 をやってみた :)

Youtube Premiumにも加入したし、気になってる講演動画とかガッツリみたいなと思ってた矢先、人の話聞いて分かったような気になってるだけじゃなくて、実際に手を動かして技術習得しようと思っていたら、とても良い教材を見つけました。

よくありそうなTodoリストを作ってみましょう的な題材だけど、Vue.jsの構成とか一通りブワーっとやってみましょうっていうのにちょうどイイ感じ。

途中でメシ食ったり家事をしたり、後術のように色々とハマったり、1時間ちょっとのYoutubeのビデオの内容を全てこなすのに4〜5時間くらいかかったけど、ちょっと止めてビデオの中でコピペのCSSを手書きしたり、ついていけないところを理解しながらでも(自分の場合”ESLint for linting”とか言われてLintingって何よ?ってとこから調べたり…な感じではありましたがw)スムーズに行けば2〜3時間くらいで終わるのかな、と。

shinodogg_vue_crash_todolist__Vue_JS_Crash_Course_-_2019

Vue.jsはクライアント側のフレームワークなのでサーバーサイドは無いのかと思ってたら axios というプラグインを使って、 JSONPlaceholder(PostしたりDeleteなリクエスト投げても黙っててくれる健気なヤツw)というサイトでテストデータを取得したり、実践的な感じでした。

なんか、久しぶりに楽しかったなー、こういうの。10年以上前にRailsをはじめた時のような感覚。

Screen Shot 2019-03-07 at 17.10.51

個人的にハマったところは↓こんなようなところでした。

  • input[type=”text”] って記述すべきところで、inputと[の間にスペース入れちゃって、なかなかUIが整わなかったw
  • import uuid from ‘uuid’; の uuid を uid って記述しちゃってたり、、
  • vue-routerをインストールしたら環境が壊れちゃって、no such file or directoryとか言われたヤツをnpmで順繰り入れてっても解決できなくて、Webコンソールからvue-routerをupdateしたら最終的には動いたり、、

Vue Fes Japan 2018 の Evan YouさんのVue.js 3.0の話もなんだかワクワクするようなアツい感じっぽいので、引き続きVue.jsを追いかけてみたいと思います 🙂

シェアする

  • このエントリーをはてなブックマークに追加

フォローする