Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

環境構築 | Ubuntu18.04 + docker-composeでrailsアプリケーション開発 その0001

参考にさせて頂いたページ

docker-composeのインストール

docker daemonの起動とか

dockerコマンドをsudo無しで実行する方法

docker-compose を使ってrailsの開発環境を構築する

はじめに

途中で躓きすぎてどの辺が上手くいったのかよくわからないです。

ホスト環境

dockerをインストールしてhello worldをやってみる

sudo無しでdockerコマンドを実行できるようにする

以下のリンクは2つありますが、手順をひとつ試して上手くいかない場合には端末を再起動してみてから、もう一つの方法を試すといいかもしれません。

docker-compose をインストールする

公式ドキュメント通りやってみて上手くいかなかったら個人の記事に頼ります。

docker daemonの起動とか

docker daemonの起動とか、自動で起動する方法とかもここで押さえておくと良さそうです。

railsの環境構築をする

だいたい以下のページを参考にさせて頂きました。

ディレクトリを作成して移動

mkdir project
cd project

docker-compose.ymlを作成

自分は version: '2' にしないとエラーが出ましたのでそこだけ変更しています。

自分のdocker-compose ymlの内容は下記の通りです。

version: '2'

services:
  web:
    build: .
    ports:
      - "3000:3000"
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/myapp
      - bundle:/usr/local/bundle
    depends_on:
      - db
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: password
    # MYSQL_ALLOW_EMPTY_PASSWORD: "yes"  パスワードなしにしたい場合はこれ
    ports:
      - '3306:3306'
    volumes:
      - mysql_data:/var/lib/mysql
volumes:
  bundle:
  mysql_data:

Dockerfileを作成

rubyバージョンだけ新しいものにしていますが、それ以外はそのままです。

FROM ruby:2.6.3
ENV LANG C.UTF-8

