へっぽこびんぼう野郎のnewbie日記

けろけーろ(´・ω・`)! #vZkt8fc6J

Docker+MySQLで物理バックアップを取得 & リストアする

InnoDBなので、その他はしらん

docker-compose.yml とかに↓のようなものが書いてあると思う

version: "2"
services:
  db:
    image: "mysql:5.7.12"
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: ""
      MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
      MYSQL_DATABASE: ${DB_NAME}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_USER: ${DB_USER}
    command: mysqld --character-set-server=utf8 --collation-server=utf8_general_ci
    restart: always
    volumes:
      - "./volume:/var/lib/mysql"

そうすると、volumeディレクトリがdocker-compose.yml下に作成されている

$ cd ./volume
$ ls
auto.cnf           ib_buffer_pool     ib_logfile1        ibtmp1             performance_schema
ib_logfile0        ibdata1            mysql              sys

↑こんなん

これが、コンテナ内のデータディレクトリと同期している。(適当なファイルを作ると確認できる)

データディレクトリは、mysqlで↓を打つとわかる

> SHOW GLOBAL VARIABLES LIKE 'datadir';

それでこれをどこかにコピーする(物理バックアップ完了)

$ cp -r ./volume ~/backup-directory-where-you-want-to-lay

その後データベースを触って煮るなり焼くなりしたあと、↓をやるとデータベースが復元する

$ cp -r ~/backup-directory-where-you-want-to-lay ~/docker-directory-which-you-created

それでmysqlを再起動

$ docker exec -it <your-docker-container-name> service mysql restart

これでうまくいく。

docker-compose.yml があるディレクトリに↓のスクリプトを置くのもアリ。

#!/bin/sh
cp -r ~/backup-directory-where-you-want-to-lay ~/docker-directory-which-you-created
docker exec -it <your-docker-container-name> service mysql restart

ステージングのデータとかでちょっとしたテストを何度もやるときに便利

おまけ

コンテナ内に入るときはこう

$ docker exec -it <your-docker-container-name> /bin/bash

Reference

innodb - How to take physical backup of MYSQL database - Database Administrators Stack Exchange

MySQL :: MySQL 5.7 Reference Manual :: 14.18.1 InnoDB Backup

JavaScriptで16進数の四則演算の計算ドリルつくった

こんなかんじのやつ

f:id:haruharu1:20180401214028p:plain

Enterを押すと正誤判定してくれます。(=スマホだと動かない)

切り替えて使える

f:id:haruharu1:20180401214143p:plain

f:id:haruharu1:20180401214250p:plain

作った動機

文字コードの勉強してて、16進数の足し算引き算で苦しんでいたため。計算ドリルあったらいいのになと思ったのでつくった。

使い方

$ git clone https://github.com/harukaeru/CalculationDrillBase16.git
$ npm install
$ npm start

これでローカルサーバが立ち上がるのでそこで楽しんでください。

他のサーバと通信などは特にしてないです。全部JavaScriptです。

試してないけど、古いnodeだとインストールできないかもしれないです。

俺専用の問題をつくりたいんだけど??って人へ

window.changeProblemsという関数を用意したのでそれにオプションを入れて実行してください。JavaScriptのライブラリであるlodashも使えます。

↓こんな感じです

window.changeProblems({
  leftRange: () => _.range(0x1, 0x3),
  rightRange: (left, calcType) => _.range(0x1, 0x3),
  calcTypes: ['+']
})

f:id:haruharu1:20180401214828p:plain

ざっくり解説

左側の値(left)はleftRangeで指定した範囲の中からランダムに選ばれたものになります(↑の場合なら0x01か0x02のどちらか)。

calcTypecalcTypesからランダムに選ばれたものが入ります(↑の場合は1個しかないので絶対'+')

それで、この計算されたleftcalcTypeをもとにrightRangeの範囲を決めることができます。(別に使わなくてもいいです。↑の例は使ってません)

rightRange: (left, calcType) => _.range(0x01, left + 1)のようにすると、絶対左側の値を越えないように右側の値を決めることができます。

↓デフォルトで組み込んだやつはここなので、適当に参考にしてください。 https://github.com/harukaeru/CalculationDrillBase16/blob/master/js/configs.js

ちなみにデカい数字入れると落ちますが仕様です。

ソース

github.com

その他

  • バグがあったらごめんなさい。テストなのにテストがないです。ESLintもないです。issueくれれば直します。
  • Redux入れるのめんどくせえなと思って、ないまま作ってたら見事なアンチパターンになってしまったのでコードは参考にしないでください
  • CSSは知らないので雑です。class名とかつけたので適当にデザイン変更してくれると嬉しいです。PRほしいです
  • ちょっと改造すると10進数や8進数や2進数のものとしても使えると思います。ご家庭でご活用ください

JavaScript界隈の基本的な用語を歴史とともにさらにまとめてみた

JavaScript 界隈の用語まとめ - Qiita を読んで、すこしだけもやもや感がぬぐえなかったので、適当に自分が思ってる「今のJavaScriptはこんなかんじ」というのを書いた。

EcmaScript

だいじなこと

EcmaScriptとは、プログラミング言語ではない。

EcmaScriptとは、Ecmaインターナショナルが決めているJavaScript言語仕様のこと。

Ecmaとは、European Computer Manufacturers Association の略で、要は世界のコンピュータ関連の仕様を決めてる闇の組織みたいなところ。 (→History of Ecma

なんでEcmaScriptとかいうものがあるのか?

大昔、JavaScriptという言語はHTMLやCSSの「おまけ」扱いだった。

当時のブラウザベンダ(NetScapeIE)が自分たちの好きなようにJavaScriptを作っていたので、Webサイト開発者がサイトを開発するとき、彼らは各ブラウザの独自仕様を理解して同じような動きをするサイトを作らなければいけなかった。

そこで、JavaScriptの仕様を統一しようということで、EcmaScriptという言語仕様が登場した。

これの登場によって、各ブラウザベンダ間での実装がまぁまぁ同じになって、昔より格段と作りやすくなった。(マシになったというだけで、今も辛いのは変わっていない)

今でも他の言語とは違ってJavaScriptでは、仕様と実装が乖離していることが多い。そのためEcmaScriptのことを意識しないと使いにくい。

たとえばPythonでは、PEPが言語仕様で、CPythonやPyPyが言語実装であり、あんまり実装や仕様のことを考えなくてもCPythonがかなり支配的なので「Pythonとはこういうもの」という理解だけでも、そんなに混乱することはない。*1 *2

一方JavaScriptでは、IESafariChromeFirefoxJavaScriptの動きが異なっており、日本ではそのすべてに対応しないといけないことが多いので、EcmaScriptを意識しないと「JavaScriptとはなんやねん」って感じになってしまう。

つまりEcmaScriptという言語仕様があるという概念を理解するのは、ものすごくだいじ。

EcmaScriptの現在

現在でも各JavaScriptエンジン開発者は、このEcmaScriptという言語仕様をもとにおのおののエンジンを開発している。

EcmaScriptは、現在バージョン8まで仕様が決められており、これはES8とかES2017と呼ばれている。現在はES2019が策定中。

ES2019については→GitHub - tc39/ecma262: Status, process, and documents for ECMA262

ES2018についてはこっちのブランチを参照→GitHub - tc39/ecma262 at es2018

(ES8(ES2017)の実際の言語仕様についてはStandard ECMA-262を参照)

2018年3月現在の主要ブラウザでは、

ブラウザ バージョン 備考
Chrome だいたいES8(ES2017)まで
Firefox だいたいES7(ES2016)まで
Safari だいたいES7(ES2016)まで
Edge だいたいES6(ES2015)まで
IE 11 ほとんどES5まで IE11は2025年10月までサポートされる💢

のようになっている。*3

※ここから引用したよ

ECMAScript 2016+ compatibility table

Microsoft Support Ending Dates

JavaScriptエンジンの現在

各ブラウザベンダは、それぞれ別々のJavaScriptエンジンを使って、開発者にJavaScriptの実行環境を提供している。

ブラウザ エンジン リファレンス
Chrome V8 JavaScript Engine GitHub - v8/v8: The official mirror of the V8 Git repository
Firefox SpiderMonkey SpiderMonkey - Mozilla | MDN
Safari JavaScriptCore https://github.com/WebKit/webkit

こんな感じでまあ色々ある。

なので、前述した通りそれぞれJavaScriptの実装状況が全く違う。

つまりこうした状況で、自分たちが各々の実装を見極めて使える使えないを判定しなければいけない。

これが大変なので、polyfill(様々なブラウザに対応するためのプラグインという概念)や、後述するBabelというトランスパイラが出現することになる。

Nodeの登場によるJavaScriptの変革

話は過去に戻る。

あるとき、Node(のーど)というJavaScriptの実装が登場した。

それまでJavaScriptというのは、ブラウザベンダが実装するものであって、ぼくたちがターミナルでJavaScriptを触るという機会はほとんどなかった。*4

それがNodeというJavaScript実装が登場したことによりターミナル上で

$ node foo.js
Hello World!

のようにしてJavaScriptを実行できるようになった。

これがJavaScriptのひとつの転換期で、Node全盛の時代が始まる。そして現在もNode全盛の時代である。

npmというのは、Node Package Managerのことで、Nodeで動かすことを目的として作られたJavaScriptのライブラリを管理するためのツールである。

npmはNodeに同梱されている。

ちなみにNodeで使われているJavaScriptエンジンは、前述のV8 JavaScript Engineである。

JavaScriptビルド時代

nodeやnpmを使用してJavaScriptの開発をするようにまで人類が成長した近代。

人類は他の言語でも使われているビルドという概念を、JavaScriptに導入したのであった。

それがGruntGulpである。タスクランナーと呼ばれている。

書いたコードを、製品として出すときに、インデントなどを削ったりしてコードのサイズを小さくしたりするために使われたり、JavaScriptでテストを実行するときにも使われた。

現在ではnpmのpackage.jsonファイルに若干存在を食われており、あまり新規で使うことはないが、まだ使われてはいる。

↓こういうかんじでつかわれてた

var gulp = require('gulp');
var browserify = require('gulp-browserify');
 
// Basic usage 
gulp.task('scripts', function() {
    // Single entry point to browserify 
    gulp.src('src/js/app.js')
        .pipe(browserify({
          insertGlobals : true,
          debug : !gulp.env.production
        }))
        .pipe(gulp.dest('./build/js'))
});

トランスパイルして古いバージョンはどんどん殺していく現代

あらゆるソフトウェアで、バージョン違い、つまり後方互換性とはものすごくめんどくさい問題だった。

サービスが広まれば広まるほど、古いバージョンを使っている人の数が増えるので、これまでは「古いバージョンをどうサポートするか」ということに主眼が置かれていた。

現在ではアップデートは自動で行われるようになり、それでもアップデートしないやつはもう知らん、という方針を人類が選択したことで、開発者が新機能を使って開発することができるようになった。

特にOS周りでその動きが顕著である。

一方JavaScriptでは、IEのサポート終了期間が長すぎるので、気軽に自動でJavaScriptをアップデートとかできなかった。

そこで誰かが「古い言語仕様にしか対応してないブラウザに対応せざるを得ないなら、新しい言語仕様で書かれたコードを、古い言語仕様のコードに変換すればよくね?」という天才の発想を思いつき、それをトランスパイルという。

このトランスパイルするやつの1つがBabel

BabelはおもにES6(ES2015)のJavaScriptをES5仕様のJavaScriptに変換する。

もっと新しい言語仕様の実装を使いたい場合はpresetというのを含めると良い。ちなみにenvというpresetをつけると最新になる(ES2017 preset · Babel)

他にもbabel-polyfill(Polyfill · Babel)などで、クロスブラウザ問題(ブラウザ間のJavaScriptの実装の違いの問題)を解決する。

そんなかんじでした。

その他

npmと bower について

NodeはもともとサーバーサイドでもJavaScript使おうぜという発想で作られたものだった。

なのでnpmは、サーバーサイドで使うJavaScriptライブラリを格納するためのものだった。いわゆるパッケージマネージャ。

bowerは、npmがサーバーサイドのものなんだから、こっちはクライアントサイドのものを入れようぜという思想のもと作られたパッケージマネージャであった。

でも、

( ^o^)<クライアントに関するライブラリはbowerで管理するぞ〜!bowerはnpm使ってインストールするぞ〜

( ˘⊖˘) 。o(待てよ、なんで敢えて分けて管理する必要があるんだ??npmで全部管理すればよくね?)

|npm|┗(☋` )┓三

