まちいろエンジニアブログ

南池袋のWebサービス開発会社、株式会社まちいろのエンジニアブログです。

便利なSQLを紹介します~MySQL版~

こんにちは!まちいろの森です! これまでデータ抽出の際に、様々なSQLを利用してきました。そのうち、使える!便利だ!というSQLをこちらでいくつか紹介したいと思います!

複数テーブルの件数をまとめてみたい

複数テーブルのそれぞれの件数を知りたい場合にテーブル分SQLを実行するのは面倒ですよね? その場合 UNION ALL を利用すれば複数テーブルの件数を1回で抽出することが可能です。

SELECT 'テーブルA', COUNT(*) FROM テーブルAのテーブル名 UNION ALL 
SELECT 'テーブルB', COUNT(*) FROM テーブルBのテーブル名 UNION ALL 
SELECT 'テーブルC', COUNT(*) FROM テーブルCのテーブル名

結果は以下の通り、3テーブルまとめて件数を取得することができました! 条件が複雑な場合、結合を複数テーブルとしている場合等は検索結果が返ってくるのが遅い場合があるので、 注意が必要です。

f:id:e_mori:20170321175805p:plain

実行計画を見たい

SQLの実行結果が遅いとき、indexが正しくはられており、それが利用されているのかを確認したいとき、ありませんか? その場合は以下SQLを実行するとindexがはられているか、利用されているか否かがわかります。

explain 確認したいSQL

結果は以下の通りとなりました。

  • possible_keys … 利用できるindexを表す(nullの場合は、利用できるindexが存在しない)

  • key … 実際に利用したindexを表す

上記より、1行目はindexが利用されずにSQLが実行されたことを示し、 2行目は、作成したindexを利用してSQLが実行されたことがわかります。

f:id:e_mori:20170322111343p:plain

ソート項目がNULLの場合にNULLデータを一番最後に表示する

ソート項目がNULLのデータが含まれている場合、NULLデータ以外をorderByでソートし、NULLデータは最後にまとめて表示したいことはありませんか? order by ソート項目を条件につけるだけでは最初にNULLデータが表示されてしまいます。最後に表示したい場合は、order byを以下の通りに記載すると 実行結果で最後にNULLデータを表示することが可能です。

order by ソート項目 is not NULL ASC ,ソート項目 ASC

結果は以下の通りとなりました。NULLのデータを一番最後に表示することができています。

f:id:e_mori:20170322142935p:plain

最後に

MySQLにてデータ抽出を行う際に私が使って便利なSQLをご紹介しました! みなさんもぜひ活用してみてください!

MySQL WorbenchでAWS上のDBへ接続する

こんにちは、まちいろの井上です。

みなさんは開発を行っている中で、普段使用している管理ツールから開発環境のDBへ接続したいなと感じることはありませんか?
私は普段「MySQL Workbench」を使用しているので、MySQL Workbenchから開発環境に接続できたら便利だなと思っていました。

そこで今日は、MySQLの管理ツールであるMySQL WorkbenchでAWS上のDBへSSHを経由して接続する方法をご紹介します。

AWSのセキュリティグループを設定する

まちいろではサーバーにAWSを利用しているので、まず初めに開発環境となるAWSへローカル環境から
接続するためには、AWS側に設定を行う必要がありました。
以下のように、AWSのセキュリティグループで社内からアクセスが可能となるように設定を行います。

f:id:yu_inoue:20170124150235p:plain

MySQL Workbenchの設定画面を開く

MySQL Workbenchを起動すると以下のような画面が開きます。
MySQL Connnectionsのボタンを押下して、新規の接続を作成します。

f:id:yu_inoue:20170123172906p:plain

接続設定名、接続方法を設定する

接続設定画面を開くと以下の画面が表示されます。
まず初めに、接続設定名・接続方法を設定します。

f:id:yu_inoue:20170123174141p:plain

  • Connection Name

    DB接続設定の名前を設定します。
     ここで設定した名前は、MySQL Workbenchを立ち上げたときの最初の画面に表示されるものとなります。

  • Connection Method

 今回はSSHを経由して接続するので、プルダウンメニューからStandatd TCP/IP over SSHを選択します。

