目次

なぜこの記事を書くのか

方法1：absolute + top,left=50% + ネガティブマージン

<div class="container">
    <div class="item"></div>
</div>
<style>
    .container {
        position: relative;
        width: 300px;
        height: 300px;
    }
    .item {
        /* 要素の大きさを指定する */
        width: 150px;
        height: 150px;

        /* top と left に 50% を指定して、要素の左上を中央にする. */
        position: absolute;
        top: 50%;
        left: 50%;

        /* 要素の大きさの半分をネガティブマージンとすることで、要素を画面中央にする. */
        margin-top: -75px;
        margin-left: -75px;
    }
</style>

(表示例)

(サポートブラウザ)

方法2：absolute + top,left=50% + translate

<div class="container">
    <div class="item">おはよう<br>こんにちは<br>おやすみなさい</div>
</div>
<style>
    .container {
        position: relative;
        width: 300px;
        height: 300px;
    }
    .item {
        /* top と left に 50% を指定して、要素の左上を中央にする. */
        position: absolute;
        top: 50%;
        left: 50%;

        /* tarnslate で要素の縦横それぞれ50%分の長さを動かすことで、要素を中央にする. */
        transform: translate(-50%, -50%);
    }
</style>

(表示例)

(サポートブラウザ)

方法3：absolute + top,bottom,left,right=0 + width,height + margin=auto

1. positionがabsoluteである
2. top, bottom, left, rightが全て0である（※）
3. marginがautoである
4. width,heightがauto以外である

※ 正確には0である必要はありませんが、0にすることが多いです。詳細は後述の説明リンクをご参照ください。

<div class="container">
    <div class="item"></div>
</div>
<style>
    .container {
        position: relative;
        width: 300px;
        height: 300px;
    }
    .item {
        /* 1. absolute にする. */
        position: absolute;

        /* 2. top, bottom, left, right を 0 にする. */
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        /* 3. width, height を auto 以外にする. */
        width: 150px;
        height: 150px;

        /* 4. margin を auto にする. */
        margin: auto;
    }
</style>

(表示例)

(サポートブラウザ)

方法4：display=flex

<div class="container">
    <div class="item">おはよう<br>こんにちは<br>おやすみなさい</div>
</div>
<style>
    .container {

        /* flexbox を用いて、上下左右中央に表示します. */
        display: flex;
        align-items: center;
        justify-content: center;

        width: 300px;
        height: 300px;
    }
    .item {
        /* 中身の要素はCSSの指定なしでOK */
    }
</style>

(表示例)

(サポートブラウザ)

方法5：vertical-algin=middle

<div class="container">
    <div class="item"><span>おはよう<br>こんにちは<br>おやすみなさい</span></div>
</div>
<style>
    .container {

        /* table 要素として表示する. */
        display: table;
        width: 300px;
        height: 300px;
    }
    .item {
        /* table-cell 要素として表示する. */
        display: table-cell;

        /* 上下中央に表示. */
        vertical-align: middle;

        /* 左右中央に表示. */
        text-align: center;
    }
</style>

(表示例)

(サポートブラウザ)

最後に

目次

なぜ、grepで前後の行を表示したいのか

grepで該当した行の前後を表示する

# 前後3行を表示する
$ grep -3 "ERROR" [ファイルパス]

# 前3行を表示する
$ grep -B 3 "ERROR" [ファイルパス]

# 後ろ3行を表示する
$ grep -A 3 "ERROR" [ファイルパス]

# 前後3行を表示して、エラーの内容把握
$ grep -3 "ERROR" storage/logs/laravel-2020-04-03.log

# 以下出力内容

# 前3行（直前の作業）
[2020-04-03 10:40:02] local.INFO: user_id=1がログイン。
[2020-04-03 10:40:02] local.INFO: user_id=1がタスク(id=123)を作成。
[2020-04-03 10:40:02] local.INFO: user_id=1が発注書(id=123)を作成。