( ◠‿◠ )☛ そこに気付いたか。bowerには死んでもらおう

▂▅▇█▓▒░('ω')░▒▓█▇▅▂うわあああああああああああ

ということになった。現在ではbowerは技術的負債として各々のプロジェクトに眠っている存在である。

npmとYarn

Yarnはnpmの上位互換。

npmでのnode_modules下にある、重複したライブラリを1つにしたり、新しくJavaScriptライブラリをinstallする際にキャッシュがあればそこからインストールするというように使われる。

基本yarnを使った方がいいけどまだ主流はnpmで、yarn自体もnpmでインストールする上Facebookが牛耳っているし、みんなよくわかってないので、あまり魅力を感じられていない。

[追記]コメントで指摘がありましたが、npmからじゃなくてMacだとHomebrew、WindowsだとChocolateyでやるっぽいです。昔からこうだったっけ……? → インストール | Yarn

 

全然広まらないので、そのうちyarnの機能がnpmに取り込まれるのでは説がぼくの中で結構ある。

よくわからなかったらとりあえずnpm使っとけばいい。ぼくはyarn使ってる。

webpackとは

GruntGulpなどのタスクランナーの役割に似ているが、こちらはブラウザ用にビルドするために特化したもの。

JavaScript以外にも、CSS、Sass、HTML、jpgなど、ほぼすべてのものをモジュール化して一つのJavaScriptファイルを生成するもの。これをバンドルファイルっていう。

