Motomichi Works Blog

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

JSでテストコードを書く その0001 まずは記事を色々読んでみる

制作 javascript tdd_bdd

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

Mocha公式

Chai公式

概要が書かれている日本語のページ

以下の三つと、そこからリンクされているページを読んだら全く知識の無い状態からなんとなくわかってきました。

npmでeslint-config-airbnbを導入してみる

制作 javascript

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

ESLintでReactとES2015の構文チェック(eslint-config-airbnb) - dackdive's blog

ESLintをAtomに導入し、Reactの構文にも対応したAirbnbのJSスタイルガイドを使う | mae's blog

これまでのこと

以前「gulp-eslintの.eslintrcを作成する - MOTOMICHI WORKS BLOG」で色々インストールして、eslintのルールとかを適当に書いて使ってみるところまでやっていました。

前回の記事でeslintによる文法チェックは動作するので、eslint-config-airbnbをextendsすることでチェックされるルールが変わることになります。

eslint-config-airbnb をインストールしようとしたらエラーが出た

一か月ちょっと経った今日、airbnbのやつをextendsして少しいじる方向性にしようと思ったので、

「ESLintでReactとES2015の構文チェック(eslint-config-airbnb) - dackdive's blog」を参考にインストールを試してみました。

以下のパッケージのうち、以前インストール済みのパッケージもあったので、

  • eslint-config-airbnb
  • eslint-plugin-import
  • eslint-plugin-react
  • eslint-plugin-jsx-a11y
  • eslint

足りない三つだけをインストールしようと思い、以下のコマンドを実行したらエラーが出ました。

npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y

表示されたエラーの内容は以下の通りです。

npm WARN package.json dev-template-0001@1.0.0 No repository field.
npm WARN peerDependencies The peer dependency eslint@^3.3.0 included from eslint-config-airbnb will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency eslint-plugin-react@^6.0.0 included from eslint-config-airbnb will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency eslint@^3.3.1 included from eslint-config-airbnb-base will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "--save-dev" "eslint-config-airbnb" "eslint-plugin-import" "eslint-plugin-jsx-a11y"
npm ERR! node v4.4.7
npm ERR! npm  v2.15.8
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package eslint-plugin-react@5.2.2 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer eslint-config-airbnb@10.0.1 wants eslint-plugin-react@^6.0.0

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\motomichi\Desktop\all\git_repos_all\github\MotomichiWorks\dev-template-0001\npm-debug.log

どうも以前インストールした以下の二つのパッケージのバージョンが古いので eslint@^3.3.0 と eslint-plugin-react@^6.0.0 にupdateする必要がありそう。

普通に5個のパッケージを一緒にインストールしたらこんなエラーは出なかったんでしょうね。

package.jsonを編集してから以下のコマンドを実行しました。

npm update

新しいバージョンにアップデートされたので、改めてさっき失敗したコマンドを再度実行してみたら大丈夫でした。

npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y

これでよし。

.eslintrcの作成とその記述内容

参考ページにならって以下の通り。

{
  "extends": "airbnb"
}

あとはairbnbのルールを基盤に適当にrulesを調整していこうと思います。

今回はここまで。

inline-blockの左右にできる隙間を解消する

制作

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

display:inline-block;でできた隙間をなくす4つの方法 | webledge

inline-blockを並べた場合に発生する「隙間」を消去するCSS » INSPIRE TECH

適切な方法は？

最近はletter-spacingの値に-0.40emを設定して埋めるのが検索上位に出てくるけど、個人的にはfont-size:0;を親要素に設定してる。

主流な方法というか、適切な方法はどれなんだろうか。

すぐに忘れてしまうのでちょっと書き留めておく。

Bootstrap3のbreakpointとcontainer幅とgrid内余白を変更する

制作

はじめに

breakpointとcontainer幅について復習します。

以下のURLの日本語リファレンスの表を参考にさせて頂きました。

グリッド・システム ≪ CSS ≪ Bootstrap3日本語リファレンス

windowサイズが以下それぞれの数値のときに、container幅もそれに対応した数値になります。

Window幅 container幅
～767px None (auto)
768px～991px 750px
992px～1199px 970px
1200px～ 1170px

上記した数値はそれぞれ変数があるので、そのペアを変更することになります。

Bootstrapのsass版をダウンロードする

「Bootstrap · The world's most popular mobile-first and responsive front-end framework.」で bootstrap-sass-3.3.7.tar.gz をダウンロードしました。

どこを編集するのか

圧縮されたファイルを展開すると、中に「assets/stylesheets/bootstrap/_variables.scss」があるので、その中を編集します。

breakpoint

breakpoint設定の変数は以下の4つです。

  • $screen-xs: 480px !default;
  • $screen-sm: 768px !default;
  • $screen-md: 992px !default;
  • $screen-lg: 1200px !default;

$screen-xsはcontainerの幅変更には関与していませんが、他のコンポーネントで使用されています。

