# 構成設定ファイルである package.json を作成する
$ npm init

# プロジェクトのみインストール&アンインストール
$ npm install <package> --save
$ npm uninstall <package> --save

# グローバルインストール&アンインストール
$ npm install -g <package>
$ npm uninstall -g <package>

# package.jsonに記載されているパッケージをインストール
$ npm install

Rails.application.config.assets.paths << Rails.root.join('node_modules')

# node.jsのインストール
$ brew install node

# bowerのインストール
$ npm install -g bower

# 構成設定ファイルである bower.json を作成する
$ bower init

# ライブラリを検索する
$ bower search <package>

# パッケージを追加し、かつbower.jsonに記録する
$ bower install <package> --save

# '#'をつけるとバージョンを指定してパッケージを追加できる
$ bower install <package>#1.1.1 --save

# bower.jsonに記録されたパッケージをインストールする
$ bower install

# パッケージを削除する
$ bower uninstall <package>

gem 'bower-rails'

$ bundle install

# bowerを初期化
$ rails g bower_rails:initialize

# Bowerfileに欲しいアセットを任意に追加
asset '<package name>', '<package version>'

# bowerをインストール
$ rake bower:install

#todo
  todo-dnd

= javascript_pack_tag 'todo'

import Vue from 'vue/dist/vue.esm'
import TodoDnd from './todo-dnd.vue'

Vue.component('todo-dnd', TodoDnd)

new Vue({
  el: '#todo'
})

<template>
  <div class="mainDiv">
    <div class="div">
      <ul>
        <li v-for="list in lists" draggable="true" @dragstart="dragStart(list, $event)">
          <input type="checkbox" v-model="list.todoDone">
          <label v-show="!list.todoDone"></label>
          <label v-show="list.todoDone"><s></s></label>
        </li>
      </ul>
    </div>
    <div class="div">
      <textarea cols="50" rows="10" @dragover="dragOver($event)" @dragleave="dragLeave($event)" @dragover.prevent @drop="drop($event)"></textarea>
    </div>
    <div>
      <button v-on:click="afterSend">送信</button>
    </div>
  </div>
</template>

<script>
export default {
  data: function(){
    return {
      lists: [
        {name: "Ruby", content: 'Hello, Ruby!', todoDone: false},
        {name: "Rails", content: 'Hello, Rails!', todoDone: false},
        {name: "Vue.js", content: 'Hello, Vue.js!', todoDone: false}
      ],
      listIndex: null,
      dragContent: ''
    }
  },
  mounted: function(){

  },
  props: [],
  methods: {
    dragStart: function(item, evt) {
      this.dragContent = item.content;
      this.listIndex = this.lists.indexOf(item);
    },
    dragOver: function(evt) {
      evt.target.setAttribute('placeholder', this.dragContent);
    },
    dragLeave: function(evt) {
      evt.target.removeAttribute('placeholder');
    },
    drop: function(evt) {
      evt.target.removeAttribute('placeholder');
      evt.target.value = this.dragContent;

    },
    afterSend: function() {
      this.lists[this.listIndex].todoDone = true;
    },
  },
}
</script>

<style scoped>
.mainDiv {
  width: 100%;
}
.div {
  float: left;
  width: 100%;
  margin-right: 100px;

  ul {
    width: 300px;
    border: 1px solid black;

    li {
      border: 1px solid black;
      margin-top: 5px;
    }
  }
}
</style>

import draggable from 'vuedraggable'
...
export default {
      components: {
          draggable,
          ...
      }
      ...

var draggable = require('vuedraggable')

$ npm install vuedraggable

<template>
  <div>
    <div>
      <h2>Simple DnD</h2>
      <ul>
        <draggable v-model="lists" :options="{group:'people'}" @start="drag=true" @end="drag=false">
          <li v-for="list in lists"></li>
        </draggable>
      </ul>
    </div>
    <hr>
    <div class="div2">
      <h2>Two Lists</h2>
      <div class="twoListsDiv">
        <ul>
          <draggable v-model="lists" :options="{group:'people'}">
            <li v-for="list in lists"></li>
          </draggable>
        </ul>
      </div>
      <div class="twoListsDiv">
        <ul>
          <draggable v-model="lists2" :options="{group:'people'}">
            <li v-for="list in lists2"></li>
          </draggable>
        </ul>
      </div>
    </div>
    <hr>
    <div>
      <h2>List clone</h2>
      <div class="listCloneDiv">
        <ul>
          <draggable v-model="lists" :options="{group:{ name:'people',  pull:'clone', put:false }}">
            <li v-for="(list, index) in lists" :key="index"></li>
          </draggable>
        </ul>
      </div>
      <div class="listCloneDiv">
        <ul>
          <draggable v-model="lists2" :options="{group:'people'}">
            <li v-for="(list, index) in lists2" :key="index"></li>
          </draggable>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable,
  },
  data: function() {
    return {
      lists: [{name: 'Ruby'}, {name: 'Rails'}, {name: 'Vuejs'}],
      lists2: [{name: 'Java'}, {name: 'Swift'}, {name: 'Objective-C'}],
    }
  }
}

