基礎から学ぶ Vue.js 10週目(実施期間:38日)

進捗

基礎から学ぶ Vue.js

• 進捗91%(301/331)[前回+2%]
  • 祝日＋出張(SPI Japan 2018)により2日しか朝活できず
    • 出張で良い刺激を受けた。エンジニアとして自分の価値を少しでも高められるよう日々研鑽したい。
  • 来週でやっと終われると思う。

所感

• Vue Routerは「hash」と「history」の2種類のモードがあるとのこと。なぜ2種類あるのか…。
  • HTML5のhistory.pushStateAPIが使えるか否かが分かれ目のよう。古いブラウザであればhash選ぶと良いとのこと。(参考)
• replace属性はwindowオブジェクトのhistory.replaceState()と同じとあるが、そっちも分からない…。
  • 現在の履歴を書き換える(＝履歴に追加したくない)時に使うのか。なるほど。(参考)

基礎から学ぶ Vue.js 9週目(実施期間:36日)

進捗

基礎から学ぶ Vue.js

• 進捗88%(289/331)[前回+11%]
  • 来週終わりそう。次何しようか。。。

所感

• polyfill？？
  • モダンブラウザで普通に出来て、レガシーブラウザで出来ない機能を、既存の技術で（あるいはそれらの組み合わせで）同等のものを提供する、という手法。(サイト)
• Vuexのコアコンセプトは本を読んでもよく分からない
  • サイトのほうが分かりやすかった。
• マッピングヘルパーはコード行数減るかもしれないけど読みづらい。冗長でもちゃんと書いて欲しい派。
• 複数モジュールを一つのStoreで管理し且つ同一のmutationsやactionsが存在する場合、1度のコミットで両方共呼ばれる。意識して実装しないと嵌りそう。
  • 同期取らないようにするためにnamespacedオプションがあるのか…。名前被らないようにするのは辛いし納得。
• VueRouterのSectionに入った。RoutingをVueでやるようだが、Webサーバ側のRoutingとの棲み分けがまだはっきりしていない…。

基礎から学ぶ Vue.js 8週目(実施期間:31日)

進捗

基礎から学ぶ Vue.js

• 進捗77%(254/331)[前回+12%]
  • 祝日の影響で1日朝活できず。
  • あと2週間くらいで終わりそう。

所感

• 大規模開発のSectionに入った。SFCの説明があり大規模感が出てきてワクワクする。
  • Node.js、npm、Babel、Vue CLIなど怒涛の説明。聞いたことあるだけだったが、どういう目的で利用するか学べた。
• Section39の内容全然わからん。どこにどのjsを置くべきなのか…。
• Section40はES2015の記載方法がズラズラと書いてある。纏まっていて良いがJS素人には量が多い…

基礎から学ぶ Vue.js 7週目(実施期間:27日)

進捗

基礎から学ぶ Vue.js

• 進捗65%(214/331)[前回+10%]
  • 祝日の影響で1日朝活できず。
  • あと1ヶ月でいけるかなぁ…

所感

• SECTION26はお作法的なことが色々書いてあったのである程度実装経験が詰めたら読み返したい。
• mixinを使うと同一処理を抜き出して定義できるが影響範囲が広くなるので要注意とのこと。そうなりますよね～。
• コンポーネントはv-ifで切り替えた時インスタンスが破棄されることを知った。
  • 破棄したくない場合はkeep-aliveタグ使うと解消できる。覚えておこう。
• Vue.jsだとトランジションが簡単にできることは分かったが、animationプロパティ使ったことないので嬉しさがわからない。面倒だったのだろうか…。
  • トランジションは非表示⇒表示の「Enter」と表示⇒非表示の「Leave」がある。それに-toやら-activeやらがあって全部で6パターン。なるほど。
• リストトランジションではtag属性でタグ名を使用する。読みづらさが増すように感じてしまうのは自分だけだろうか。

基礎から学ぶ Vue.js 6週目(実施期間:23日)