接続したいサーバーのDB情報を設定する

次にParametersタブ内のサーバー、DB情報を入力していきます。

f:id:yu_inoue:20170123175515p:plain

 接続先サーバーのホスト情報(ホスト名、IPアドレス)、ポート番号を設定します。
 [ホスト情報(ホスト名、IPアドレス):ポート番号]のように入力します。

 SSH接続に使用するユーザー名を設定します。

 SSH接続に使用するパスワードを設定します。
 「Stire in Vault…」を押下するとパスワード入力の画面が表示されます。

 SSH接続に使用する秘密鍵ファイル(*.pem)を選択します。

 接続先サーバー上のMySQLのホスト名またはIPアドレスを設定します。

 接続先サーバー上のMySQLで使用するポートを設定します。

  • Username

 接続先サーバー上のMySQLにログインするためのユーザー名を設定します。

  • Password

 上記Usernameで設定したユーザーでMySQLにログインするためのパスワードを設定します。

  • Default Schema

 接続時に開いておきたいDB名を設定します。  

接続を確認する

「Test Connection」ボタンを押下し、接続確認を行います。

 f:id:yu_inoue:20170123181258p:plain

 上記のように接続成功のメッセージ画面が表示されれば設定の完了となります。
 「OK」ボタンで上記画面を閉じ、接続設定画面に戻り設定を保存してください。

最後に

以上で、MySQL WorkbenchからSSH経由でAWS上のDBへの接続設定は完了となります。
一度設定してしまえば、あとはクリックするだけでAWS上のDBへ接続できてとても便利ですので、開発環境への接続時に利用してみてはいかがでしょうか。

webpackでPostCSSをビルドする

f:id:y_kashiwaya:20170113151951p:plain

こんにちわ!柏谷です。

今回は、webpackでPostCSSをビルドするまでの方法を紹介します。

環境

前提条件

Nodejs、npmはインストール済みであること。

PostCSSとは

PostCSS

PostCSSは、JSのプラグインCSSのスタイルを変更するためのツールです。

変数や、mixin、最新のcssの変換などを様々な機能を持ったプラグインがあり、お好みで利用することができます。

Sassは不要な機能が多いし、重い、なんて悩んでいる方にぴったりのツールです。

webpackとは

webpack

モジュールバンドラー。

loaderというプラグインを利用し元のjsをあれやこれやして、ブラウザーで使用するjsファイルを生成してくれる。

jsだけでなく、画像やcssの処理も可能。

準備

プロジェクト用にディレクトリを作成します。

$ mkdir webpack_postcss_demo
$ cd webpack_postcss_demo

npm init して、package.jsonを作成します。

$ npm init

package.jsonを編集します。

$ vim package.json

scriptの箇所を次のように編集します。

{
  "name": "webpack_postcss_demo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "webpack": "webpack" # ←
  },
  "author": "",
  "license": "ISC",
}

PostCSSをインストールして、webpackでビルドしてみる

今回は、cssにいい感じにベンダープレフィックスをつけてくれるautoprefixerというプラグインを使用します。

また、jsからcssimport するため、babelも一緒にインストールします。

$ npm install webpack postcss-loader css-loader style-loader autoprefixer babel-core babel-preset-es2015 --save-dev

本記事記述時点では、以下のとおりインストールされました。

{
  "name": "webpack_postcss_demo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.6.0",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "postcss-loader": "^1.2.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0"
  }
}

webpack.config.json を書く

次に、webpackの設定ファイルwebpack.config.jsonを書いていきます。

# webpack.config.json
const autoprefixer = require('autoprefixer');

module.exports = {
  entry: {
    entry: ['./js/entry.js'],
  },

  output: {
    path: './dist/',
    filename: "js/[name].js"
  },

  module: {
    loaders: [
      {
        test: /\.js?$/,
          loader: 'babel'
      }, {
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader"
      }
    ]
  },

  babel: {
    presets: ['es2015'],
  },

  postcss: [
    require('autoprefixer')
  ]
};

