9月メモ・リンク集

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

Vue 関連

• What is the best way to access this.$router.push() / router.push() inside the Vuex? · Issue #1384 · nuxt/nuxt.js · GitHub
• v-on to bind dom event in a custom component · Issue #2942 · vuejs/vue · GitHub
  • <foo @click.native="hello">
  • カスタムコンポーネントがネイティブイベントを利用するために
• .sync vs v-model - Vue Forum
  • Vue の .sync と v-model について
  • 基本は同じもの。複数の prop に v-model ロジックを利用したいとう要望のため .sync が追加された
• nuxt.js/examples/with-keep-alive at dev · nuxt/nuxt.js · GitHub

ルーティング関連

• Vue Router の公式ガイドを読んだときに試したサンプル
  • vue-router-101 - StackBlitz
  • vue-router-nested - StackBlitz
    • ネスト、プログラムによるナビゲーション、リダイレクトとエイリアス、名前付きルート / ビュー 、ルートコンポーネントにプロパティを渡す
  • vue-router-advanced - StackBlitz
• Vue.js vue-router Nuxt.js の各フック(など)がいつ実行されるかメモ - ryotah’s blog
  • ナビゲーション実行時のフックの実行順を確認するためのサンプル

i18n

言語データの整理方法メモ

{ 
  "common": { // 一般的な用語
     "action": {
       "close": "閉じる"
     },
     "label": {
       "calendar": "カレンダー"
     },
     // ...
  },
  "glossary": { // アプリケーション用語, Domain
    "task": {
      "label": {
        // ...
      },
    },
  },
  "components": { // Shared Components に対応
    "calendar": {
      // ...
    },
  },
  "modules": { // 各ルートに対応
    "todo": {
      // ...
    },
    "todos": {
      // ...
    }  
  },
}

• Angular アプリでの例
  • (命名が少しそれっぽくなっているだけで、フレームワークはあまり関係ない)
• 意味のグループと場所のグループ
  • common, glossary => 意味
  • components, modules => 場所 (View と強く結びつく)
• common, glossary はどこの View からも呼び出しが可能。
  エイリアスが利用できるなら components や modules などから利用することも可。
• 考慮したいこと
  • 翻訳依頼するときに翻訳者がコンテキストを理解しやすいか
  • 開発時に不要なメッセージが増えにくいか
    • 必要な言語を探しやすいか
    • 新しいメッセージをどこに追加するか迷わないか
  • 利用していないメッセージを発見しやすいか

その他

• npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう