jQueryでチェックボックスの全選択、及び全解除の仕組みを実装する方法をご紹介します。
jQueryを使いますので、jQueryの読み込みを忘れないようにしてください。

以下のようなHTMLがあったとします。

<input type="checkbox" name="all_check">全選択

<input type="checkbox" name="check[]" value="">a
<input type="checkbox" name="check[]" value="">b
<input type="checkbox" name="check[]" value="">c
<input type="checkbox" name="check[]" value="">d
<input type="checkbox" name="check[]" value="">e
<input type="checkbox" name="check[]" value="">f

まずは全選択のチェックボックスにチェックを入れると全てのチェックボックスにチェックが入るようにしましょう。

$('input[name="all_check"]').on('click',function() {
    $('input[name="check[]"]').prop('checked', this.checked);
});

次に、各チェックボックスのクリックイベントを設定し、チェックの状況によって全選択のチェック状態を変更するように仕組みます。
チェックボックスの数とチェックされたチェックボックスの数を比較して、同じであれば（全てチェックされていれば）全選択にもチェックを入れます。
どれか1つでもチェックが外れれば全選択のチェックは解除します。

$('input[name="check[]"]').on('click',function(){
    if($('input[name="check[]"]:checked').length == $('input[name="check[]"]').length ) {
        $('input[name="all_check"]').prop('checked', true);
    } else {
        $('input[name="all_check"]').prop('checked', false);
    }
});

if文を使わずに1行で書くこともできます。

$('input[name="check[]"]').on('click',function(){
    $('input[name="all_check"]').prop('checked', ($('input[name="check[]"]:checked').length == $('input[name="check[]"]').length));
});

CSS変数やカスケード変数とも呼ばれることもあるカスタムプロパティ。
変数のように使えるので何かと便利です。

カスタムプロパティはハイフン2つで始まる名前とプロパティ値を設定します。

基本的な文法はこのようになります。

element {
    --main-bg-color: brown;
}

よく使われる方法はカスタムプロパティを:root擬似クラスで定義することで、HTML全体で使用することが可能になります。

:root {
    --main-bg-color: brown;
}

カスタムプロパティの名前は大文字小文字が区別されます。

実際に使用するときはこのようになります。

element {
    background-color: var(--main-bg-color);
}

また、指定された変数が定義されていない場合の代替値を指定することができます。

element {
    background-color: var(--main-bg-color, black);
    /* --main-bg-colorが定義されていなければblack */
}

カスタムプロパティを活用すれば共通で設定するようなプロパティで使用し、デザイン変更等の効率を上げることができます。
例えば色指定関係をまとめておけば、変更したいときに全て書き換えるという手間が省けますね。

Microsoft Office 2021をインストールしてみました。
これまでPC移行とか散々やってきたので、作業には慣れています。

で、またOutlookのデータを移行しないとな…と思っていたら…、
特に何もすることがなかった！
アカウント設定・仕分けルール・署名など、全てそのまま使うことができました。

なんということでしょう。
面倒だな、と思っていた作業が省けたのでうれしい限りです。

ただ、1つだけやらないといけなかったことがありました。
IMAPで設定しているアカウントの受信トレイが何も表示されない状態だったので、調べて設定を変更しました。

ちなみにアップグレードはMicrosoft Office 2010 Personal（古すぎ；）からMicrosoft Office Home & Business 2021です。

【設定方法】

1. IMAPアカウントの設定を開く
2. [フォルダー設定]の[ルートフォルダーのパス]にinboxと入力
3. [次へ]をクリックして設定を完了

これでIMAPアカウントの受信トレイでメールが表示されるようになりました。

SELECT...INTO構文を使用すると、クエリー結果を変数に格納することができます。
ストアドファンクションで利用する機会があったのでご紹介します。

構文例

SELECT field_name INTO @param FROM table limit 1;

最後にlimit 1と付けているのは、この構文を使うときはレコード数が1件でないといけないからです。
もし1件以上のデータが合致してしまった場合はエラーが発生し、以下のようなメッセージが返されます。

ERROR 1172 (42000): Result consisted of more than one row

SELECT...INTOが成功した後に以下を実行すると、設定した変数の内容を確認することができます。

SELECT @param;

こちらは公式リファレンスマニュアルにも掲載されている方法です。
https://dev.mysql.com/doc/refman/5.6/ja/select-into.html

JavaScriptで指定した要素が配列に存在するか調べる方法はいくつかあります。
そのうちの一部を紹介します。

indexOf

引数に指定した値が配列の何番目にあるかをインデックスで返します。

const array = [1, 2, 3];
console.log( array.indexOf(2) );

出力結果

1

結果はインデックスなので、2番目なら1になります。

find (ES2015[ES6])

指定した条件に一致する最初の要素を返します。

const array = [1, 2, 3, 4, 5];

console.log(
    array.find(function(element) {
        return element < 3 // 3より小さい
    })
);

出力結果

1

アロー関数(ES2015[ES6])にするとこんな感じ

array.find((element) => {
    return element < 3 // 3より小さい
})

より短く

array.find(element => element < 3)

続きを読む…»