# grepでヒットした行
[2020-04-03 10:46:42] local.ERROR: Class App\Http\Controllers\TaskPreviewRequest does not exist. user_id=1.

# 後ろ3行（エラーのスタックトレースの一部）
[stacktrace]
#0 /var/www/html/myapp/vendor/laravel/framework/src/Illuminate/Routing/RouteSignatureParameters.php(25): ReflectionParameter->getClass()
#1 [internal function]: Illuminate\\Routing\\RouteSignatureParameters::Illuminate\\Routing\\{closure}(Object(ReflectionParameter))

grepについてさらに詳しく

最後に

目次

この記事の目的

Reduxを構成する要素

ステート（state）

// ステート
{
    title : '',
    count : 0
}

ストア（store）

// ストア
const store = {

    // ストアが、ステートを、保持している.
    state : {
        title : '',
        count : 0
    }
}

ステートの値を変更する

アクション(Action)

// アクション.
const action = {
    type : 'ADD_COUNT'
}

ディスパッチ（dispatch）

const store = {

    // 上記のステートを、ストアは保持している.
    state : {
        title : '',
        count : 0
    },

    // ディスパッチを追加.
    dispatch : function (action) {
        // あとで実装します.
    }
}

リデューサー（reducer）

// リデューサー（reducer）.
// @param state 現在のステート
// @param action 変更内容
function myReducer(state, action) {

    // actionのタイプごとに、処理を分ける
    switch (action.type) {

        // ADD_COUNTの場合は、countを1増やす.
        case 'ADD_COUNT':
            state = {
                ...state,
                count : state.count + 1
            }
            return state

        default:
            return state
    }
}

// 新しいステートのオブジェクトを作成している.
state = {
    ...state,
    count : state.count + 1
}

// Store に reducer を追加.
const store = {

    state : {
        title : '',
        count : 0
    },

    // リデューサー.
    reducer : myReducer,

    dispatch : function (action) {
        // あとで実装します.
    }
}

// dispatch メソッド内で、reducer を使う.
const store = {

    state : {
        title : '',
        count : 0
    },

    reducer : myReducer,

    dispatch : function (action) {
        // reducer を使って、state を変更する.
        this.state = this.reducer(this.state, action)
    }
}

実際に、Action → Dispatch → Reducer で State を変更してみる

// アクションを定義.
const action = {
    type : 'ADD_COUNT'
}

// 動作テスト
store.dispatch(action)
console.log('1回目:', store.state)  // 1回目: {title: "", count: 1}

store.dispatch(action)
console.log('2回目:', store.state)  // 2回目: {title: "", count: 2}

store.dispatch(action)
console.log('3回目:', store.state)  // 3回目: {title: "", count: 3}

// Store.
const store = {

    /* 省略 */

    // ステートを取得するメソッドを追加.
    getState : function () {
        return this.state
    }
}

store.dispatch(action)
console.log('4回目:', store.getState())  // 4回目: {title: "", count: 4}

変更を検知する（サブスクライブ(subscribe)）

// Store.
const store = {

    /* 省略  */

    // 変更時に呼び出す関数を保持する変数.
    subscribers : [],

    // 引数で受け取った関数を、subscribers変数に追加する.
    subscribe : function (fn) {
        this.subscribers.push(fn)
    }
}

// Store.
const store = {

    /* 省略. */

    dispatch : function (action) {
        this.state = this.reducer(this.state, action)

        // ステートの変更後、変更を通知する.
        this.subscribers.forEach(function (subscriber) {
            subscriber()
        })
    },

    subscribers : [],

    subscribe : function (fn) {
        this.subscribers.push(fn)
    }
}

// ストアにサブスクライブを追加.
store.subscribe(function () {
    console.log('subscribe:', store.getState())
})

// ステートを変更する（1回目）
store.dispatch(action)     // subscribe: {title: "", count: 1}

// ステートを変更する（2回目）
store.dispatch(action)     // subscribe: {title: "", count: 2}

Reduxのメリット

