Motomichi Works Blog

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

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

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

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のすごく基本

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をブラウザで開いてみる。

確認できた。

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

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

webpackのすごく基本

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

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

Webpackでイチから作るReact.js開発環境 - Qiita

babelとwebpackを使ってES6でreactを動かすまでのチュートリアル - Qiita

grunt glup webpack それぞれでBabelでES2015の自動コンパイル環境を作る(比較のため)

BabelでES2015の自動コンパイル環境を作る(Browserify / gulp / Grunt / webpack) | mae's blog

.babelrcがバージョン6以降は必要だとかそういう感じの話

Babelを6系にアップデートしたらgulpでこける - Qiita

gulp をやめて webpack

gulpでjsのビルドをしていたのだけれど、色々あってjsのビルドはwebpackを使うことにした。

以下のページを参考に、環境構築をしてみる。

webpackをインストール

グローバル

npm install -g webpack

プロジェクトにも

npm install --save-dev webpack

他のパッケージもインストール

グローバル

npm install -g babel

プロジェクト

npm install --save-dev react react-dom babel-core babel-loader babel-preset-es2015 babel-preset-react

webpackの場合は、babelを使う為にbabel-loaderやbabel-coreなどが必要らしい。

あとはgulpのときにも使用していたパッケージだけど一応書いておいた。

参考ページにならって進める

引き続き以下のページにならって進めたらできると思う。

Webpackでイチから作るReact.js開発環境 - Qiita

その他

以下のページも読んでおくと.babelrcのことなども書いてあって良いかも。

babelとwebpackを使ってES6でreactを動かすまでのチュートリアル - Qiita

さくらのVPSを使う その0015 HeidiSQLでMySQLホストに接続する

vagrantMySQLホストに接続したときの過去記事

vagrantその0026 HeidiSQLでvagrant内のMySQLホストに接続する - MOTOMICHI WORKS BLOG

記事の為に、仮のユーザー名, パスワード, ポート, IP

例えば「さくらのVPSを使う その0001 申し込みからsshログインに関わる設定 - MOTOMICHI WORKS BLOG」みたいな感じで、サーバーにログインするユーザー名とパスワード、MySQLに接続するユーザー名とパスワードなどを以下のように設定したことにする。
ポートはそれぞれ初期値を例とする。

  • サーバーユーザー名 : hoge
  • サーバーパス : hogepass
  • サーバーのポート : 22
  • MySQLユーザー名 : root
  • MySQLパス : myhogepass
  • MySQLのポート : 3306

VPSのサーバーのIPは契約したときメールで送られてくると思うけど、仮に000.00.000.00という事にする。

HeidiSQLの設定

設定タブ

  • ネットワーク種別 : MySQL(SSH tunnel)
  • ホスト名/IP : 127.0.0.1
  • ユーザー : root
  • パスワード : myhogepass
  • ポート : 3306

SSHトンネルタブ

タイムアウト時間は15とか20に伸ばした方が良いという情報もあるけど、私は4で接続できた。

あとは空白で。
今回の例では秘密鍵も空白で接続できる。