進捗

基礎から学ぶ Vue.js

• 進捗55%(181/331)[前回+11%]
  • あと1ヶ月かかりそう。

所感

• コンポーネントの章に入った。実践的になって楽しくなってきた。
  • コンポーネント定義は「new Vue()」する前に定義しないといけないとのこと。覚えておこう。
  • コンポーネントでもdataやmethodsが定義できる。どういうケースで使うんだろうか…。
    • dataはオブジェクトを返す関数でないといけないとのこと。えっ、dataである意味は…。
      • 複数のコンポーネントインスタンス間で同じオブジェクトを参照して状態が共有されることを回避するためらしい。
    • テンプレートのルートは単一である必要があり、複数の要素がある場合はdivなどで全体を囲むと良い。なるほど。
• 親から子へのデータフローは「porps down」、子から親へのデータフローは「event up」というらしい。
  • propsで受け取ったデータは子コンポーネントでは勝手に書き換えれない。(＝親側のデータを更新すると子側も更新される。)
  • propsで受け取るデータはデータ型やデフォルト値の設定が可能。
    • こりゃ大事ですね。厳密に定義しないとコンポーネントの流用で痛い目を見ることが想像できる。
  • 階層構造が深くなるとコードが読みづらくてメンテつらそう。
• JavaScriptにて「===」とイコールが3つ続く記載があった。何これ…どんな意味あるんだろうか…。
  • サイトによると厳密等価演算子のことで、型変換せずに比較することになるそう。JSにはそんな演算子あるんだ。
• slotについてのセクションを理解するのに時間がかかった。slot読みづらい。
  • slot-scopeも辛い。この記載されたら構造が複雑になって頭混乱しそう。

基礎から学ぶ Vue.js 5週目(実施期間:18日)

進捗

基礎から学ぶ Vue.js

• 進捗44%(146/331)[前回+6%]
  • 前回から進捗率ダウン。
    • 台風で有給＋翌日リカバリーのため朝活時間を仕事に回すというコンボをした為。
    • 更に緊急案件の仕事があり朝活時間を削られる…。

所感

• 「Section16のソート機能を追加しよう」のサンプルコードでLodashライブラリ使ってと書いてないじゃないか！！不親切だなぁ。
  • 著者サイトには一文書いてあるので、何か問い合わせがあったのだろう。
  • Lodashライブラリ：便利な関数を集めためっちゃ軽いライブラリらしい。(参照)
• Filterを習ったがテキストベースの変換だとスッキリするとの記述がある。スッキリ感がしっくり来ていない。慣れの問題か…。
• videoタグの存在を初めて知った。この本を読んで思うことはHTML、JavaScript全てにおいて前提知識が足りていないと感じる。

基礎から学ぶ Vue.js 4週目(実施期間:14日)

進捗

基礎から学ぶ Vue.js

• 進捗39%(129/331)[前回+9%]
  • 前回から進捗率ダウン。
    • 朝早く行っても不穏なメールにより時間が取れないことが多かったのが原因。

所感

• v-onディレクティブを@で置き換えられる。それだけよく使うから@という一等地を与えられたのだろう。
• バブリングというワード初めて聞いた。JSで書いてあるサイトを見たが、どういう原理か理解できた。
• キー修飾子やシステム修飾子をつけることで簡単にキーハンドリングができる。
• トゥイーン系のライブラリというワードが出てきた。トゥイーン？？
  • トゥイーン：between(中間)に由来する言葉で、2つのイラストが変化しながら繋がるアニメーションのこと。(参照)
• 算出プロパティは可読性向上のために使う。Mustacheやディレクティブの値はJavaScriptでダラダラ書くなと。そりゃそうだよねと思った。
  • 算出プロパティというので普通のプロパティのようにも使える。
  • 算出プロパティはキャッシュが効く。キャッシュの再構築はリアクティブなデータのみであり、複雑な処理を算出プロパティにやらせると良いらしい。なるほど。