Udemy修了しました
早いものでもう11月
スターバックスなんかは店員さんが赤と緑のスタイルですっかりクリスマスモード
なんか年々1年が短くなっているような気がする・・・
さて、タイトルのとおり、前回の投稿で伝えていたUdemyのカリキュラムを修了しました。
分量が多かったかつ平日仕事だったのでなかなか時間かかりました。
実施コンテンツ(前回投稿以降)
- 実践演習：Bitcoin価格表示アプリの開発 - API連携
- テンプレート構文
- 算出プロパティ
- 監視プロパティ（ウォッチャ）
- 実践演習：APIを用いたリアルタイムサーチ - 監視プロパティの理解を深める
- クラスとスタイルのバインディング
- 条件付きレンダリング
- イベントハンドリング
- フォーム入力バインディング
- コンポーネント
- トランジション
内容的には以前からの復習が割と多かった
それぞれ紹介したいんだが、長くなりそう・・・なので省略
実践演習:Bitcoin価格表示アプリの開発 - API連携
やっぱりGETメソッドしか実装しなかった。
証券コードみたいなのを入力すれば該当のBitcoinの価格を表示させる・・・みたいなことができると尚良かったかも。
まあでも、POSTメソッドとかまでやってしまうとaxiosの話にもなるし、入門編という趣旨からも外れるんだろうな。
自分でやった方が勉強にもなりそうだし、ここは追々自分でやっていこうかと思う。
とはいえエラーハンドリングの仕方とかローディング中の表示とか基本的なことではあるが、ちゃんと学べたのは良かった。
テンプレート構文
種類はいろいろある。
- v-once
- v-pre
- v-html
- v-cloak
- v-text
などかな。
v-preディレクティブなんかはその要素とその要素の子要素のコンパイルを全てスキップするから、XSS(クロスサイトスクリプティング)対策になるらしい。
コンパイルされないということは悪意のあるJavaScriptも実行されないということだから、まぁそういうことなんだろうな。
v-cloakなんかは、インスタンスが生成されるまでは生きているが、インスタンスが生成されると取り除かれるディレクティブ。
なので、vueのインスタンスを生成する過程で見える可能性のあるマスタッシュ構文とかをユーザーに見せないようにすることができる。
かゆいところに手が届くディレクティブ。
算出プロパティ
computedプロパティを使う。
methodsプロパティを使った場合と比較されがちだが、
computedは算出結果をキャッシュしてくれるので、同じ処理を繰り返す場合はcomputedを使用する方が効率的。
また、computedにはgetterとsetterという概念がある一方でmethodsにはgetterしかないので、computedの方がよりリッチ。
監視プロパティ（ウォッチャ）
watchプロパティを使う。
computedプロパティと比較されがちなんだが、
どっちでも同じことができるなら、computedを使うことを推奨する。
watchに比べて、記述が簡単でコードが短くなるから。
watchプロパティを使えば、例えばテキストボックス内に金額を入力する必要があったとして、
onFocusで『¥1,200,000』->『1200000』に、onBlurで『1200000』->『¥1,200,000』にいった具合に切り替えることが容易になりそう。
あとはwatchプロパティのオプションとして、ネストされたオブジェクトまで監視するdeepオプションや、初期表示時にも処理を実行するimmediateオプションがあったりもする。
実践演習：APIを用いたリアルタイムサーチ - 監視プロパティの理解を深める
QiitaのAPIを使って記事を取得する演習。
watchを使うメリットはあまり感じなかった・・・v-on:keyupディレクティブでいいのでは・・・？という疑問が今なおある 笑
watchを使う練習だから別にいいんだけど。
クラスとスタイルのバインディング
v-modelやv-bindを使うことでvalue属性へのデータバインディングができるのと同様に、クラス属性やスタイル属性にもバインティングできるんだということを伝えるためのセクション。
v-bind:classを使うことでclassに、v-bind:styleを使うことでstyleにバインディングを行うことが可能だった。
プレーンなJavaScriptでDOM操作するよりはるかに簡単。
ここでも、「やっぱすごいな」と思っていた。
プレーンなJavaScriptで同じことをやろうとすると、
- 1 要素を取得して、
- 2 その要素が自分が追加したい属性を持っているかどうかを確認して、
- 3 その要素に属性を追加して・・・
と割と手順が多い。
条件付きレンダリング
v-if、v-else-if、v-elseやv-showがあるよ。
v-ifは切り替えコスト高い一方でv-showは初期描画コストが高いよという話で、
内容的には前回投稿のv-ifとはv-showとはという話と重複してた。
イベントハンドリング
イベントハンドリングもv-onを使うという話で、基本的には復習。
ただし、イベントの修飾子があるよということで以下が紹介されていた。
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
それぞれの内容を全ては覚えていないけど、.once修飾子はv-onceと似てる。
イベントに対して一度しか処理を実行しないとするのか(.once)、データに対して一度しかレンダリングしないとするのか(v-once)の違い。
.prevent修飾子は詳しくレクチャーされなかったけど、おそらくいわゆるprevenDefaultと同じ挙動になるのではないかと。
なので非同期で通信するときに使うかもしれない。
フォーム入力バインディング
これも以前からの復習で、v-modelを使って演習する感じ。
v-modelを使用するとvalue属性は無効化されるとか、textareaではマスタッシュ記法が使えないからv-model使いましょうとか。
あとはラジオボタンやセレクトボックスのときにどのようにデータバインディングするかを、選択肢が単体・複数に応じて勉強した。
コンポーネント
Vue.componentを使うことでグローバルにコンポーネントを定義できて、
ローカル変数に対してコンポーネントを宣言して代入し、ローカルのvueインスタンスにtemplateの記述をすることで、ローカルでしか適用されないコンポーネントを定義できるという話。
グローバルなコンポーネントは、ヘッダとかサイドバーとかで使えそうだなぁって考えながら聞いてた。
スコープが広がると影響範囲も大きくなるので基本的にはローカルな方がいいんでしょうけどね。
トランジション
最後がトランジションで、要するにアニメーションをvueを使ってどうやるかという話。
transtionタグで囲むと、アニメーションであることが認識されて、
非表示->表示に遷移する際にはv-enter-active, v-enter、
表示->非表示に遷移する際にはv-enter-leave, v-leave-to
というクラスが一時的に割り当てられ、そのクラスに対してCSSを記述していくことでフェードインさせたりフェードアウトさせたりできる。
まとめ
結局全てのセクションに対してコメントしてしまった・・・。
こんな自己満足な投稿をここまで読んでいただきありがとうございます。
個人的な感想ですが、やっぱり最初は体系的に、こういう形で動画とかで勉強するほうが良かったです。
多少お金を払ってでもこういう勉強の仕方をした方が、今後何かわからないことや詰まったことが出てきた時に、
この話は全体の中のどこに位置づけられるのかといったことが意識しやすくなる。
全量を全く知らず、付け焼き刃の状態では『わかる』ことはできても、『できる』ようにはならない。
『できる』ようにならないと正しい実戦経験が積めないし、結果として『気付き』も得にくいんじゃないのかな。
今後
ペンディングしていたRuby on Railsのプロジェクトを再開させようと思います。
並行して、来年4月に応用情報技術者試験も受けたいので、直近はその勉強ですかね。(実は3週間くらい前から着手してる)
わからないこととか、詰まったことがあれば今後もツラツラと書いて投稿すると思います。
