今週調べたこと(6月の第2週)

今週調べたことをまとめます。

let と const について(ES6)

let は再宣言が出来ません。 const は再宣言と再代入が出来ません。

参考リンク

this について

色々なパターンがあって、参考リンクの記事を読んだだけではモヤモヤしている。もう少し書き慣れれば「なるほど」って感じになるのだろうか。

参考リンク

transition-group(Vue.js)

コンポーネントに対してトランジション効果を適用します。実際に動作させないと、いまいちイメージがつかない機能だと思います。 下記は、デモのリンクとなります。

参考リンク

flash と flash.now の違い

概要

Railsflashflash.now の違いについて記載します。 まず、 flashflash.now は、どちらも Rails の画面に簡易メッセージを表示するために使います。

違い

flash は、リクエストとリクエストの間にメッセージが保持されます。一方、 flash.now は同じアクションでのみ有効なメッセージです。 redirect_to でページ遷移した場合には flash でのメッセージは保持されますが、 flash.now でのメッセージが保持されません。 ちなみに、 render は、リクエストとはみなされません。

参考リンク

Vue.js でモーダルコンポーネントを作る

概要

モーダルコンポーネントを実装してみました。 特に難しい箇所はなく、ボタンを押すたびにモーダルを表示・非表示したりするだけでした。

実装

実装です。

<html>
   <head>
      <script src='https://unpkg.com/vue/dist/vue.js'></script>
      <style>
         <!--
            .modal-mask {
              background-color: rgba(0, 0, 0, .5);
              /* table タグを使わずに同様のスタイルを利用することが出来るようになります。 */
              display: table;
              height: 100%;
              left: 0;
              /*  ページをスクロールした場合でも、同じ位置に表示されます */
              position: fixed;
              top: 0;
              width: 100%;
              /* 重なりの順番を指定します。数値が大きいものほど手前に配置されます */
              z-index: 9998;
            }

           .modal-wrapper {
              display: table-cell;
              /* 縦方向の位置を中央にします */
              vertical-align: middle;
            }

           .modal-container {
             background-color: #fff;
             margin: 0px auto;
             width: 300px;
            }
         -->
      </style>
   </head>
   <body>
      <script type='text/x-template' id='modal-template'>
         <div class='modal-mask'>
           <div class='modal-wrapper'>
             <div class='modal-container'>
                  <p>ボク、運命の人です</p>
                  <!-- 「$emit」は、現在のインスタンス上でイベントを発行します。 -->
                 <button @click="$emit('close')">OK</button>
             </div>
           </div>
         </div>
    </script>

     <div id='app'>
         <button @click='showModal = true'>Show Modal</button>
         <!-- 「@」は、v-on の省略記法でイベントリスナをアタッチします。  -->
         <modal v-if='showModal' @close='showModal = false'>
         </modal>
      </div>

     <script type='text/javascript'>
        const modal = Vue.extend({
          template: '#modal-template'
          })

        new Vue({
           el: '#app',
           data: {
             showModal: false
           },
           components: {
             'modal': modal
           }
         })
      </script>
   </body>
</html>

参考リンク

Vue.js でコンポーネントに対して v-for を使う

概要

Vue.js でコンポーネントに対して v-for を使ってみました。 見所は、特にないです。

実装

実装です。「ボク、運命の人です。」の登場人物をデータとして使用しました。

<html>
  <head>
    <script src='https://unpkg.com/vue/dist/vue.js'></script>
  </head>
  <body>
    <div id='app'>
      <ul>
        <character
          v-for='(name, index) in names'
          :name='name'
          :index='index'
          :key='name.id'>
        </character>
      </ul>
    </div>
    <script type='text/javascript'>
      const character = Vue.extend({
        props: {
          'name': String
        },
        template: '<li>{{name}}</li>'
      })

      new Vue({
        el: '#app',
        data: {
          names: ['正木 誠', '湖月 晴子', '四谷 三恵']
        },
        components: {
          'character': character
        }
      })
    </script>
   </body>
</html>

完成

こんな画面になりました。

f:id:takiy33kun:20170517071453p:plain

参考リンク

Vue.js で動的なファイルツリーを作る

概要

Vue.js で動的なファイルツリーを作ってみました。 ツリー表示 - Vue.js を参考にしました。

実装

実装をコメントと共に示します。

