VSCodeでHTMLファイルを作成するとき、!+Tabキーで挿入されるユーザースニペットは非常に便利です。
しかしながら、デフォルトでは言語が英語になっています。

デフォルトの言語設定を日本語にしたいときは、Emmetの設定を変更しましょう。

VSCodeの設定を開き、検索ボックスにemmetと入力します。
おそらく一番下にあるEmmet: Variablesを探します。

[項目の追加]ボタンを押します。

すると、値が追加できるようになり、初期状態で項目がlangとなっていると思います。
そこで値の欄に初期値がenになっているので、jaと打ち変えて[OK]ボタンを押せば設定完了です。

また、settiings.jsonに直接書き込む場合は以下を追加しましょう。

"emmet.variables": {
    "lang": "ja"
},

これでデフォルトの言語が日本語になってくれます。

Reactアプリを本場環境にデプロイするための覚書です。

※デプロイとは、開発したアプリケーション（機能やサービス）をサーバー上に展開・配置して利用できるようにすること。

ファイルの読み込みを相対パスにしたい場合、package.jsonに"homepage": ".",を追加。

プロジェクトのディレクトリでコマンドを実行しビルドします。

yarn build

ビルド中に等価演算子についての警告が発生することがあります。
==ではなく===を使えとのことらしいです。
型の判定までしなくても良い場合はとりあえず無視してもいいでしょう。

Compiled with warnings.

src/...js
  Line 7:9:    Expected '===' and instead saw '=='  eqeqeq

これで本番環境へのデプロイの準備が整いました。

buildディレクトリ以下にファイルが構成されますので、配下のファイルをリモートサーバーにアップロードします。

ちなみに、別途作成したファイル等でビルドの際に含まれて欲しいものがあれば、publicディレクトリに配置しておくとbuildディレクトリにも配置されます。

参考URL：
初めてReactをプロダクションで採用した時に役立ったこと、情報収集についての思い出 | Crudzoo
サーバーにReactアプリをデプロイする方法
【初心者】Reactアプリケーションを作ってデプロイする方法【歓迎】 – Qiita

PHPでもPHP7からnull合体演算子がサポートされるようになりました。
よく使う場面としては、nullの場合は空の文字列を返したい等です。

$val = null;
echo $val ?? "default";

出力結果

default

その他、C#やSwiftでも使えます。
JavaScriptはES2020からサポートされるようになったようです。
※Swiftの場合は「nil合体演算子」と呼ばれます。

なお、Perl（5.10以降）ではnull合体演算子は//だったりするので、言語によって違いがあります。
各言語仕様をご確認ください。

ちなみにVisualBasicだとNz関数がそれに当たるんでしょうか。
CSVエクスポートでのテキストデータのNull値について ACCESS

array_columnという関数を使って、配列やオブジェクトから指定した列（カラム）の値を取得することができます。
オブジェクトからも取り出せるのは非常に便利だなと思いました。

以下のような連想配列があったとします。

$ARRAY = [
    [
        "id" => 1,
        "name" => "aiko"
    ],
    [
        "id" => 2,
        "name" => "beta"
    ],
    [
        "id" => 3,
        "name" => "clare"
    ]
];

array_column関数を使ってname列だけを取り出してみます。

$NAME = array_column($ARRAY, "name");

print_r($NAME);

出力結果はこのようになります。

Array
(
    [0] => aiko
    [1] => beta
    [2] => clare
)

オブジェクトの場合

class User
{
    public $username;

    public function __construct(string $username)
    {
        $this->username = $username;
    }
}

$users = [
    new User("user 1"),
    new User("user 2"),
    new User("user 3"),
];

$USER = array_column($users, "username");

print_r($USER);

出力結果

Array
(
    [0] => user 1
    [1] => user 2
    [2] => user 3
)

公式リファレンス：
PHP: array_column – Manual

これまで非同期通信といえばXMLHttpRequestでしたが、最近は新たにFetch APIが主流になりつつあるようです。
Fetch APIがいつ定義されたのかは定かではありませんが、HTML Living Standardになった頃でしょうか。
それはともかくFetch APIの使い方を見ていきたいと思います。

まずはこれまでのXMLHttpRequestを確認してみましょう。

XMLHttpRequest

XMLHttpRequestオブジェクトの宣言

let xmlHttp;

if(window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlHttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

GETの場合

xmlHttp.open("GET", url, true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xmlHttp.onreadystatechange = function()
{
    if(xmlHttp.readyState == XMLHttpRequest.DONE && xmlHttp.status == 200) {

        const data = xmlHttp.responseText;

        // 何らかの処理

    }
}
xmlHttp.send(null);

POSTの場合

xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xmlHttp.onreadystatechange = function()
{
    if(xmlHttp.readyState == XMLHttpRequest.DONE && xmlHttp.status == 200) {

        const data = xmlHttp.responseText;

        // 何らかの処理

    }
}
xmlHttp.send(param);

Fetch API

Fetch APIの書式は次のようになります。

let promise = fetch(url, [options])

fetchはPromiseオブジェクトを返してくれます。

以下の例では基本的にPOSTでの通信としています。
続きを読む…»