ためすう

アロー関数を使ってみる ( JavaScript )

2019-11-11

やったこと

アロー関数を使ってみます。

調査

アロー関数式は、より短く記述できる、通常の function 式の代替構文です。

Console

var f = () => 'return value';
undefined

f()
"return value"
var f2 = (a, b) => a + b;
undefined

f2(100, 50)
150

var f3 = (a, b) => { return a * b }
undefined

f3(20, 4)
80

参考

webpack を使ってみる

2019-11-10

やったこと

webpack を使ってみます。

React を webpack を使って起動します。

確認環境

$ node --version
v10.16.0
$ npm --version
6.9.0

調査

環境準備

必要なパッケージをインストールしていきます。

$ echo "{}" > package.json
$ npm install --save-dev webpack babel-loader babel-core babel-preset-react
$ npm install --save react react-dom

.babelrc の作成

$ touch .babelrc
{
  'presets': [
    '@babel/preset-env', '@babel/preset-react'
  ]
}

webpack.config.js の作成

$ toucn webpack.config.js
module.exports = {
  entry: './entry.js',

  output: {
    filename: 'output.js'
  },

  module: {
    rules: [
      {
        loader: 'babel-loader',
        exclude: /node_modules/,
        test: /\.js$/,
      }
    ]
  }
}

js ファイルの作成

entry.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';

ReactDOM.render(
  <Hello />,
  document.getElementById('root')
);

Hello.js

import React from 'react';

export default function Hello() {
  return <h1>Hello!!!</h1>;
}

ビルド

$ ./node_modules/.bin/webpack --config webpack.config.js

動作確認

index.html

<div id="root"></div>
<script src="/path/to/output.js"></script>

/path/to はご自身のパスに変更してください。

参考

Babel を使ってみる

2019-11-10

やったこと

Babel を使ってみます。

React で JSX で記述されているコードを JavaScript に変換します。

確認環境

$ node --version
v10.16.0
$ npm --version
6.9.0

調査

JSX

JSXは、JavaScriptの構文に対する拡張である

環境準備

$ echo "{}" > package.json
$ npm install --save-dev babel-cli babel-preset-react

ファイル作成

sample.js

ReactDOM.render(
  <ul>
    <li>aaa</li>
    <li>bbb</li>
  </ul>,
  document.getElementById('root')
)

変換

$ ./node_modules/.bin/babel --presets=react sample.js -d out
sample.js -> out/sample.js

out ディレクトリ以下に出力されます

参考

JavaScript で参照渡し Object.assign()

2019-11-10

やったこと

JavaScript の Object.assign() を使ってみます。

調査

参照渡し (意図せず値が変わってしまう)

Console

o = {a: 100, b: 200}
{a: 100, b: 200}

var o2 = o
undefined

o["a"] = 555
555

o2
{a: 555, b: 200}

Object.assign() を利用する場合

Console

o = {a: 100, b: 200}
{a: 100, b: 200}

var o2 = o
undefined

var o2 = Object.assign({}, o)
undefined

o["a"] = 555
555

o2
{a: 100, b: 200}

参考

React をインストールして立ち上げてみる

2019-11-10

やったこと

React を Mac にインストールして、起動してみます。

確認環境

$ node -v
v10.16.0
$ create-react-app --version
2.1.3

調査

$ create-react-app sample

サーバー起動

$ cd sample
$ yarn start

http://localhost:3000/ にアクセスするとページが見れます。

JavaScript でスプレッド構文を使う

2019-11-09

やったこと

スプレッド構文 を使ってみます。

調査

var t = ["x", "y", "z"]
function concat(a1, a2, a3) { return a1 + a2 + a3; }
console.log(concat(...t))
"xyz"

参考

npm install を使ってみる

2019-11-07

やったこと

npm install を使ってみます。

確認環境

$ npm --version
6.12.1

調査

グローバルインストール

$ npm install -g @babel/core @babel/cli

~/.npm-global/lib/node_modules/ へインストールされます。

ローカルインストール

$ npm install @babel/core @babel/cli --save-dev

–save-dev: Package will appear in your devDependencies.

package.json の devDependencies に依存します。

/path/to/node_modules へインストールされます。

参考

$ npm help install

Vuex を使ってみる

2019-11-05

やったこと

Vuex を使ってみます。

確認環境

Console Log

Vue.version
2.6.10

Vuex.version
3.1.1

調査

構成要素

  • ステート (state)
  • ゲッター (getter)
  • ミューテーション (mutation)
  • アクション (action)

処理は下記の流れで行われます。

アクション -> ミューテーション -> ステート -> ゲッター

実装例

sample.vue

<template>
  <p>template</p>
</template>

<script>
/* eslint-disable */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  // ステート
  state: {
    count: 1
  },

  // ミューテーション
  mutations: {
    double (state) {
      state.count *= 2
    },
    minus (state) {
      state.count *= -1
    }
  },

  // ゲッター
  getters: {
    mycount (state) {
      return state.count
    }
  },

  // アクション
  actions: {
    minusAction (ctx) {
      // ミューテーション呼び出し
      ctx.commit('double')
      ctx.commit('minus')
    }
  }
})

console.log('init')
console.log(store.getters.mycount)
store.dispatch('minusAction')
console.log(store.getters.mycount)

export default {
  // エラーが出ないように記述
  data () {
    return {}
  }
}
/* eslint-enable */
</script>

起動

$ vue serve sample.vue --open

出力結果

init
1
-2

参考

Vue.js の単一コンポーネント

2019-11-04

やったこと

Vue.js で component を指定するとき html の id 属性を利用して指定します。

確認環境

$ vue info

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.12.1 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 78.0.3904.70
    Firefox: 62.0
    Safari: 13.0.3
  npmGlobalPackages:
    @vue/cli: 4.0.5

調査

構成要素

template

HTML でコンポーネントを定義します。

script

UIコンポーネントの振る舞いを制御します。

css

コンポーネントの装飾をします。

実装準備

$ npm install -g @vue/cli-service-global

実装例

sample.vue

<template>
  <p class="message">{{ msg }}</p>
</template>

<script>
export default {
  data () {
    return { msg: 'Hello' }
  }
}
</script>

<style scoped>
.message { color: red; }
</style>

起動

$ vue serve sample.vue --open

css は head タグの中に挿入されます。

参考

Vue.js で component を id 指定する

2019-11-04

やったこと

Vue.js で component を指定するとき html の id 属性を利用して指定します。

確認環境

Console Log

Vue.version
"2.5.17"

調査

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <hoge></hoge>
    </div>
    <script src="https://unpkg.com/vue@2.5.17"></script>

    <script type="text/x-template" id="hoge">
      <p>hogehoge</p>
    </script>
    <script>
      Vue.component('hoge', {
        template: '#hoge'
      })
      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

参考