意味はそれぞれ、

  • entry

webpackで処理される対象のjsを記載します。

  • output

処理されたjsの書き出される場所、ファイル名を記載します。

  • modules

どのような処理を行うかを記載します。

  • babel、postcss

プラグインを利用する場合、プラグインの利用に必要なプラグインやプリセットなどを記載します。

postCSS処理対象のファイルと読み込むHTMLを準備する

PostCSSでCSSコンパイルするためには、jsファイルから対象のcssファイルをimportする必要があります。

htmlからコンパイルされたjsを読み込むと、ヘッダーに自動的に差し込んでくれるようになっています。

次の構成で準備します。

.
├── css
│   └── sample.css ①
├── js
│   └── entry.js ②
├── index.html ③
├── node_modules
└── webpack.config.js

① 処理対象のcssファイルを作成します。

/* ./css/sample.css */
:fullscreen a {
    display: flex
}

cssをインポートするjsファイルを作成します。

# ./js/entry.js
import '../css/sample.css'

③ 書き出されたjsを読み込むhtmlファイルを作成します。

<!— index.html —>
<!DOCTYPE html>
<html lang="ja">
  <head><title>タイトルだよ</title></head>
  <body>ボディだよ</body>
  <script src="dist/js/entry.js"></script>
</html>

webpack を実行する

必要なファイルが揃ったので、webpackを実行します。

$ npm run webpack

distディレクトリができ、中にentry.jsができます。

.
├── dist
│   └── js
│       └── entry.js  ←生成されたjs
├── css
│   └── sample.css
├── js
│   └── entry.js
├── index.html
├── node_modules
└── webpack.config.js

ブラウザで確認すると、コンパイルされたcssのコードが head に挿入されているのが確認できます。

f:id:y_kashiwaya:20170113151956p:plain

PostCSSでコンパイルしたcssファイルを別に保存する

えっ、headerに書き出されても…というあなた。

postCSSで処理したcssファイルを書き出すのには別に extract-text-webpack-plugin というプラグインが必要となります。

extract-text-webpack-plugin のインストール

npm install extract-text-webpack-plugin —save-dev

また、webpack.config.js を次の通り書き直します。

const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: {
    entry: ['./js/entry.js'],
  },

  output: {
    path: './dist/',
    filename: "js/[name].js"
  },

  module: {
    loaders: [
      {
        test: /\.js?$/,
          loader: 'babel'
      }, {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
      }
    ]
  },

  babel: {
    presets: ['es2015'],
  },

  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    new ExtractTextPlugin('./css/sample.css'),
  ]
};

再度、npm run webpackを実行すると、dist下にcssができています。

.
├── dist
│   ├── css
│   │   └── sample.css  ← 生成されたcss
│   └── js
│       └── entry.js
├── css
│   └── sample.css
├── js
│   └── entry.js
├── index.html
├── node_modules
└── webpack.config.js

書き出されたcssの中身を確認すると、ベンダープレフィックスが付与されたファイルが書き出されます。

:-webkit-full-screen a {
    display: -webkit-box;
    display: flex
}
:-moz-full-screen a {
    display: flex
}
:-ms-fullscreen a {
    display: -ms-flexbox;
    display: flex
}
:fullscreen a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

ちなみに、cssが書き出される場所は、js同様、webpack.config.jsonのoutputのpathを参照します。

この例では、pathに./dist/の指定があり、ExtractTextPluginで ./css/sample.css を指定したため、./dist/の下の css/sample.css に書き出されました。

まとめ

gulpやgruntなどのタスクランナーと違って、webpackは基本的にjsのモジュールバンドラーだということを失念しており、実装に無駄に時間がかかったのはいい思い出です。

postCSSのプラグインは公式で検索できます。

postcss.parts

カテゴリだけで17個もあります。

いろいろ試して、コーディングしやすい環境ができるといいですね!