配列化したオブジェクトの中から指定したプロパティだけを削除する方法。

fruits = [
    {
        name: "apple",
        color: "red",
        quantity: 3,
    },
    {
        name: "orange",
        color: "orange",
        quantity: 6,
    },
    {
        name: "grape",
        color: "purple",
        quantity: 10,
    }
];

ログを出力して中身を確認します。

console.log({fruits});

出力結果

{
  fruits: [
    { name: 'apple', color: 'red', quantity: 3 },
    { name: 'orange', color: 'orange', quantity: 6 },
    { name: 'grape', color: 'purple', quantity: 10 }
  ]
}

forEachとdeleteを使ってquantityプロパティを削除します。

fruits.forEach(element => delete element.quantity);

ログを出力して中身を確認しましょう。

console.log({fruits});

出力結果

{
  fruits: [
    { name: 'apple', color: 'red' },
    { name: 'orange', color: 'orange' },
    { name: 'grape', color: 'purple' }
  ]
}

quantityプロパティだけが削除されました。

プロパティを追加する

先ほどとは逆に、配列化したオブジェクトにプロパティを追加してみましょう。

元のオブジェクト配列

fruits = [
    {
        name: "apple",
        color: "red",
    },
    {
        name: "orange",
        color: "orange",
    },
    {
        name: "grape",
        color: "purple",
    }
];

追加するオブジェクト配列

quantities = [
    {
        quantity: 3
    },
    {
        quantity: 6
    },
    {
        quantity: 10
    }
];

forEachとObject.assignを使ってquantityプロパティを追加します。

fruits.forEach((element, index) => Object.assign(element, quantities[index]));

console.log({fruits});

出力結果

{
  fruits: [
    { name: 'apple', color: 'red', quantity: 3 },
    { name: 'orange', color: 'orange', quantity: 6 },
    { name: 'grape', color: 'purple', quantity: 10 }
  ]
}

substrは文字列から指定した部分を取り出せるメソッドです。
指定した位置から指定した長さの文字列を返します。

const str = 'Mozilla';

console.log(str.substr(1, 2));
// expected output: "oz"

console.log(str.substr(2));
// expected output: "zilla"

しかしsubstrはECMAScriptとしては古い機能とされていて、将来的に削除される可能性があるため、出来れば使用しないようにしましょう。

substrの代わりにsubstringメソッドを使いましょう。

substring

const str = 'Mozilla';

console.log(str.substring(1, 3));
// expected output: "oz"

console.log(str.substring(2));
// expected output: "zilla"

substrの引数は開始位置と返される文字列の文字数でしたが、substringは開始位置と終了位置となりますので注意が必要です。

構文

str.substring(indexStart[, indexEnd])

引数

indexStart: 返される部分文字列の、最初の文字を含んだ位置
indexEnd: 返される部分文字列から外される最初の文字の位置

戻り値

与えられた文字列から抽出された区間を含む新しい文字列

indexEndが省略された場合は文字列の最後までの文字を取り出します。
indexStartがindexEndと等しい場合は空の文字列を返します。
indexStartがindexEndより大きかった場合は2つの引数が交換されたものとして実行されます。

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

これまで非同期通信といえば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での通信としています。
続きを読む…»

JavaScriptのクラスやオブジェクトリテラルでコーディングしていて、他の言語と同じ感覚でthisキーワードを使用しているとバグが発生する可能性があります。

他の言語だとthisというとクラスやオブジェクト自身を参照するのですが、JavaScriptだと少し違って、通常は同じようにクラスやオブジェクト自身を参照してくれるのですが、コールバック関数で呼び出された場合はwindowを参照するのです。
これを知らないと意図しない動作でバグとなり、エラーが発生しますのでご注意ください。

実際にサンプルコードを踏まえて説明します。
まずはコールバック関数を実行するメソッドを含んだオブジェクトを作成します。

const exam1 = {

    a: function(callback) {
        callback();
    }

}

次に、コールバック関数を引数に与えて、先ほどのオブジェクトのメソッドを実行するためのオブジェクトを作成します。

const exam2 = {

    b: function() {
        console.log("function b!");
    },

    c: function() {
        this.b();
    },

    d: function() {
        exam1.a(exam2.c);
    }

}

実行する順番としては次の通りです。
続きを読む…»