ためすう

export を使ってみる ( JavaScript )

2019-11-11

やったこと

export を使ってみます。

調査

エクスポートされたモジュールは、宣言のあるなしにかかわらず strict モードで動作します。

sample.html

<script type="module">
import greet from './my-module.js';

console.log('start');
console.log(greet());

</script>

my-module.js

export default function greet(x) {
  return 'heloooo!';
}

sample.html をローカルで開く (コンソール出力)

[Log] start (sample.html, line 4)
[Log] heloooo! (sample.html, line 5)

※ Safari で CORS を無効にするとローカルのブラウザで確認できます。

参考

アロー関数を使ってみる ( 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

参考

アロー関数 - JavaScript | MDN

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とwebpackを使ってES6でReactを動かすまでのチュートリアル - Qiita

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 ディレクトリ以下に出力されます

参考

React - Wikipedia

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}

参考

Object.assign() - JavaScript | MDN

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"

参考

スプレッド構文 - JavaScript | MDN

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

参考

Vuex 入門 | Vuex

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