Udemy始めてみました
背景
前回の記事でRuby(Ruby on Rails)を利用したプロジェクトにVue.jsを導入したという話を書きました。
で、実際にVue.jsを使い始めたわけですが、ところがどっこい凄まじく手詰まり・・・
Componentて?ルーティングどうなってんのこれ・・・笑?もはやどうやってサーバーと繋げればいいのか・・・?
あらゆることに疑問が出てきて、基本的・体系的な知識が不足していると感じたので、友人に勧められたこともあり先週くらいからUdemyでVue.jsのレクチャーを受講することにした。
通常7,200円が1,500円だったので、お買い得
『Vue JS入門決定版！jQueryを使わないWeb開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ』(上に張ったリンク)を使ったが、
ある程度進んだので、ここで少しだけ自分にfeedbackしようかなぁと。
内容をざっくり
速習編
基礎を叩き込むtodoアプリ作成編
叩き込んだ基礎でtodoアプリを作るビットコイン価格取得＆表示
axiosを使ってBitCoinの価格を取得するするAPIを叩き、JSON形式のレスポンスを画面に描画するより深く
テンプレート構文や算出プロパティなど、より深く知識を得て使いこなすためのレクチャー
やったこと
速習編・todoアプリの作成編の学習
期間は1週間くらい
感想を一言で
レガシーなjsに比べて、こんなに楽だと思ってなかった。
学んだこと
- ディレクティブ
簡単に言うなら、HTML側である指示を行うためのプロパティ。自分が学んだディレクティブと簡単な説明
v-if
""(ダブルクウォテーション)で書いた変数の値がtrueの時に、DOMを表示する。falseの時はDOMごと消されるので、処理的には比較的重い。v-show
基本的な処理はv-ifと同じ。ただし、falseのときにはDOMそのものが削除されるわけではなく、display:noneになるだけなので、v-ifに比べて処理が軽い。v-on
イベントリスナーとして使う。v-on:click="doSomething" みたいに使うと、ある要素がclickされたときにjsで定義しているdoSomethingという処理が呼ばれる感じ。v-bind
単方向のデータバインディング。Vue->HTMLに対してデータバインドするので、HTML側での入力はVueに影響することはない。v-model
双方向のデータバインディング。v-bindと違ってHTML側での入力がVueにも影響する。v-for
繰り返し処理。配列やオブジェクトをループしてくれる。前だとjsの中にテンプレート書いて、ループ回してappendしながらHTML作って、ようやく描画してたのに対して、HTML側で1行で済むので非常に楽。
こんなもんかな？もしかしたらヌケモレあるかも。
- DOM操作
上で述べたディレクティブはこれに強く関係している。 todoアプリ作成の中でちゃんと学べたと思う。
各ディレクティブでDOMがどのように操作されるのか、使い所はどこかを学んだ。
v-onを起点に、v-bind使って表示非表示を切り替えたりするのなんかめちゃくちゃ楽。
中でも強く印象に残っているのが、双方向のデータバインディングがこんなに簡単にできるのかということ。
todoアプリは、inputフォームを使ってタスクをリストに追加、doneになったら打ち消し線を表示する、削除するとリストからも消える。くらいの基本的な仕様だったが、JQuery使ってたときよりはるかに簡単に実装できる。
dataプロパティの中に、任意のプロパティを定義して、v-bindでそのプロパティを指定するだけであら不思議、データバインドできましたー
くらいの感覚。(実際はもう少しやることある(CSSとかとか)。要は簡単って話。)
感じたこと・感じていること
基礎って大事。
体系的に学ぶって大事。
どんどんいろんな技術が出てきて、進化してるな。
取り残されたくないな。
勉強し続けないと、(エンジニア市場で見た時に)ただでさえ高くない市場価値が下がる一方だな。
これから
ビットコイン価格取得＆表示を進めていく。
API使ってレスポンスをどうやって描画するかを学習できるといいかな。
イメージGETメソッドしか使わなそうだけど、POSTメソッドも使う内容なんだろうか。
より深くの部分もやります。 おそらく次の投稿は全てやりきったあとなのではないかと。
外に出るねくらの成長を楽しみしててもらえるとありがたい。