1. データの変更方法が制限されている
2. データの変更を検知する術がある
3. 離れたコンポーネント間でデータのやり取りができる

参考サイト

最後に

目次

全角カナのチェックを行う

基本形

// 全角カナの判定.
function isZenkakuKana(s) {
    return !!s.match(/^[ァ-ヶー　]*$/);  // 「　」は全角スペースです.
}

isZenkakuKana('シブヤ');  // true

派生系（許可する文字種類を増やしたい場合）

// 全角カナ、全角数字、を許可
function isZenkakuKana(s) {
    return !!s.match(/^[ァ-ヶ０-９ー　]*$/);
}

// 全角カナ、全角数字、半角数字、を許可
function isZenkakuKana(s) {
    return !!s.match(/^[ァ-ヶ０-９0-9ー　]*$/);
}

// 全角カナ、全角数字、半角数字、半角スペース、を許可
function isZenkakuKana(s) {
    return !!s.match(/^[ァ-ヶ０-９0-9ー　 ]*$/);
}

半角カナのチェックを行う

基本形

// 半角カナのチェック.
function isHankakuKana(s) {
    return !!s.match(/^[ｦ-ﾟ]*$/);
}

isHankakuKana('ｼﾌﾞﾔ')  // true

派生系（許可する文字種類を増やしたい場合）

// 半角カナ、半角スペース、を許可
function isHankakuKana(s) {
    return !!s.match(/^[ｦ-ﾟ ]*$/);
}

// 半角カナ、半角スペース、半角数字、を許可
function isHankakuKana(s) {
    return !!s.match(/^[ｦ-ﾟ 0-9]*$/);
}

関連記事

最後に

目次

ソートの説明に使う連想配列

$fruits = [
  '01' => 'apple',
  '02' => 'orange',
  '03' => 'pinapple'
];

キーでのソート（昇順、降順、ユーザー定義）

// キーで昇順ソート
ksort($fruits);

// Array
// (
//     [01] => apple
//     [02] => orange
//     [03] => pinapple
// )

// キーで降順ソート
krsort($fruits);

// Array
// (
//     [03] => pinapple
//     [02] => orange
//     [01] => apple
// )

// ユーザー定義によるソート
// （ここでは、キーの昇順に並べています）
uksort($fruits, function ($key1, $key2) {
   return intval($key1) - intval($key2); 
});

// Array
// (
//     [01] => apple
//     [02] => orange
//     [03] => pinapple
// )

値でのソート（昇順、降順、ユーザー定義）

// 値で昇順ソート
asort($fruits);

// Array
// (
//     [01] => apple
//     [02] => orange
//     [03] => pinapple
// )

// 値で降順ソート
arsort($fruits);

// Array
// (
//     [03] => pinapple
//     [02] => orange
//     [01] => apple
// )

// ユーザー定義によるソート
// （ここでは、値の文字数が多い順に並べています）
uasort($fruits, function ($value1, $value2) {
   return strlen($value2) - strlen($value1);
});

// Array
// (
//     [03] => pinapple
//     [02] => orange
//     [01] => apple
// )

関連：連想配列（多次元配列）をソートするには

// 多次元配列の例（DBの検索結果など）
$fruits = [
  array('id' =>'01', 'name' => 'apple'),
  array('id' =>'02', 'name' => 'orange'),
  array('id' =>'03', 'name' => 'pinapple')
];

参考資料

最後に

目次

関数で、複数の値を返す

function getPerson() {
    $name = 'Yohei';
    $age = 33;
    return array($name, $age);
}

$person = getPerson();
echo $person;  // [ 'Yohei', 33 ]

list()を用いて、複数の変数に一括代入する

list($name, $age) = array('Yohei', 33);
echo $name;  //'Yohei'
echo $age;   //33

[ $name, $age ] = array('Yohei', 33);
echo $name;  //'Yohei'
echo $age;   //33

関数で複数の値を返却して、list()で複数変数に一括代入する