RUN apt-get update -qq && apt-get install -y \
    build-essential \
    nodejs \
 && rm -rf /var/lib/apt/lists/*

RUN gem install bundler

WORKDIR /tmp
ADD Gemfile Gemfile
ADD Gemfile.lock Gemfile.lock
RUN bundle install

ENV APP_HOME /myapp
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME
ADD . $APP_HOME

Gemfileを作成

Gemfileはそのままです。railsのバージョンも新しい方が良いかもしれませんが。

source 'https://rubygems.org'

gem 'rails', '5.1.4'

Gemfile.lockを作成

空のファイルを作成します。

以下のコマンドで作成しました。

touch Gemfile.lock

コマンド実行

参考ページにならってwebサービスrails newします。

docker-compose run --rm web bundle exec rails new . --force --database=mysql --skip-bundle

docker-compose buildします。

docker-compose build

webサービスにbundle installしてgemをインストールします。

docker-compose run --rm web bundle install

docker-compose upします。

docker-compose up

以下の表示で止まりました。

db_1  | Version: '5.7.26'  socket: '/var/run/mysqld/mysqld.sock'  port: 3306  MySQL Community Server (GPL)

ブラウザでアクセスしてみる

http://localhost:3000/ にブラウザでアクセスしたらrailsの初期ページが表示されました。

一度止める

別タブでprojectディレクトリまで移動して、以下のコマンドで止まります。

docker-compose down

ディレクトリとファイルの所有者変更

このままだとrails newによって生成されたファイルの所有者がrootなので、以下のような感じで所有者を変更すると編集しやすいと思います。

.gitディレクトリを削除

projectディレクトリに.gitディレクトリが作成されているので削除すると良いと思います。

任意のgitリポジトリで管理する

projectディレクトリを丸ごと任意のgitリポジトリにコミットすると楽だと思います。

今後サーバーを起動するとき

以下のように-dを付けてバックグラウンドで起動するのも良いと思います。

docker-compose up -d

| Ubuntu18.04 + dockerのCentOSイメージでrails その0001

はじめに

全くまとまってい ない自分用メモです。

この手順通りやっても動くかどうかもわかりません。

そのうち暇なときにまとめ直そうと思います。

dockerのインストールとHelloWorld

まず以下の記事の手順でHelloWorldまでやりました。

ubuntu18.04でdockerのHelloWorldまでやってみる - Motomichi Works Blog

centos:7イメージからコンテナを作る

だいたい「vagrantその0029 Windows10 Home + Vagrant + centos-7.3.boxで作った環境にdockerをインストールする - Motomichi Works Blog」のような感じですが、コンテナを作成するときに「dockerのCentOS7.3コンテナでFailed to get D-Bus connection: Operation not permittedになる問題を解決する - Motomichi Works Blog」をしないとpostgresqlのインストールができませんでした。

postgresqlを使う設定でrails newするところまでやる

Dockerfileをもとにimageを生成

sudo docker build -t motomichi/rails ./

コンテナを作成しつつ起動

Failed to get D-Bus connection: Operation not permittedのエラーにならないために--privileged/sbin/initのところがポイント。

mkdir project
cd project
sudo docker run --privileged -i -d -p 8080:3000 -v "${PWD}:/work/project" --name 'rails_tutorial_20180929' motomichi/rails /sbin/init

コンテナに入る

sudo docker exec -it rails_tutorial_20190201 /bin/bash

vimをインストール

# yum install -y vim

sudoをインストール

yum -y install sudo

postgresqlをインストール

リポジトリを追加します。

# yum install -y https://yum.postgresql.org/9.6/redhat/rhel-7-x86_64/pgdg-redhat96-9.6-3.noarch.rpm

postgresql96-server postgresql96-contrib postgresql96-develをインストールします

# yum install -y postgresql96-server postgresql96-contrib postgresql96-devel

psqlコマンドが使えるか確認します。

# psql --version

postgresqlの初期化と起動

初期化します。

# /usr/pgsql-9.6/bin/postgresql96-setup initdb

起動します。

# systemctl start postgresql-9.6.service

OS起動時にpostgresqlが自動で起動するようにします。

# systemctl enable postgresql-9.6.service

CentOS7のコンテナ内にexample_userユーザーを追加しておく

CentOSのコンテナ内にexample_userという名前のユーザーを追加して、パスワードを設定します。

# adduser example_user
# passwd example_user

パスワード: ex_pass

一度rootユーザーからexample_userに切り替えてみます。

# su - example_user

一度rootユーザーに戻します。

$ exit

postgresqlのroleを設定する

https://qiita.com/torini/items/9952d91c4a7087b23481 を参考に進めます。

PostgreSQLのroot userであるpostgresユーザとしてpsqlを実行する

# su - postgres
$ psql

createdbできるroleをexample_userというユーザー名で作成します。

postgres=# create role example_user with createdb login password 'pg_pass';
postgres=# \q

rootに戻ります。

-bash-4.2$ exit

postgresを使う設定でrails newする

example_userに切り替えます。

# su - example_user

移動します。

$ cd /work/project/

postgresqlを使う設定でrails newします。

$ rails new project_1 -d postgresql

自動的にbundle installしたときにErrorが出た様子。

         run  bundle install
The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching gem metadata from https://rubygems.org/.........
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies....
Fetching rake 12.3.2
Errno::EACCES: Permission denied @ rb_file_s_rename - (/home/example_user/.gem/ruby/2.5.0/cache/rake-12.3.2.gem,
/usr/local/rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/cache/rake-12.3.2.gem)
An error occurred while installing rake (12.3.2), and Bundler cannot continue.
Make sure that `gem install rake -v '12.3.2' --source 'https://rubygems.org/'` succeeds before bundling.

ここで以下の手順を実行します。(※ここで yum install -y sudo をして visudo してusermod -aG wheel sampleuserしました。)

CentOSでuserをsudo可能にする - Qiita

もう一度

$ cd /work/project/project_1
$ bundle install

パスワードを何回か聞かれつつ、example_userのruby gemsにgemが追加されていきます。

gem pgのインストール部分でエラーが出たので解消する

以下のエラーが出ました。

To see why this extension failed to compile, please check the mkmf.log which can be found here:

  /tmp/bundler20190201-988-tslah6pg-1.1.4/extensions/x86_64-linux/2.5.0-static/pg-1.1.4/mkmf.log

extconf failed, exit code 1

Gem files will remain installed in /tmp/bundler20190201-988-tslah6pg-1.1.4/gems/pg-1.1.4 for inspection.
Results logged to /tmp/bundler20190201-988-tslah6pg-1.1.4/extensions/x86_64-linux/2.5.0-static/pg-1.1.4/gem_make.out

An error occurred while installing pg (1.1.4), and Bundler cannot continue.
Make sure that `gem install pg -v '1.1.4' --source 'https://rubygems.org/'` succeeds before bundling.

In Gemfile:
  pg
         run  bundle exec spring binstub --all
bundler: command not found: spring
Install missing gem executables with `bundle install`

単体でインストールしてみます。

$ gem install pg

以下のエラーが出ました。

Fetching: pg-1.1.4.gem (100%)
ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the /usr/local/rbenv/versions/2.5.1/lib/ruby/gems/2.5.0 directory.

このディレクトリはrootの権限でないと駄目そうなのでrootでgem install pgしてみます。

$ exit
# gem install pg

以下のエラーが出ました。

[root@48219310fa38 project]# gem install pg
Building native extensions. This could take a while...
ERROR:  Error installing pg:
    ERROR: Failed to build gem native extension.

    current directory: /usr/local/rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/pg-1.1.4/ext
/usr/local/rbenv/versions/2.5.1/bin/ruby -r ./siteconf20190131-3636-1ac726.rb extconf.rb
checking for pg_config... no
No pg_config... trying anyway. If building fails, please try again with
 --with-pg-config=/path/to/pg_config
checking for libpq-fe.h... no
Can't find the 'libpq-fe.h header
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
    --with-opt-dir
    --without-opt-dir
    --with-opt-include
    --without-opt-include=${opt-dir}/include
    --with-opt-lib
    --without-opt-lib=${opt-dir}/lib
    --with-make-prog
    --without-make-prog
    --srcdir=.
    --curdir
    --ruby=/usr/local/rbenv/versions/2.5.1/bin/$(RUBY_BASE_NAME)
    --with-pg
    --without-pg
    --enable-windows-cross
    --disable-windows-cross
    --with-pg-config
    --without-pg-config
    --with-pg_config
    --without-pg_config
    --with-pg-dir
    --without-pg-dir
    --with-pg-include
    --without-pg-include=${pg-dir}/include
    --with-pg-lib
    --without-pg-lib=${pg-dir}/lib

To see why this extension failed to compile, please check the mkmf.log which can be found here:

  /usr/local/rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/extensions/x86_64-linux/2.5.0-static/pg-1.1.4/mkmf.log

extconf failed, exit code 1

Gem files will remain installed in /usr/local/rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/pg-1.1.4 for inspection.
Results logged to /usr/local/rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/extensions/x86_64-linux/2.5.0-static/pg-1.1.4/gem_make.out

pg_configが見つからないということで、pathを指定してみるといいらしい。

# gem install pg -v '1.1.4' -- --with-pg-config=/usr/pgsql-9.6/bin/pg_config

もう一度example_userに切り替え

# su - example_user

移動します。

$ cd /work/project/project_1/

Gemfileに追記しないとrails sしたときにエラーが出てしまうので追記します。
gem 'mini_racer', platforms: :rubyの下あたりに追記します。
このあたりはrailsのバージョンによって何を書くか、消すかなど微妙に違います。

gem 'therubyracer', platforms: :ruby

bundle installします。

$ bundle install

rails sします。

$ rails s

config/database.ymlに追記します。

  # 以下の4つを追記
  username: example_user
  password: pg_pass

  # RailsサーバとPostgreSQLサーバが同じ場合
  host: localhost
  template: template0

rootユーザーに切り替えてpg_hba.confを編集します。

$ exit
# vim /var/lib/pgsql/9.6/data/pg_hba.conf

IPv4のところを以下のようにmd5に編集しました。

# IPv4 local connections:
#host    all             all             127.0.0.1/32            ident
host    all             all             127.0.0.1/32            md5

設定を反映するためにpostgresを再起動します。

# systemctl restart postgresql-9.6.service

example_userに切り替えて rails db:createします。

# su - example_user
$ cd /work/project/project_1
$ rails db:create
$ rails s

http://localhost:8080/ をブラウザで確認するとrailsのスタートページが表示されました。

Vue.jsでもデザインと振る舞いを分ける(Presentational ComponentとContainer Component について)

参考にさせて頂いたページ

Vue Loader公式

色々

Presentational ComponentとContainer Component について

所感

.vueファイルを以下の3つに分離すると再利用性が高まる

  • HTML文書構造(Template)
  • スタイル(Style)
  • 振る舞い(Script)

具体的には以下のようにsrcを指定すると良さそう。

SFC Spec | Vue Loader

node-sassでディレクトリごとwatch(監視)する

node-sassでディレクトリごとwatch(監視)する

例えば以下のような感じです。

$ node-sass src/entry_points/ -o public/stylesheets/ -w

一応解説すると以下の通りです。-wwatchです。

$ node-sass [監視したいディレクトリ] -o [書き出したいディレクトリ] -w

webpackでビルドする前にeslintで.vueと.jsの構文チェックをする | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0004

参考にさせて頂いたページ

webpack.config.jsについて

eslintについて

eslint-loaderのoptionsについて

色々

以前書いた記事

グローバルにインストール

npm install -g eslint

プロジェクトにインストール

まず以下の4つのモジュールをインストールします。

npm install --save-dev eslint eslint-loader babel-eslint eslint-config-vue eslint-plugin-vue

eslint-config-standard - npm」を入れます。依存するモジュールが4つあるのでまとめてインストールします。

npm install --save-dev eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

ここまでやった段階でのpackage.json

{
  "name": "webpack_4_vue_introduction",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "webpack -d --watch",
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.4.3",
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.7.1",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "eslint": "^5.16.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-config-vue": "^2.0.2",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-import": "^2.17.1",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-promise": "^4.1.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.2.2",
    "jest": "^24.7.1",
    "jest-serializer-vue": "^2.0.2",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "vue-jest": "^3.0.4",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  },
  "dependencies": {
    "vue": "^2.6.10",
    "vuex": "^3.1.0"
  }
}

webpack.config.jsの編集

rulesに以下のeslint-loaderをrulesの.vueと.jsの二か所に追記します。

          {
            loader: 'eslint-loader',
          },

ここまでやった段階でのwebpack.config.js

以下のようになりました。

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  // entry point
  entry: {
    'javascripts/first_page': './src/javascripts/entry_points/first_page.js',
  },
  // 出力するパスは絶対パスで書きます
  output: {
    path: `${__dirname}/webroot/packed`,
    filename: (arg) => {
      return '[name].bundle.js'
    },
  },
  // webpack4はlordersではなくなりました
  module: {
    rules: [
      // 拡張子.vueのファイルに対する設定
      {
        test: /\.vue$/,
        use: [
          {
            loader: "vue-loader",
            options: {
              loaders: {
                js: 'babel-loader',
              },
            },
          },
          {
            loader: 'eslint-loader',
          },
        ]
      },
      // 拡張子.jsのファイルに対する設定
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: 'eslint-loader',
          },
        ]
      },
      // 拡張子.scssのファイルに対する設定(.vueの中にscssを書きたい場合もここに設定します。)
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
          },
        ]
      },
    ]
  },
  // デフォルトの設定値だけでは足りないことについて解決します
  resolve: {
    // モジュールを読み込むときに検索するディレクトリの設定
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    // importするときに省略できる拡張子の設定
    extensions: ['.js', '.vue'],
    alias: {
      // importのファイルパスを相対パスで書かないようにsrcのrootを設定
      '@': path.join(__dirname, 'src'),
      // 例えばmain.js内で `import Vue from 'vue';` と記述したときの`vue`が表すファイルパスを指定
      'vue$': 'vue/dist/vue.esm.js'
    },
  },
  // プラグインを列挙
  plugins: [
    new VueLoaderPlugin()
  ],
}

.eslintrc.jsを空ファイルで作成

.eslintrcは以前は拡張子がありませんでしたが、今は拡張子を付けることが推奨されています。

.eslintrcは色々な拡張子で作成できます。

jsonの例をよく見かける気がしますが、jsonは記述ルールが厳しいので、.jsにしようと思います。

windowsの場合

copy nul .eslintrc.js

macの場合

touch .eslintrc.js

.eslintrc.jsの記述内容

以下の通り記述します。

module.exports = {
  "extends": [
    // eslint-plugin-vue(.vueファイルのtemplateとscriptのlint)をextend
    "plugin:vue/recommended",
    // eslint-config-standardをextend
    "standard",
  ],
  "parserOptions": {
    // ecmaVersionを指定
    "ecmaVersion": 6,
    // type="module"をサポート
    "sourceType": "module",
    // parserを指定
    "parser": "babel-eslint",
  },
  "env": {
    // browserが持っているオブジェクトをサポート
    "browser": true,
    // ES2015以降に追加された組み込みオブジェクトをサポート
    "es6": true
  },
  "globals": {},
  "rules": {
    "semi": ["error", "always"],
    "comma-dangle": ["error", "always-multiline"],
  }
}

一度ビルドしてみる

webpack -d

以下のような感じでとても多くの構文エラーが出ました。

何行目の何文字目がエラーなのか書いてあります。

   1:22  error    Extra semicolon                                                               semi
   6:1   error    Import in body of module; reorder to top                                      import/first
   6:70  error    Extra semicolon                                                               semi
   8:33  error    Extra semicolon                                                               semi
  10:1   error    Do not use 'new' for side effects                                             no-new
  14:3   warning  The "components" property should be above the "template" property on line 13  vue/order-in-components
  15:3   error    Extra semicolon                                                               semi
  16:1   error    Too many blank lines at the end of file. Max of 0 allowed                     no-multiple-empty-lines

構文を修正する

以下はルールの一例です。コツコツ修正するか、後述するautofixのoptionを追加してから再度ビルドします。

  • 'mapGetters' is defined but never used: 変数を定義しているが使われていない
  • 'mapActions' is defined but never used: 変数を定義しているが使われていない
  • Extra semicolon: 余計なセミコロンがある
  • The "components" property should be above the "template" property on line 13: 記述する順番が規約に沿ってない
  • Expected 1 line break after opening tag ('<button>'), but no line breaks found: 改行してない
  • Missing trailing comma: カンマが無い
  • Missing space before function parentheses: (の前に半角スペースが無い
  • Expected a space before '/>', but not found: /の前に半角スペースが無い
  • Property name "app" is not PascalCase: 一文字目は大文字にする
  • Do not use 'new' for side effects: newする場合は変数に入れる

自動修正の設定をする

webpack.config.jsに以下のようにoptionsを設定することで、ビルドの度に自動修正することができるので、自動修正したい場合は設定します。

webpack.config.jsを二か所修正しておきます。

          {
            loader: 'eslint-loader',
            options: {
              fix: true,
            },
          },

ここまでやった段階でのwebpack.config.js

以下のようになりました。

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  // entry point
  entry: {
    'javascripts/first_page': './src/javascripts/entry_points/first_page.js',
  },
  // 出力するパスは絶対パスで書きます
  output: {
    path: `${__dirname}/webroot/packed`,
    filename: (arg) => {
      return '[name].bundle.js'
    },
  },
  // webpack4はlordersではなくなりました
  module: {
    rules: [
      // 拡張子.vueのファイルに対する設定
      {
        test: /\.vue$/,
        use: [
          {
            loader: "vue-loader",
            options: {
              loaders: {
                js: 'babel-loader',
              },
            },
          },
          {
            loader: 'eslint-loader',
            options: {
              fix: true,
            },
          },
        ]
      },
      // 拡張子.jsのファイルに対する設定
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: 'eslint-loader',
            options: {
              fix: true,
            },
          },
        ]
      },
      // 拡張子.scssのファイルに対する設定(.vueの中にscssを書きたい場合もここに設定します。)
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
          },
        ]
      },
    ]
  },
  // デフォルトの設定値だけでは足りないことについて解決します
  resolve: {
    // モジュールを読み込むときに検索するディレクトリの設定
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    // importするときに省略できる拡張子の設定
    extensions: ['.js', '.vue'],
    alias: {
      // importのファイルパスを相対パスで書かないようにsrcのrootを設定
      '@': path.join(__dirname, 'src'),
      // 例えばmain.js内で `import Vue from 'vue';` と記述したときの`vue`が表すファイルパスを指定
      'vue$': 'vue/dist/vue.esm.js'
    },
  },
  // プラグインを列挙
  plugins: [
    new VueLoaderPlugin()
  ],
}

もう一度ビルドする

自動修正の設定をした場合、今回の構文エラーのほとんどはこれで直ります。

webpack -d

Do not use 'new' for side effects を修正する

src/javascripts/entry_points/first_page.jsを編集します。

以下のようにしました。

import Vue from 'vue';
import Vuex from 'vuex';
import store from '@/javascripts/vue_applications/pages/first_page/store';

import App from '@/javascripts/vue_applications/pages/first_page/App';
Vue.use(Vuex);

Vue.config.productionTip = false;

const vm = new Vue({
  store,
  components: { App },
  template: '<App/>',
});

vm.$mount('#app');

出力されるWarningメッセージについて

ESLint v5.0.0 変更点まとめ - Qiita

eslint実行時に以下のWarningメッセージが出力されています。
これはeslint5から表示されるようになったようです。
parserOptions.ecmaFeatures.experimentalObjectRestSpreadが非推奨でparserOptions.ecmaVersionを使用してくださいということらしいですが解決の仕方がわからず一旦このまま使っています。

(node:16602) [ESLINT_LEGACY_OBJECT_REST_SPREAD] DeprecationWarning: The 'parserOptions.ecmaFeatures.experimentalObjectRestSpread' option is deprecated. Use 'parserOptions.ecmaVersion' instead. (found in "vue")

またそのうちわかったら。

おわりに

.vueファイルの中にscssを書けるようにする | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0003

参考にさせていただいたページ

TextField.vueを編集する

src/javascripts/vue_applications/common/components/TextField.vueのtemplate に以下の通り追記します。

    <div class="mod-error-messages">
      <ul class="mod-error-messages__list">
        <li class="mod-error-messages__item">
          sample message
        </li>
      </ul>
    </div>

ファイル末尾に以下の通り追記します。

<style lang="scss" scoped>
  .mod-error-messages {
    .mod-error-messages__list {
      box-sizing: border-box;
    }
    .mod-error-messages__item {
      color: #ff0000;
    }
  }
</style>

TextField.vueは以下のようになりました。

<template>
  <section>
    <label>TextField: </label>
    <input
      :value="value"
      type="text"
      @input="onInput"
    >
    <div class="mod-error-messages">
      <ul class="mod-error-messages__list">
        <li class="mod-error-messages__item">
          sample message
        </li>
      </ul>
    </div>
    <div class="test-synced-text">
      value: {{ value }}
    </div>
  </section>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';

export default {
  name: 'TextField',
  computed: {
    ...mapState('textFieldUnit/textField', [
      'value',
    ]),
  },
  methods: {
    ...mapMutations('textFieldUnit/textField', [
      'setState',
    ]),
    onInput(e) {
      this.setState({
        key: 'value',
        value: e.target.value,
      });
    },
  },
}
</script>

<style lang="scss" scoped>
  .mod-error-messages {
    .mod-error-messages__list {
      box-sizing: border-box;
      border-radius: 4px;
    }
    .mod-error-messages__item {
      color: #ff0000;
    }
  }
</style>

一度ビルドを実行してみる

以下のコマンドでビルドを実行してみます。

webpack -d

以下のようなエラーが出ました。

ERROR in ./src/vue_applications/components/TextField.vue?vue&type=style&index=0&id=273a995e&lang=scss&scoped=true& (./node_modules/vue-loader/lib??vue-loader-options!./src/vue_applications/components/TextField.vue?vue&type=style&index=0&id=273a995e&lang=scss&scoped=true&) 40:0
Module parse failed: Unexpected token (40:0)
You may need an appropriate loader to handle this file type.
|
|
> .mod-error-message {
|   color: red;
| }
 @ ./src/vue_applications/components/TextField.vue?vue&type=style&index=0&id=273a995e&lang=scss&scoped=true& 1:0-160 1:176-179 1:181-338 1:181-338
 @ ./src/vue_applications/components/TextField.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/vue_applications/components/TextFieldUnit.vue?vue&type=script&lang=js&
 @ ./src/vue_applications/components/TextFieldUnit.vue?vue&type=script&lang=js&
 @ ./src/vue_applications/components/TextFieldUnit.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/vue_applications/App.vue?vue&type=script&lang=js&
 @ ./src/vue_applications/App.vue?vue&type=script&lang=js&
 @ ./src/vue_applications/App.vue
 @ ./src/index.js

node_modulesを追加する

.vueにscssを記述できるように以下の4つのモジュールを追加します。

npm install --save-dev style-loader css-loader sass-loader node-sass

ここまでやった段階でのpackage.json

{
  "name": "webpack_4_vue_introduction",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "webpack -d --watch",
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^24.5.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "jest": "^24.5.0",
    "jest-serializer-vue": "^2.0.2",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "vue-jest": "^3.0.4",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  },
  "dependencies": {
    "vue": "^2.6.10",
    "vuex": "^3.1.0"
  }
}

webpack.config.jsを編集する

rulesに渡している配列に以下の行を追加します。

.vueの中にscssを書くのですが、test: /\.scss$/,のルールを追加することになります。

      // 拡張子.scssのファイルに対する設定(.vueの中にscssを書きたい場合もここに設定します。)
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
          },
        ]
      },

ここまでやった段階でのwebpack.config.js

以下のようになっています。

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  // entry point
  entry: {
    'javascripts/first_page': './src/javascripts/entry_points/first_page.js',
  },
  // 出力するパスは絶対パスで書きます
  output: {
    path: `${__dirname}/webroot/packed`,
    filename: (arg) => {
      return '[name].bundle.js'
    },
  },
  // webpack4はlordersではなくなりました
  module: {
    rules: [
      // 拡張子.vueのファイルに対する設定
      {
        test: /\.vue$/,
        use: [
          {
            loader: "vue-loader",
            options: {
              loaders: {
                js: 'babel-loader',
              },
            },
          },
        ]
      },
      // 拡張子.jsのファイルに対する設定
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
          },
        ]
      },
      // 拡張子.scssのファイルに対する設定(.vueの中にscssを書きたい場合もここに設定します。)
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
          },
        ]
      },
    ]
  },
  // デフォルトの設定値だけでは足りないことについて解決します
  resolve: {
    // モジュールを読み込むときに検索するディレクトリの設定
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    // importするときに省略できる拡張子の設定
    extensions: ['.js', '.vue'],
    alias: {
      // importのファイルパスを相対パスで書かないようにsrcのrootを設定
      '@': path.join(__dirname, 'src'),
      // 例えばmain.js内で `import Vue from 'vue';` と記述したときの`vue`が表すファイルパスを指定
      'vue$': 'vue/dist/vue.esm.js'
    },
  },
  // プラグインを列挙
  plugins: [
    new VueLoaderPlugin()
  ],
}

もう一度ビルドを実行してみる

以下のコマンドでビルドを実行してみます。

webpack -d

今度はビルド成功したと思います。

first_page.htmlをブラウザで開いてみる

スタイルが適用されて赤い文字になっているのがわかります。

また、開発者ツールなどで確認してみると、セレクタが追加されてscopedな状態になっていることがわかります。

.scssファイルをコンパイルしたい場合

  • サーバーサイドのフレームワークに任せる
  • scss用のwbpack.config.jsを作成してwebpackでやる
  • webpackを使わずnode-sass + postcssでやる

サーバーサイドのフレームワークでできそうなら、vendor prefixもお任せしたい。

おわりに

今回のポイントは.vueにstyleを書くために、.scssのルールを追加するところだと思います。

変数やmixinなど複数のコンポーネントで共通して使用する部分をsass-resources-loaderで読み込むことができるのでそのうちこの記事に追記するかもしれません。

プリプロセッサの使用 · vue-loader

次回はeslintで.vueと.jsの構文チェックをしようと思います。

続きはこちら

motomichi-works.hatenablog.com

vue-test-utils + jestを追加する | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0002

参考にさせて頂いたページ

テストを実行する環境の構築

specファイルの書き方

はじめに

Windowsでもできます。

MacUbuntuなどでもできると思います。

これから何回かに分けてnpm initするところから、以下のようなことをできる環境を構築していきます。

  • webpack4 + babel7 を使ってビルド
  • vue-test-utils + jest を使ってテスト実行
  • eslintを使って .vue と .js の構文チェック

今日の環境

  • Windows10 Home
  • node v8.11.1
  • npm 5.8.0

前提

以下の記事の手順で基本的なビルド環境の構築をしたところまでが前提です。

続きとしてテストを実行できるようにしていきます。

node_modulesを追加する

以下の5つのモジュールを追加する必要があるようです。

Additional Dependencies

vue-test-utils jest babel-jest (for ES2015+ features in tests) vue-jest (for handling *.vue files in tests) jest-serializer-vue (for snapshot tests)

以下のコマンドでインストールしました。

npm install --save-dev @vue/test-utils jest babel-jest vue-jest jest-serializer-vue

package.jsonを編集

package.jsonのscriptsのtestを編集してjestを実行するようにします。

  "scripts": {
    "watch": "webpack -d --watch",
    "test": "jest"
  },

jest.config.jsの作成

windowsの場合

copy nul jest.config.js

macの場合

touch jest.config.js

jest.config.jsの編集

以下のように記述します。

module.exports = {
  // テスト対象の拡張子
  "moduleFileExtensions": [
    "js",
    "vue",
  ],
  // specファイル中の"^@/(.*)$"にマッチする文字列を"<rootDir>/src/$1"のパスに置き換えてテストを実行
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
  // transformerを設定
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
  },
  "snapshotSerializers": [
    "<rootDir>/node_modules/jest-serializer-vue",
  ],
}

ここまでやった段階でのpackage.json

以下のようになっています。

{
  "name": "webpack_4_vue_introduction",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "webpack -d --watch",
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-jest": "^24.5.0",
    "babel-loader": "^8.0.5",
    "jest": "^24.5.0",
    "jest-serializer-vue": "^2.0.2",
    "vue-jest": "^3.0.4",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  },
  "dependencies": {
    "vue": "^2.6.10",
    "vuex": "^3.1.0"
  }
}

testディレクトリを作成する

mkdir test

空ファイルを二つ作成する

windowsの場合

以下のコマンドで作成できると思います。

copy nul test\TextFieldUnit.spec.js
copy nul test\TextField.spec.js

macの場合

以下のコマンドで作成できると思います。

touch test/TextFieldUnit.spec.js
touch test/TextField.spec.js

./test/TextFieldUnit.spec.jsの作成とその記述内容

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
// modules
import textFieldUnit from '@/javascripts/vue_applications/common/modules/textFieldUnit.js'
// components
import TextFieldUnit from '@/javascripts/vue_applications/common/components/TextFieldUnit.vue'

const localVue = createLocalVue()

localVue.use(Vuex)

describe('TextFieldUnit.vue', () => {
  let store;

  beforeEach(() => {
    // 本来のthis.$storeに入るものと同様のオブジェクト構造を作成します。
    store = new Vuex.Store({
      state: {},
      getters: {},
      mutations: {},
      actions: {},
      modules: {
        textFieldUnit,
      },
    })
  })

  it('mutationsの動作確認', () => {
    const state = store.state.textFieldUnit;
    const key = 'count';

    textFieldUnit.mutations.setState(state, {
      key,
      value: state[key] + 1,
    });

    expect(state[key]).toBe(1);
  });

  it('ボタンのclickイベントが発火したとき', () => {
    const wrapper = shallowMount(TextFieldUnit, { store, localVue })
    const button = wrapper.find('button')

    // 初期値の検証
    expect(button.text()).toBe('count: 0')

    // イベント発火
    button.trigger('click')

    // 変更後の値の検証
    expect(button.text()).toBe('count: 1')
  });
})

./test/TextField.spec.jsの作成とその記述内容

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
// modules
import textFieldUnit from '@/javascripts/vue_applications/common/modules/textFieldUnit.js'
import textField from '@/javascripts/vue_applications/common/modules/textField.js'
// components
import TextField from '@/javascripts/vue_applications/common/components/TextField.vue'

const localVue = createLocalVue()

localVue.use(Vuex)

describe('TextField.vue', () => {
  let store;

  beforeEach(() => {
    // 本来のthis.$storeに入るものと同様のオブジェクト構造を作成します。
    store = new Vuex.Store({
      state: {},
      getters: {},
      mutations: {},
      actions: {},
      modules: {
        textFieldUnit,
      },
    });
  });

  it('mutationsの動作確認', () => {
    const state = store.state.textFieldUnit.textField;
    const key = 'value';

    textFieldUnit.mutations.setState(state, {
      key,
      value: 'editedValue',
    });

    expect(state[key]).toBe('editedValue');
  });

  it('テキストフィールドのinputがイベント発火したとき', () => {
    const wrapper = shallowMount(TextField, { store, localVue });
    const input = wrapper.find('input');
    const syncedText = wrapper.find('.test-synced-text');

    // 初期値の検証
    expect(input.element.value).toBe('defaultValue');
    expect(syncedText.text()).toBe('value: defaultValue');

    // イベント発火
    input.element.value = 'editedValue';
    input.trigger('input');

    // 変更後の値の検証
    expect(input.element.value).toBe('editedValue');
    expect(syncedText.text()).toBe('value: editedValue');
  });
});

testを実行してみる

package.jsonのscriptsに定義してあるので、以下のコマンドで実行できます。

npm run test

scoped packagesになったバージョンの@babel/babel-coreを使っているため以下のようなメッセージが出てテスト実行に失敗します。

  ● Test suite failed to run

    Cannot find module 'babel-core'

      at Object.<anonymous> (node_modules/vue-jest/lib/compilers/babel-compiler.js:1:15)

babel-bridge(@babel/coreへの橋渡し)

GitHub - babel/babel-bridge: A placeholder package that bridges babel-core to @babel/core.

さきほどのエラーでは Cannot find module 'babel-core' でした。
'babel-core' を探しにいったときに '@babel/core' へ橋渡しをできるようにします。

npm install --save-dev babel-core@^7.0.0-bridge.0 @babel/core

もう一度testを実行してみる

もう一度testを実行してみます。

npm run test

以下のように4つ成功したかと思います。

Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total

ここまでやった段階のpackage.jsonの記述内容

{
  "name": "webpack_4_vue_introduction",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "webpack -d --watch",
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^24.5.0",
    "babel-loader": "^8.0.5",
    "jest": "^24.5.0",
    "jest-serializer-vue": "^2.0.2",
    "vue-jest": "^3.0.4",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  },
  "dependencies": {
    "vue": "^2.6.10",
    "vuex": "^3.1.0"
  }
}

おまけ

以下のような感じでvmのcomputedやmethodsにもアクセスできます。

wrapper.vm.hoge

おわりに

testディレクトリに入っている.spec.jsファイルはもっとディレクトリ階層を深くしてもテストを実行できます。

以下のようなテストが実行できるようになりました。

  • Vueコンポーネントのテスト
  • Vuexのstoreのテスト
  • Vueとは関係なく定義した関数のテスト

今日はここまで。

次回は.vueの中にstyleを書けるようにしていこうと思います。

続きはこちら

motomichi-works.hatenablog.com