</script>
<style>
div {
  ul {
    width: 200px;
    border: 1px solid
  }
}
.twoListsDiv, .listCloneDiv {
  float: left;
}
.div2 {
  overflow: hidden;
}
</style>

import Vue from 'vue/dist/vue.esm'
import App from './app.vue'

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('hello'))
  const app = new Vue({
    el: 'hello',
    template: '<App/>',
    components: { App }
  })

  console.log(app)
})

<template>
  <div id="app">
    <p></p>
  </div>
</template>

<script>
module.exports = {
  data: function () {
    return {
      message: "Hello Vue!"
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

<script>
module.exports = {
  template: '#todo-list',
  data: function () {
    return {
      todos: [],
      inputValue: '',
      createMode: false
    }
  },
  mounted: function () {
    var that = this;
    this.$http.get('/api/todos').then(
      function(response){
        that.todos = response.data;
      });
  },
  directives: {
    "focus": function(el) {
      el.focus()
    }
  },
  props: [],
  methods: {
    onOffCreateMode: function(boolean) {
      this.createMode = boolean;
    },
    createTodo: function () {
      var that = this;
      this.$http.post('/api/todos', {title: this.inputValue}).then(
        function(response){
          that.todos.push(response.body);
          that.inputValue = '';
        });
      this.onOffCreateMode(false);
    },
    DeleteTodo: function (todo) {
      var that = this;
      this.$http.delete('/api/todos/' + todo.id).then(
        function(response){
          that.todos = response.body;
        });
    }
  }
}
</script>

import Vue from 'vue/dist/vue.esm'
import TodoList from './todo-list.vue'
Vue.use(require('vue-resource/dist/vue-resource.min'));

Vue.component('todo-list', TodoList)

new Vue({
  el: '#todo',
})

#todo
  todo-list

= render 'components/todos'
= javascript_pack_tag 'todo'

template#todo-list
  div
    ul
      div v-show="!createMode"
        button v-show="!createMode" v-on:click="onOffCreateMode(!createMode)"
          | +
      div v-show="createMode"
        button v-on:click="onOffCreateMode(!createMode)"
          | -
        input[v-model="inputValue" v-on:keypress.enter="createTodo" v-focus]
      li v-for="todo in todos"
        | 
        button v-on:click="DeleteTodo(todo)" style="margin-left: 20px;"
          | Delete
        todo-item :todo="todo"

<script>
module.exports = {
  template: '#todo-item',
  data: function () {
    return {
      todoItems: [],
      inputValue: '',
      createMode: false
    }
  },
  mounted: function () {
    var that = this;
    this.$http.get('/api/todo_items?todo_id=' + this.todo.id).then(
      function(response){
        that.todoItems = response.data;
      });
  },
  directives: {
    "focus": function(el) {
      el.focus()
    }
  },
  props: ['todo', 'item'],
  methods: {
    onOffCreateMode: function(boolean) {
      this.createMode = boolean;
    },
    createItem: function () {
      var that = this;
      this.$http.post('/api/todo_items', {title: this.inputValue, todo_id: this.todo.id}).then(
        function(response){
          that.todoItems.push(response.body);
          that.inputValue = '';
        });
      this.onOffCreateMode(false);
    },
    DeleteItem: function (item) {
      var that = this;
      this.$http.delete('/api/todo_items/' + item.id + '?todo_id=' + this.todo.id).then(
        function(response){
          that.todoItems = response.body;
        });
    }
  }
}
</script>

import Vue from 'vue/dist/vue.esm'
import TodoList from './todo-list.vue'
import TodoItem from './todo-item.vue' /* todo-itemをimportする */
Vue.use(require('vue-resource/dist/vue-resource.min'));

Vue.component('todo-list', TodoList)
Vue.component('todo-item', TodoItem) /* コンポーネントを作成 */

new Vue({
  el: '#todo',
})

template#todo-item
  div
    div v-show="!createMode"
      a href="javascript:void(0)" v-on:click="onOffCreateMode(!createMode)"
        | 項目を追加
    div v-show="createMode"
      input[v-model="inputValue" v-on:keypress.enter="createItem" v-focus]
      button v-on:click="onOffCreateMode(!createMode, todo)"
        | -
    ul
      li v-for="item in todoItems"
        | 
        button v-on:click="DeleteItem(item)" style="margin-left: 20px;"
          | Delete

$ rails new vuejs -d postgresql --webpack=vue

$ rails g controller todos index

root to: 'todos#index'
resources :todos, only: :index

= javascript_pack_tag 'todo'

#app
  | {{ message }}

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

module Foo
  def foo
    p "good job!"
  end
end

class Hoge
  include Foo
end

Hoge.new.foo # => "good job!"

module Foo
  def self.included(base)
    base.extend(ClassMethods)
  end

  module ClassMethods
    def class_foo
      p "class good job!"
    end
  end

  def foo
    p "good job!"
  end
end

class Hoge
  include Foo
end

Hoge.new.foo # => "good job!"
Hoge.class_foo # => "class good job!"

module Foo
  extend ActiveSupport::Concern

  # なくても良い
  included do
  end

  class_methods do
    def class_foo
      p "class good job!"
    end
  end

  def foo
    p "good job!"
  end
end

class Hoge
  include Foo
end

Hoge.new.foo # => "good job!"
Hoge.class_foo # => "class good job!"

module Foo
  extend ActiveSupport::Concern

  # なくても良い
  included do
    p "included Foo"
  end

  class_methods do
    def class_method
      p "Foo class good job!"
    end
  end
end

module Bar
  extend ActiveSupport::Concern
  include Foo

  included do
    p "included Bar"
  end

  class_methods do
    def class_method
      super
      p "Bar class good job!"
    end
  end
end

class Hoge
  include Bar
end

Hoge.class_method # =>
# "included Foo"
# "included Bar"
# "Foo class good job!"
# "Bar class good job!"

class Foo
  @@foo = 1
  def bar
    puts @@foo
  end
end

@@foo = 1

class Foo
  @@foo = 1
end
class Bar < Foo
  p @@foo += 1 # => 2
end
class Baz < Bar
  p @@foo += 1 # => 3
end

module Foo
  @@foo = 1
end
class Bar
  include Foo
  p @@foo += 1 # => 2
end
class Baz
  include Foo
  p @@foo += 1 # => 3
end

@foo = 'foo'

class Foo
  # initializeメソッドからアクセス
  def initialize(foo)
    @foo = foo
    p "#{@foo} が初期化されました。"
  end

  # インスタンスメソッドからアクセス
  def bar
    p "barメソッドから #{@foo} がプリントされました。"
  end

  # クラスメソッドからアクセス
  def self.foobar
    p @foo
  end
end

# initializeメソッドからはアクセスできる
foo = Foo.new("foo") # => 'foo が初期化されました。'

# 各インスタンスごとに違う値を持つことができる
foo2 = Foo.new("bar") # => 'bar が初期化されました。'

# インスタンスメソッドからもアクセスできる
foo.bar # => 'barメソッドから foo がプリントされました。'
foo2.bar # => 'barメソッドから bar がプリントされました。'

# クラスメソッドからはアクセスできない
Foo.foobar # => nil

class Foo
  # attr_accessorを定義する
  attr_accessor :foo

  # initializeメソッドからアクセス
  def initialize(foo)
    @foo = foo
    p "#{@foo} が初期化されました。"
  end

  # インスタンスメソッドからアクセス
  def bar
    p "barメソッドから #{@foo} がプリントされました。"
  end

  # クラスメソッドからアクセス
  def self.foobar
    p @foo
  end
end

foo = Foo.new("foo1") # => 'foo1 が初期化されました。'
foo.bar # => 'barメソッドから foo1 がプリントされました。'
foo.foo = "foo2" # => 'foo2'
foo.bar # => 'barメソッドから foo2 がプリントされました。'

(オブジェクト).(メソッド名)

str = "hello, world!"
p str.class # => String

class Greet
  def hello(name)
    p "こんにちは、" + name + "さん"
  end
end

greet = Greet.new
greet.hello("Jo") # => "こんにちは、Joさん"

class クラス名
  # クラスの内容
end

def メソッド名
  # 実行する処理
end

インスタンス名 = クラス名.new

pry(main)> Class.superclass
=> Module

pry(main)> Module.superclass
=> Object

module M
  def foo
    'module method'
  end
end

class C
  include M
end

puts C.new.foo
# => module method

module M1
  def foo
    'method foo'
  end
end

module M2
  def bar
    'method bar'
  end
end

class C
  include M1
  include M2
end

puts C.new.foo
puts C.new.bar
# => method foo
# => method bar

module M1
  class Foo
    def foo
      'foo'
    end
  end
end

module M2
  class Foo
    def bar
      'bar'
    end
  end
end

puts M1::Foo.new.foo
puts M2::Foo.new.bar
# => foo
# => bar

module M1
  def foo
    'module foo'
  end
end

class A
  def foo
    'class foo'
  end
end

class B < A
  include M1
end

puts B.new.foo
# => module foo

module M1
  def foo
    'M1 foo'
  end
end

module M2
  def foo
    'M2 foo'
  end
end

class A
  include M1
  include M2
end

puts A.new.foo
# => M2 foo