// 配列で複数の値を返却する.
function getPerson() {
    $name = 'Yohei';
    $age = 33;
    return array($name, $age);
}

// list() で一気に受け取る.
list($name, $age) = getPerson();
echo $name;  //'Yohei'
echo $age;   //33

最後に

目次

全角 → 半角（英数字）

function hankaku2Zenkaku(str) {
    return str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
    });
}

// 使用例
hankaku2Zenkaku('１２３ａｂＣ');  // '123abC'

半角 → 全角（英数字）

function zenkaku2Hankaku(str) {
    return str.replace(/[A-Za-z0-9]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
    });
}

// 使用例
zenkaku2Hankaku('123abC');  // '１２３ａｂＣ'

全角 → 半角（カタカナ）

function zenkana2Hankana(str) {
    var kanaMap = {
         "ガ": "ｶﾞ", "ギ": "ｷﾞ", "グ": "ｸﾞ", "ゲ": "ｹﾞ", "ゴ": "ｺﾞ",
         "ザ": "ｻﾞ", "ジ": "ｼﾞ", "ズ": "ｽﾞ", "ゼ": "ｾﾞ", "ゾ": "ｿﾞ",
         "ダ": "ﾀﾞ", "ヂ": "ﾁﾞ", "ヅ": "ﾂﾞ", "デ": "ﾃﾞ", "ド": "ﾄﾞ",
         "バ": "ﾊﾞ", "ビ": "ﾋﾞ", "ブ": "ﾌﾞ", "ベ": "ﾍﾞ", "ボ": "ﾎﾞ",
         "パ": "ﾊﾟ", "ピ": "ﾋﾟ", "プ": "ﾌﾟ", "ペ": "ﾍﾟ", "ポ": "ﾎﾟ",
         "ヴ": "ｳﾞ", "ヷ": "ﾜﾞ", "ヺ": "ｦﾞ",
         "ア": "ｱ", "イ": "ｲ", "ウ": "ｳ", "エ": "ｴ", "オ": "ｵ",
         "カ": "ｶ", "キ": "ｷ", "ク": "ｸ", "ケ": "ｹ", "コ": "ｺ",
         "サ": "ｻ", "シ": "ｼ", "ス": "ｽ", "セ": "ｾ", "ソ": "ｿ",
         "タ": "ﾀ", "チ": "ﾁ", "ツ": "ﾂ", "テ": "ﾃ", "ト": "ﾄ",
         "ナ": "ﾅ", "ニ": "ﾆ", "ヌ": "ﾇ", "ネ": "ﾈ", "ノ": "ﾉ",
         "ハ": "ﾊ", "ヒ": "ﾋ", "フ": "ﾌ", "ヘ": "ﾍ", "ホ": "ﾎ",
         "マ": "ﾏ", "ミ": "ﾐ", "ム": "ﾑ", "メ": "ﾒ", "モ": "ﾓ",
         "ヤ": "ﾔ", "ユ": "ﾕ", "ヨ": "ﾖ",
         "ラ": "ﾗ", "リ": "ﾘ", "ル": "ﾙ", "レ": "ﾚ", "ロ": "ﾛ",
         "ワ": "ﾜ", "ヲ": "ｦ", "ン": "ﾝ",
         "ァ": "ｧ", "ィ": "ｨ", "ゥ": "ｩ", "ェ": "ｪ", "ォ": "ｫ",
         "ッ": "ｯ", "ャ": "ｬ", "ュ": "ｭ", "ョ": "ｮ",
         "。": "｡", "、": "､", "ー": "ｰ", "「": "｢", "」": "｣", "・": "･"
    }
    var reg = new RegExp('(' + Object.keys(kanaMap).join('|') + ')', 'g');
    return str
            .replace(reg, function (match) {
                return kanaMap[match];
            })
            .replace(/゛/g, 'ﾞ')
            .replace(/゜/g, 'ﾟ');
};

