8月メモ・リンク集

8月に調べたことのメモです。

Vue 関連

基礎

• Vue.js 学習メモ - ryotah’s blog
• Vuex 学習メモ - ryotah’s blog
• Nuxt.js 学習メモ - ryotah’s blog
• How to redirect with vue-router? · Issue #1843 · nuxt/nuxt.js · GitHub
  • tips
• vue.js - VueJs 2.0 - how to listen for props changes - Stack Overflow
  • beforeUpdate, updated でいいかとおもったけどちがった
    • 上記 hook は props に限らない
  • Props change will not trigger child component update if props not referred in template · Issue #5325 · vuejs/vue · GitHub

    • updated hook means the component did a re-render. If the prop is never used during render, why would you expect the component to re-render when it changes?

  • vue.js - What is the difference between updated hook and watchers in VueJS? - Stack Overflow

    • The lifecycle hooks around update respond to changes in the DOM. Watchers respond to changes in the data.

ちょっと応用

• Vue Mastery
  • The Best Explanation of JavaScript Reactivity 🎆 – Vue Mastery – Medium
    • Vue のリアクティブの実装方法
• Evan You on Proxies - Advanced Components | Vue Mastery
  • Proxy を利用した場合の話
• Vue のリアクティブシステム - ryotah’s blog
• 動的に Vue インスタンスを append する方法のヒント
  • element/main.js at 5ef3d0ec8d02872fc5de51d16ffe36af2700b11c · ElemeFE/element · GitHub
• Modal 実装に関して
  • Modal - BootstrapVue
    • bootstrap-vue/src/components/modal at dev · bootstrap-vue/bootstrap-vue · GitHub
  • Component | Element
    • element/packages/dialog at dev · ElemeFE/element · GitHub
  • モーダルコンポーネント — Vue.js
    • ミニマムなモーダル
  • vue-modal - StackBlitz
    • 以下機能を追加したモーダルサンプル
      • エスケープキーで閉じる
      • 背景（backdrop）クリックで閉じる
      • show, shown, hide, hidden イベント発火
      • v-model を利用した open/hide 操作
      • show(), hide() メソッドによる open/hide 操作
      • body のスクロール防止
        • （スクロールバーがなくなることによるレイアウトずれに関しては未実装）
      • モーダル内にフォーカス固定
• TypeScript
  • Nuxt+TypeScriptの事始め #nuxtmeetup / Nuxt and TypeScript - Speaker Deck
  • Nuxt.js + TypeScript = Great! - Speaker Deck
  • TypeScript の恩恵を受けつつ Vue を使いたい その1 | Web 猫
  • Vue.js+TypeScriptを試した際の雑感 - mizdra’s blog

Angular 関連

• (WIP) Learn Angular - ryotah’s blog
  • Angular 学習のためのロードマップ

JavaScript その他

• Proxy
  • GitHub - GoogleChrome/proxy-polyfill: Proxy object polyfill

    • This is a polyfill for the Proxy object, part of ES6. See the MDN docs or Introducing ES2015 Proxies for more information on Proxy itself. Unlike other polyfills, this does not require Object.observe, which is deprecated.

  • ECMAScript 2015 の Proxy(Proxies) / Reflect をなんとなく理解する
• Object.observe の死 (ECMAScript の提案取り下げ、V8 からも削除予定) - てっく煮ブログ
• redux Presentational / Container componentの分離 - react-redux.connect()のつかいかた
• ISO 形式 (ISO 8601) の文字列判定 - ryotah’s blog

その他

• 1．ま え が き 2．プロシージャル技術について 1 2 - J-Stage
• prevent-scroll - StackBlitz
  • 画面スクロール、コンテンツスクロールの防ぎかたサンプル
  • How to disable / prevent scrolling in Vue – Lu Yu
• Passive Event Listeners によるスクロールの改善 | blog.jxck.io