<html>
   <head>
      <script src='https://unpkg.com/vue/dist/vue.js'></script>
      <style>
         <!--
            .bold {
              font-weight: bold;
            }
            ul {
              line-height: 1.5em;
              list-style-type: dot;
              padding-left: 1em;
            }
            -->
      </style>
   </head>
   <body>
      <script type='text/x-template' id='item-template'>
         <li>
          <!-- 「:」は、 v-bind の省略記法。「@」は、 v-on の省略記法 -->
           <div :class='{bold: isFolder}' @click='toggle' @dblclick='changeFolder'>
             {{model.name}}
             <span v-if='isFolder'>[{{open ? '-' : '+'}}]</span>
           </div>

           <!-- v-show は、式の真偽値によって、表示・非表示をする。ここでは、フォルダの場合のみ、下の階層を表示します。 -->
           <ul v-show='open' v-if='isFolder'>
             <item v-for='model in model.children' :model='model' />
             <li class='add' @click='addChildFolder'>+</li>
           </ul>
         </li>
      </script>

      <ul id='folder'>
         <item :model='folderData' />
      </ul>

      <script type='text/javascript'>
         Vue.component('item', {
           template: '#item-template',
           props: {
             // Object オブジェクトは、全てのオブジェクトの基本オブジェクト。
             model: Object
           },
           data: function () {
             return {
               open: false
             }
           },
           // computed は、計算結果がキャッシュされる。
           computed: {
             isFolder: function () {
               return this.model.children && this.model.children.length
             }
           },
           methods: {
             toggle: function () {
               if (this.isFolder) {
                 this.open = !this.open
               }
             },
             changeFolder: function () {
               if (!this.isFolder) {
                 // Vue.set は、オブジェクトにプロパティを設定します。
                 Vue.set(this.model, 'children', [])
                 this.addChildFolder()
                 this.open = true
               }
             },
             addChildFolder: function () {
               this.model.children.push({
                 name: '新規フォルダ'
               })
             }
           }
         })

         const folderData = {
           name: 'ドラマ',
           children: [
             { name: '逃げるははじだが役に立つ' },
             { name: 'カルテット' },
             {
               name: 'ボク、運命の人です。',
               children: [
                 {
                   name: 'イントロダクション',
                 },
                 {
                   name: 'ストーリー',
                   children: [
                     { name: '#01' },
                     { name: '#02' }
                   ]
                 }
               ]
             }
           ]
         }

         new Vue({
           el: '#folder',
           data: {
             folderData: folderData
           }
         })
      </script>
   </body>
</html>

完成

こんな画面が出来ました。

f:id:takiy33kun:20170514142247p:plain

子コンポーネントから親コンポーネントにデータを受け渡しする

概要

コンポーネントから親コンポーネントにデータを渡す方法を学びました。 子コンポーネントが任意のタイミングで、イベントを発火し親コンポーネントにデータ渡しをしていました。

実装

実装をコメントと共に示します。

<html>
  <head>
    <script src='https://unpkg.com/vue/dist/vue.js'></script>
  </head>
  <body>
    <div id='app'>
      <p>{{title}}</p>
      <!-- 「@」は、v-on ディレクティブの省略系。  -->
      <child @send-title='receiveTitle' />
    </div>
    <script type='text/javascript'>
      // Vue.extend は、ある特定のコンポーネントでのみ使える子コンポーネントを登録する構文
      const child = Vue.extend({
        data: function() {
          return {
            title: 'ボク、運命の人です。'
          }
        },
        template: '<div></div>',
        created: function() {
          // $emit はイベントをトリガする。
          this.$emit('send-title', this.title)
        }
      });

      new Vue({
        el: '#app',
          data: {
            title: ''
          },
          components: {
            'child': child
          },
          methods: {
            receiveTitle: function(text) {
              this.title = text
            }
          }
        });
      </script>
   </body>
</html>

参考リンク

親コンポーネントから子コンポーネントにデータを受け渡しする

概要

コンポーネントから子コンポーネントにデータを受け渡しする方法を学びました。 子コンポーネントを定義するタイミングで、親コンポーネントの変数をバインドすれば良かったです。

実装

実装をコメントと共に示します。

<html>
  <head>
    <script src='https://unpkg.com/vue/dist/vue.js'></script>
  </head>
  <body>
    <div id='app'>
      <!-- 「:」は、 v-bind の省略記法  -->
      <child :hello='hello'></child>
    </div>
    <script type='text/javascript'>
      // Vue.extend は、ある特定のコンポーネントでのみ使える子コンポーネントを登録する構文
      const child = Vue.extend({
        props: {
          'hello': String
        },
        template: '<p>{{ hello }}</p>'
      });

      new Vue({
        el: '#app',
          data: {
            hello: 'やっはろー'
          },
          components: {
            'child': child
          }
        });
      </script>
   </body>
</html>

参考リンク