// 使用例
zenkana2Hankana('アシタハイイテンキカナ、ブーヴー');  // 'ｱｼﾀﾊｲｲﾃﾝｷｶﾅ､ﾌﾞｰｳﾞｰ'

半角 → 全角（カタカナ）

function hankana2Zenkana(str) {
    var kanaMap = {
        'ｶﾞ': 'ガ', 'ｷﾞ': 'ギ', 'ｸﾞ': 'グ', 'ｹﾞ': 'ゲ', 'ｺﾞ': 'ゴ',
        'ｻﾞ': 'ザ', 'ｼﾞ': 'ジ', 'ｽﾞ': 'ズ', 'ｾﾞ': 'ゼ', 'ｿﾞ': 'ゾ',
        'ﾀﾞ': 'ダ', 'ﾁﾞ': 'ヂ', 'ﾂﾞ': 'ヅ', 'ﾃﾞ': 'デ', 'ﾄﾞ': 'ド',
        'ﾊﾞ': 'バ', 'ﾋﾞ': 'ビ', 'ﾌﾞ': 'ブ', 'ﾍﾞ': 'ベ', 'ﾎﾞ': 'ボ',
        'ﾊﾟ': 'パ', 'ﾋﾟ': 'ピ', 'ﾌﾟ': 'プ', 'ﾍﾟ': 'ペ', 'ﾎﾟ': 'ポ',
        'ｳﾞ': 'ヴ', 'ﾜﾞ': 'ヷ', 'ｦﾞ': 'ヺ',
        'ｱ': 'ア', 'ｲ': 'イ', 'ｳ': 'ウ', 'ｴ': 'エ', 'ｵ': 'オ',
        'ｶ': 'カ', 'ｷ': 'キ', 'ｸ': 'ク', 'ｹ': 'ケ', 'ｺ': 'コ',
        'ｻ': 'サ', 'ｼ': 'シ', 'ｽ': 'ス', 'ｾ': 'セ', 'ｿ': 'ソ',
        'ﾀ': 'タ', 'ﾁ': 'チ', 'ﾂ': 'ツ', 'ﾃ': 'テ', 'ﾄ': 'ト',
        'ﾅ': 'ナ', 'ﾆ': 'ニ', 'ﾇ': 'ヌ', 'ﾈ': 'ネ', 'ﾉ': 'ノ',
        'ﾊ': 'ハ', 'ﾋ': 'ヒ', 'ﾌ': 'フ', 'ﾍ': 'ヘ', 'ﾎ': 'ホ',
        'ﾏ': 'マ', 'ﾐ': 'ミ', 'ﾑ': 'ム', 'ﾒ': 'メ', 'ﾓ': 'モ',
        'ﾔ': 'ヤ', 'ﾕ': 'ユ', 'ﾖ': 'ヨ',
        'ﾗ': 'ラ', 'ﾘ': 'リ', 'ﾙ': 'ル', 'ﾚ': 'レ', 'ﾛ': 'ロ',
        'ﾜ': 'ワ', 'ｦ': 'ヲ', 'ﾝ': 'ン',
        'ｧ': 'ァ', 'ｨ': 'ィ', 'ｩ': 'ゥ', 'ｪ': 'ェ', 'ｫ': 'ォ',
        'ｯ': 'ッ', 'ｬ': 'ャ', 'ｭ': 'ュ', 'ｮ': 'ョ',
        '｡': '。', '､': '、', 'ｰ': 'ー', '｢': '「', '｣': '」', '･': '・'
    };

    var reg = new RegExp('(' + Object.keys(kanaMap).join('|') + ')', 'g');
    return str
            .replace(reg, function (match) {
                return kanaMap[match];
            })
            .replace(/ﾞ/g, '゛')
            .replace(/ﾟ/g, '゜');
};

// 使用例
hankana2Zenkana('ｱｼﾀﾊｲｲﾃﾝｷｶﾅ､ﾌﾞｰｳﾞｰ');  // 'アシタハイイテンキカナ、ブーヴー'

関連記事

最後に