カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

配列やオブジェクトから指定した列の値を取得する

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

5,255 views

非同期通信 XMLHttpRequestからFetch APIへ

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

2,968 views

SSHコマンドの使い方

SSH(Secure Shell)でログインするにはsshコマンドを使用します。
オプションlでユーザー名を指定するか、@でユーザー名とホスト名を繋いで指定するかのどちらかの方法でログインします。

オプションlでユーザー名を指定する場合

ssh -l [username] [hostname]

ユーザー名@ホスト名で指定する場合

ssh [username]@[hostname]

その後、パスワードを聞かれますので、パスワードを打ち込めばSSHでログインできます。
ログイン後はサーバーのシェルでコマンドを実行する場合と同様の操作が可能です。

なお、SSHでの接続にはサーバーがSSHでのログインを許可している必要があります。

322 views

cURL(client for URL)

cURL(カール)は、HTTP・HTTPSやFTPなど様々なプロトコルを用いてデータを転送するライブラリとコマンドラインツールです。
最近のレンタルサーバーのPHPにはライブラリがデフォルトで組み込んであることもあります。

HTTPでデータを取得する

まず取得したいURLを設定

$url = "http://www.example.jp";

cURLを初期化し、ハンドルを取得します。

$ch = curl_init();

こちらにいきなりURLを入れてcurl_init($url)としても構いません。
ここではオプション設定を使用してURLを設定します。

curl_setopt($ch, CURLOPT_URL, $url);

メソッドの設定。GETを指定します。

curl_setopt($ch, CURLOPT_HTTPGET, true);

最後に取得したデータを文字列として取得するよう設定します。
続きを読む…»

670 views

コールバック関数でのthisの扱いに注意!

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);
    }

}

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

1,757 views