設定をwebpack.config.jsに書くだけでよく、今は基本これ使っとけばいい。

webpack-dev-serverと組み合わせて使うとホットリロードとかされて開発しやすい。

ぼくが思ってること

JavaScriptは他の主要な言語と違ってつらみが多い。

たとえば以前、leftpadというライブラリがnpmから消されたことによって、JavaScript界隈が大混乱に陥ったことがある。

qz.com

postd.cc

いままでJavaScriptはつらすぎたので、それをなくす動きがようやく始まったよという感じがしてる。

IE対応は早めに切り捨てないとそのうち辛くなるので、早めに「IEの場合は機能限定をする」とか考えないといけないなとも思った。

でもV8 JavaScript Engineを作ってる人がWebAssemblyすごくいいよ!とか言ってるので、そのうちJavaScriptが死ぬ世界が来ても全然おかしくないと思う。

この適当な解説が、誰かの何かの役にたてば幸いです🐹 間違いとかあれば指摘ほしいです。

*1:ただしPEPのすべてが言語仕様というわけではない

*2:だからPythonはいい、JSはダメという話ではないです

*3:IE使用者が4人に1人を占めている日本ではIE対応をしないといけないことが多く、かなりつらいことがわかる。

*4:らしい。ぼくがJSに触れたときには既にNodeがあった