container幅

container幅設定の変数は以下の4つです。

  • $container-tablet: (720px + $grid-gutter-width) !default;
  • $container-desktop: (940px + $grid-gutter-width) !default;
  • $container-large-desktop: (1140px + $grid-gutter-width) !default;

grid内余白

以下の変数が該当箇所なのですが、影響を与えるコンポーネントは少なくないので、0など極端な数値に変更したい場合はコンパイルした後で個別に変更した方が良いかもしれません。

  • $grid-gutter-width: 30px !default;

編集する

例えばcontainerの最大幅が1170pxだと狭いと感じる場合は、$container-large-desktop と $screen-lg を変更すると良いでしょう。

コンパイルする

普段はgulpやWebpackを使っているのでわからなくなりがちなのですが、「assets/stylesheets/_bootstrap.scss」を以下のコマンドでコンパイルします。

sass _bootstrap.scss:bootstrap.css

WindowsでAtomを使ってみる

制作

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

縦線を消す wrap-guide

Atomでエディター内の縦線を消す方法 | IDEA*IDEA

設定とかプラグイン、ショートカットキーのこと

WindowsでAtomをインストールして使ってみる - Qiita

環境

  • Windows10
  • Atom v1.8.0 (2016-07-29現在)

ウィンドウを分割する

Atom エディタで画面分割する方法 - Qiita

設定を変更追加する

ウィンドウ上部のメニューから File > Settings を選択する。

ウィンドウ内の Install を選択して、フィールドに例えば japanese-menu と入力して、Packagesボタンをクリック。

Theme

とりあえずmonokaiにした。

その他

japanese-menu

メニューが日本語になる。インストールしてないけど、一応書いておく。

show-ideographic-space

全角スペースが可視化される。

minimap

sublimetextでウィンドウの右端に出てくるあれ。

emmet

HTMLやCSSの入力支援。

-

今後も少しずつ更新予定。

webpackを使ってES2015、Vue.jsのビルド環境を構築する

制作 webpack vuejs

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

webpackのすごく基本

webpack で始めるイマドキのフロントエンド開発 - Qiita

以前書いたReact.jsの記事

webpackを使ってES2015、React.jsのビルド環境を構築する - Motomichi Works Blog

Vue.jsでの記述例について

vue.js + webpack の紹介(その2) - Qiita

https://github.com/vuejs/vue-webpack-example/blob/master/src/views/a/index.js

プロジェクトディレクトリを作成

webpack-vue-sampleディレクトリを作成した。

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

npm install -g webpack babel

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

まずpackage.jsonを作成する。

npm init

webpack-vue-sammpleディレクトリで以下のコマンドを実行した。

npm install --save-dev webpack vue html-loader babel-core babel-loader babel-preset-es2015

今回webpack-vue-sample内に作成するディレクトリ構造とファイル

以下のディレクトリやファイルを手順に沿って作成していきます。

  • index.html
  • package.json
  • webpack.config.js
  • node-modules/*
  • src/main.js
  • src/vue-materials/sample.js
  • src/vue-materials/template-hoge.html
  • src/vue-materials/template-foo.html
  • result/bundle.js

webpack.config.jsの作成とその記述内容

webpack-vue-sampleディレクトリに作成した。記述内容は以下の通り。

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: `${__dirname}/result`,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        loader: 'babel-loader',
        exclude: /node_modules/,
        test: /\.js[x]?$/,
        query: {
            cacheDirectory: true,
            presets: ['es2015']
        }
      },
      {
        test: /\.html$/,
        loader: "html-loader"
      }
    ]
  },
  resolve: {
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    extensions: ['.js']
  },
  plugins: []
}

./src/main.jsの作成とその記述内容

require('./vue-materials/sample');

./src/vue-materials/sample.jsの作成とその記述内容

templateをrequire()するところ以外は普通のVue.jsの記述と同じで、以下の通り。

var Vue = require('vue');

var app = new Vue({
  el : '#app',
  components: {
    'my-hoge': {
      template: require('./template-hoge.html')
    },
    'my-foo': {
      template: require('./template-foo.html')
    }
  }
});

./src/vue-materials/template-hoge.htmlの作成とその記述内容

<div>テンプレート hoge</div>

./src/vue-materials/template-foo.htmlの作成とその記述内容

<div>テンプレート foo</div>

index.htmlの作成とその記述内容

webpack-vue-sampleディレクトリに作成した。
webページ作成用の普通のhtmlです。コンパイルされたbundle.jsを読み込みます。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>vue-tutorial</title>
</head>
<body>

<div id="app">
  <my-hoge></my-hoge>
  <my-foo></my-foo>
</div>

<script type="text/javascript" src="result/bundle.js"></script>
</body>
</html>

watchしてコンパイルしてみる

webpack -d --watch

src/vue-materials/template-hoge.htmlなどを編集して保存すると、result/bundle.jsが生成される。

ページを見てみる

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

確認できた。