iPhone5(iOS8.3)+SafariのときだけReferenceError: Can't find variable: webpackJsonpとか言われてwebpack-dev-serverが動かないときにやること

Kind of the following error.

f:id:haruharu1:20180214183714p:plain

To solve it, update your webpack-dev-server NOW!!

github.com

I wish I didn't care devices worked on older-version iOS.

How to disable the cursor guide (or the stuff rendering on the current cursor line) through other panes in tmux on iTerm2

It's a tip to disable very annoying and frustrating funny cursor highlighting that those who have found this article may know.

f:id:haruharu1:20180209155323p:plain

This issue was caused by a feature of iTerm2, Cursor Finery at Documentation - iTerm2 - macOS Terminal Replacement

You can simply disable this highlighting by pressing Alt + Command + ; if you use a Mac.

This command is actually here the below shows. (Show Cursor Guide)

f:id:haruharu1:20180209155659p:plain

It has spoiled my time a little!

Annoying!! :(

PS

f:id:haruharu1:20180214105044p:plain

The default terminal is good to use only if I change the background color pro version. It's nice!

都民にピンとくるように「東京ドーム何個分」をなんとかしてみた(面積編)

もの 面積(m2) 東京ドーム
一般的な3LDK 70 約700個で東京ドーム1個分
テニスコート 260 約200個で東京ドーム1個分
サッカーコート 7140 7個で東京ドーム1個分
東京ドームのグラウンドの面積 13,000 東京ドームの約30%
東京ドーム1個分(建築面積) 46,755 1個分
日比谷公園 16万 約3個分
歌舞伎町 34万 約8個分
東京ディズニーランド 51万 約10個分
銀座 87万 約20個分
皇居の総面積 230万 約50個分
お台場 300万 約70個分
東京都中央区 1,015万 約220個分
新宿区 1,822万 約400個分
香川県 18億7600万 約4万個分
地球 148京8900兆 約32億個分

SlackのリンクがChromeでうまく開かれない問題について

Chromeをアップグレードしたら直った www.david-merrick.com

どういうことやねん