<p>こんにちは。<br><br>最近、TypeScriptを用いてサーバーサイドの開発を行う機会が増えてきました。<br>TypeScriptを十分に活用すれば、フロントエンドからサーバーサイドまで一つの言語で構築が可能です。<br>その上、AWS CDKのようなツールを使用すると、インフラもTypeScriptで設計でき、全てをTypeScriptで完結させるフルスタック開発が実現します。<br><br>しかし、このように便利な言語である一方で、サーバーサイドや他の低レイヤーの開発において、TypeScriptのnumber型は幅広すぎる場合があります。<br>特定の数値範囲、奇数だけ、またはゼロを除外したいなど、厳しい要件が必要な場面が往々にして発生します。<br>そこで、そのような要件に対応するためのRange型を導入し、開発者のミスを減少させる方法を共有します。<br></p><h3 id="h8bbf76eb61">TypeScriptのnumber型</h3><p><br>TypeScriptのnumber型の基本的な変数定義は以下のように書きます。</p><pre><code>const hoge: number = 1;</code></pre><p><br>この方法で問題は生じませんが、number型の一般性ゆえの制約も存在します。例えば、入力が0の場合にプログラムがクラッシュするリスクが考えられます。<br>これを避けるため、コード入力段階での厳格な型チェックを実施することで、実行前に問題を検出できます。<br>もちろん、型がすべてのランタイム値を制御するわけではありませんが、問題の発生率を大きく減少させる助けとなります。<br></p><h3 id="hc0a2353a0b">Rangeの型を定義する</h3><p><br>定義されたのがこちらです。<br>このジェネリクスは、startからendまでの数値を型として表現するためのものであり、具体的には、<code>NumericRange&lt;2, 4&gt;</code>  のように指定すると、型として<code>2 | 3 | 4</code>を得ることができます。</p><pre><code>type NumericRange&lt;
    start extends number,
    end extends number,
    arr extends unknown[] = [],
    acc extends number = never
&gt; = arr['length'] extends end
    ? acc | start | end
    : NumericRange&lt;start, end, [...arr, 1], arr[start] extends undefined ?  acc: acc | arr['length']&gt;</code></pre><p><br>一つひとつ分解して説明します。<br><br><strong>引数</strong><br>- <code>start extends number</code> : 範囲の開始値<br>- <code>end extends number</code> : 範囲の終了値<br>- <code>arr extends unknown[]</code> : 内部で利用される配列。この配列の長さによって現在の数値を判断します。<br>- <code>acc extends number</code> : 累積値。これまでの数値の範囲を持たせます。<br><br><strong>条件の分岐</strong><br>次は条件分岐について説明します。</p><pre><code>arr['length'] extends end
    ? acc | start | end
    : NumericRange&lt;start, end, [...arr, 1], arr[start] extends undefined ? acc : acc | arr['length']&gt;</code></pre><p><br><code>arr['length'] extends end</code> は配列の長さがendに達しているかを判断する条件です。</p><ul><li>true: もし達していれば、それまでの累積値<code>acc</code> 、開始値<code>start</code>、終了値<code>end</code>を結合して型を返します。</li><li>false: それ以外の場合: 配列の長さを1つ増やし<code>[[...arr, 1]</code>、次の数値の範囲を計算します。この際、現在の数値は<code>arr['length']</code> として取得できます。</li></ul><p><br><strong>例</strong><code>NumericRange&lt;2, 4&gt;</code> を考えた場合</p><ol><li>最初は<code>arr</code>  が空の配列なので、<code>arr['length']</code>は0です。</li><li>arr['length']  がend(4) に達していないので、再帰的にNumericRangeを呼び出します。このとき、arr は[1]となります。</li><li> このプロセスを繰り返し、<code>arr['length']</code> が2, 3, 4と増えていきます。</li><li> <code>arr['length']</code>  が4になった時点で、条件<code>arr['length'] extends end</code>が成立し、<code>2 | 3 | 4</code>という型が結果として得られます。</li></ol><p><br>どうでしょう、細かく分ければ理解しやすいですよね。<br></p><h3 id="ha214098e44">まとめ</h3><p><br>今回は、<code>number</code>  型で数値の範囲を指定する<code>Range</code>の型を作って解説してみました。<br>最終的な判断は、将来のコードの厳密さや保守性をどれだけ重視するかによります。<br>特に他の開発者向けにツールを開発する場合など、このような細かな型の扱いが重要になることがあります。<br>一方で、エンドユーザー向けの開発では、このようなスキルが必ずしも必要ではないかもしれません。<br>TypeScriptを使った開発は多岐に渡り、どのように利用するかはプロジェクトの要件や目的に応じて柔軟に選ぶことができるのが強みですのでご参考までに。</p>

server

【Tips】TypeScriptでnumberのRange型を作成する

tech

<p>こんにちは。<br><br>ある要件でセンシティブな文字列を扱う必要があり、TypeScriptが提供しているstring型だけでは要件を満たせない場面がありました。<br>調べてみると、TypeScriptでは変数の型としてより詳細に<code>string</code> 型を定義する方法があることを知りましたので、その方法を紹介します。<br></p><h3 id="h46a21e19c1">簡単なコード</h3><p>まずは簡単なコード紹介です。<br><br>先頭にスラッシュを入れなければいけない文字列リテラルを定義したいとき、以下のようにすると実現できます。</p><pre><code>const hoge: `/${string}` = '/api'; // エラーが出力されない
const hoge2: `/${string}` = 'api'; // エラーが出力される</code></pre><p><br><a href="https://www.typescriptlang.org/play?#code/C4TwDgpgBAygNgQwM4AsIBMbAE4EsB2A5lALxQAGA9ACQDeSOBhAvuQNwBQHAxgPb4MoKXoQgAuWIlQYseIqSgBySgjC5FbKJUpRAFQyBLhkA-DIBkGQF+KgbKVAqgyAYhkBWDIBEGHv0HDRAJgnxkaTI3llFVXVNbT0jMytrQGiGIA" target="_blank" rel="noopener noreferrer">TypeScript: TS Playground</a><br><br>また、逆にスラッシュを含めてはいけない場合は、以下のようにinferを使って推測し、neverを返す型を定義することで実現できます。<br></p><pre><code>type NonSlashedString&lt;S extends string&gt; = S extends `/${string}` ? never : S;

const hoge: NonSlashedString&lt;'api'&gt; = 'api'; // エラーが出力されない
const hoge2: NonSlashedString&lt;'/api'&gt; = 'api'; // エラーが出力される
const hoge3: NonSlashedString&lt;'api'&gt; = '/api'; // エラーが出力される</code></pre><p><br><a href="https://www.typescriptlang.org/play?#code/C4TwDgpgBAcg9gOwMoBsCGBnAFhAJk4AJwEsEBzAHiSggA9gIFcMoMjSyA+KAXimroMmLAAYB6ACQBvNiXIBfEVAD8UBBABuEQlABc-ANwAoIwGNEbKFjhkI++MnTY8BOZQDkaMMXfc+n73cDKDExKEAKhkBLhkAfhkAZBkAvxUBspUBVBkAYhkArBkARBjMLYCsbCAAme0RUTBx8dnIKdzEvHz8oAJ9g0IiYhJTUwGiGHIRLa1sAZhLHcpcqj3rfXia6wNawqLiktO6gA" target="_blank" rel="noopener noreferrer">TypeScript: TS Playground</a><br></p><h3 id="h9cb4683b10">ユースケース紹介（Router定義）</h3><p>これらの方法を使うと、TypeScriptにおいてstring型をより詳細に定義できます。<br>特に、センシティブな文字列に対して細かな制約をかける際に役立ちます。<br>例えば、frontから各APIへ接続する際に、APIパスにスラッシュの有無で挙動が変わってしまう場合があります（例：CORSなど）。<br><br>このような文字列のスラッシュ有無などのヒューマンエラーは避けることができない場合もあるため、TypeScriptを使用している以上は静的な型チェックを行いたいと考えることでしょう。<br><br>以下のように定義することで、入力値に対して厳密なチェックを行うことができ、安全性を向上させることができます。<br></p><pre><code>type NonSlashedString&lt;S extends string&gt; = S extends `/${string}` ? never : S;
type SlashedString = `/${string}`;

export class Router {
    public static readonly non_slashed: NonSlashedString&lt;'api/public'&gt; = 'api/public';
    public static readonly slashed: SlashedString = '/api/private;
};</code></pre><p><br><a href="https://www.typescriptlang.org/play?#code/C4TwDgpgBAcg9gOwMoBsCGBnAFhAJk4AJwEsEBzAHiSggA9gIFcMoMjSyA+KAXimroMmLAAYB6ACQBvNiXIBfEVAD8UBBABuEQlABc-ANwAoI6Ej902PATlleUcdNkdFxo3TBxCwKAGNLLABKcACuDDpSRlDRUGAhAEYoxL6swGjAyVCEEGi4iCggaogA+hiWOLj68Mjl1uzkFADkaGDEYnGJyY3cfM2t7QlJvo3GMbGDmWzpmdm5+YVlmBX6qEt1tvaNYi1tYCQa6RAjRvLGQA" target="_blank" rel="noopener noreferrer">TypeScript: TS Playground</a><br><br>NonSlashedStringやSlashedStringなど、型を使って入力値を厳密にチェックすることで、安全性を向上させることができます。<br>また、型で強制することで他の人が追加する時も安心です。<br><br>このように、TypeScriptの型定義における正規表現ライクなstring型の詳細な使い方を紹介しました。<br>是非、自身のTypeScriptプロジェクトで活用してみてください。</p>

front

TypeScriptの型定義における正規表現ライクなstring型の詳細な定義

<p>Dockerなど複数DBを立ち上げる方法Tipsです。<br><br>MySQL のコンテナにおいては，環境変数<code>MYSQL_DATABASE</code>  によって自動でDBを生成できます。<br>しかし1つのDBしか自動で生成できず、テスト用のDBなどは分けたい場合、DB作成スクリプトを起動時に実行したりするなどで対処していました。<br>しかしmysqlのimageを見ると起動時にスクリプトを渡すことができ、簡単にDBを2つ作成できたので共有Tipsとして残しておきます。<br></p><h3 id="h4007b1e642">各構成</h3><p>実現するための各構成です。<br></p><h3 id="h9ff89bd48f">ディレクトリ構成</h3><pre><code>.
├── docker-compose.yml # コンテナの設定を記述
└── mysql-init         # DB初期化用のSQLを格納するディレクトリ
 &nbsp;&nbsp; └── 01.sql         # コンテナ起動時に実行されるSQL</code></pre><p><br></p><h3 id="h9e9997b679">コンテナ設定</h3><pre><code>version: '3'

services:
  db:
    image: mysql
    restart: always
    environment:
      MYSQL_HOST: db
      MYSQL_DATABASE: db
      MYSQL_PORT: 3306
      MYSQL_USER: user
      MYSQL_ROOT_PASSWORD: password
      MYSQL_PASSWORD: password
    volumes:
      - ./mysql-init:/docker-entrypoint-initdb.d
    ports:
      - 3306:3306</code></pre><p><br></p><h3 id="hd7f7b877ed">0.1sql</h3><pre><code>CREATE DATABASE IF NOT EXISTS `db_test`;</code></pre><p><br>コードを見ればわかると思いますが、要は<strong>ホスト側で作成したsqlファイルをDockerへバインドマウントしているだけです。</strong><br>そうすればdockerの起動時、スクリプトが実行されdbが作成されます。<br>今回の場合だと環境変数でも設定していますが無事に2つ作成されます。<br><br>以上です。<br></p><h3 id="h3de35099b3">参考</h3><p><a href="https://onexlab-io.medium.com/docker-compose-mysql-multiple-database-fe640938e06b" target="_blank" rel="noopener noreferrer">https://onexlab-io.medium.com/docker-compose-mysql-multiple-database-fe640938e06b</a></p>

infra

【Docker】dockerでmysql DBを複数作成し起動する

<h3 id="h9707d3a59a">概要</h3><p><br>1つのステータスコードに対し<code>body</code> レスポンスが複数ある事象に遭遇しました。<br>結論としてAPI認可などにより返す<code>body</code> レスポンスの内容が違う場合がある時、<code>oneOf</code>  という書き方で対応ができることができます。<br></p><h3 id="h1e2c65599c">複数レスポンス 例</h3><p><br>以下で例文を記載しますが、お急ぎの方はコピペしちゃってください。</p><pre><code>openapi: 3.0.0
---
省略
---
paths:
  /sample:
    get:
      tags:
        - samples
      description: sample api sampleが返ってきます
      responses:
        "200":
          description: sample api 成功レスポンス
          content:
            application/json:
              schema:
                oneOf:
                  - $ref: "#/components/responses/SampleResponse1"
                  - $ref: "#/components/responses/SampleResponse2"
              examples:
                response1:
                  summary: sample api 成功レスポンスの通常レスポンス
                  value:
                    success1:
                      message_title: Response1
                      message: sample
                response2:
                  summary: sample api 成功レスポンスの認可により絞られた特殊レスポンス
                  value:
                    success1:
                      message_title: Response2
                      message: special sample
components:
  responses:
    SampleResponse1:
      type: object
      properties:
        success1:
          type: object
          properties:
            msg_title:
              type: string
              example: SampleResponse1
            message:
              type: string
              example: sample
    SampleResponse2:
      type: object
      properties:
        success1:
          type: object
          properties:
            msg_title:
              type: string
              example: SampleResponse2
            message:
              type: string
              example: special sample</code></pre><p><br></p><h3 id="he5124b4174">プレビュー確認</h3><p><br>例の内容を記載するとOpenAPIがよしなにレスポンスを記載してくれます。<br><code>examples</code> を定義したことにより、別のレスポンスを表示できるようになっています。<br><img src="https://images.microcms-assets.io/assets/8384d5683a0a40e2b92dd54f76ca37f7/3b39d6b15aa64834a0008b88cdb37e9c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-02-04%2014.57.43.png" alt=""><br>Schemaを選択すれば、oneOfを使用して定義した部分を見ることができます。<br><img src="https://images.microcms-assets.io/assets/8384d5683a0a40e2b92dd54f76ca37f7/3776e63c99474b21800ffd4d3f3788ec/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-02-04%2014.58.08.png" alt=""><br><br>以上です。</p>

【OpenAPI】１つのステータスコードに対して複数のレスポンスを定義する

<p>普段使用しているmacのSSD寿命は把握されているでしょうか<br>今回はSSD寿命把握について記載します。<br></p><h3 id="h9fba7c5cfe">簡潔に伝えると</h3><pre><code># smartmontools をインストール
$ brew install smartmontools 
# インストール確認
$ which smartctl
/opt/homebrew/bin/smartctl
# ツールを叩いてボリュームを見る(基本はSSDはdisk0のはず)
$ smartctl -a /dev/disk0
Percentage Used:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 4%
＃ 100%に近いほど劣化してます</code></pre><p><br></p><h3 id="haf6ccc6ed2">SSDの寿命を確認する</h3><p><br>ステップごとに説明していきます。<br></p><h4 id="h0a8703df10">SSDチェックツール「SMART Monitoring Tools」をインストール</h4><p><br>以下コマンドでインストールしてください。</p><pre><code>$ brew install smartmontools </code></pre><p><br>インストール後、以下コマンドで使えるか確認してください。</p><pre><code>$ which smartctl
/opt/homebrew/bin/smartctl</code></pre><p><br>上のように使える場合はコマンドのPathが返ってきます。<br>smartctl not foundなどと言われた場合は一度シェルを終了してみてください。<br></p><h4 id="h4e87d45873"><span style="color:#333333">ボリュームのパーテーション一覧を確認する</span></h4><p><br><span style="color:#333333">基本的には「disk0」が、Mac の内蔵 SSD になるはずです。</span><br></p><h4 id="h811b8851c0">ボリュームをチェックコマンドで調べる</h4><p><br>インストールしSSDの所在が確認きたら以下コマンドで調べます。</p><pre><code>smartctl -a /dev/disk0</code></pre><p><br><span style="color:#333333">SSDの使用状況は「Percentage Used」の項目で確認できます。ここの「〜％」の数値が、現在までのSSDの使用状況となり、100％に近いと寿命が近いということになります。</span><br>筆者のm1 macは1年ほど使用し4%でした（毎日使用）<br>またそれ以外の項目についての詳細は以下に説明があるので軽く目を通してみると良いです。<br><a href="https://ja.wikipedia.org/wiki/Self-Monitoring,_Analysis_and_Reporting_Technology" target="_blank" rel="noopener noreferrer">Self-Monitoring, Analysis and Reporting Technology – Wikipedia</a> <br></p><h3 id="h5b006fd2b8">SSDが劣化しないようにするためには</h3><p><br>最後にTips的な<br><span style="color:#333333">SSDの劣化原因はデータの保存と呼び出しが基本となります。</span><br>基本を理解しつつパターンを記載すると</p><ul><li><span style="color:#333333">OSやアプリの挙動（Mac使用中に自動でデータを読んだり書いたりしている）</span></li><li><span style="color:#333333">メモリ不足時の補完</span></li><li><span style="color:#333333">SSDの残容量不足</span></li></ul><p><span style="color:#333333">が原因だったりもします。</span><br><br><span style="color:#333333">そのため以下の意識をしているだけで大分変わります。</span></p><ul><li>メモリを圧迫しないよう使わないアプリは閉じておく</li><li>SSDの空き容量を8割以上埋めないようにする</li></ul><p><br>メモリが足りなくなるとSSDに負荷がかかります。<br><strong>使わないアプリは閉じておく</strong>などして対策しておきましょう。<br><br>以上です。</p>

MacのSSDの寿命を確認する方法

<p>たまに見かけるけどいつも忘れてしまうため備忘録として残します。<br>以下のコード見かけたことありませんか？</p><pre><code>const obj = {
  [a]: 'foo'
}</code></pre><p><br></p><h3 id="hb16f714b77">これなに</h3><p>Computed Property Namesと言います（日本語訳で計算されたプロパティ）<br><span style="color:#293030">ES2015から実装されたシンタックスです。一番下にMDNリファレンス残しておきます。</span><br></p><h3 id="h43471f3275">用途</h3><p><span style="color:#293030">オブジェクトのキー名を変数から参照したい場合があったりする時に使用します。</span><br>比較としてES2015以前のと比べてみましょう。<br></p><h4 id="h921e9ea9fc">Computed Property Namesが無かった時代(ES5)</h4><p>&lt;&lt;file1&gt;&gt;</p><pre><code>const name = 'Rose'
const age = 23

const profile = {
  // Received =&gt; {name: 23} nameとして展開されてしまう
  name: age
}</code></pre><p><br>以上のように変数から参照できないため暫定対応として以下が主流でした（TSであればコンパイルエラーが出ます）<br>&lt;&lt;file1&gt;&gt;</p><pre><code>const name = 'Rose'
const age = 23
const profile = {}
profile[name] = age

// profile =&gt; {Rose: 23}</code></pre><p><br></p><h4 id="h36af00f7c8">Computed Property Namesがある時代(ES6+)</h4><p>&lt;&lt;file1&gt;&gt;</p><pre><code>const person = 'Rose'
const age = 23
const profile = {
  [person]: age
}

// {Rose: 23} と展開される。</code></pre><p>こうなります。<br></p><h3 id="hee697c28c6">Computedなだけにメソッド呼んだりもできる</h3><p>面白いのがこんなこともできます。<br>&lt;&lt;file2&gt;&gt;</p><pre><code>const person = 'Rose'
const age = 23
const profile = {
  [person.toUpperCase()]: age // 大文字にしたい
}

// profile =&gt; {ROSE: 23}</code></pre><p><br>オブジェクトのkeyに変数雨を当てれることで表現方法が広がりそうです。<br>しかしJSは<strong>わりかしなんでもできてしまう言語 </strong>&amp; 初見では分かりづらいので適宜使用することをオススメします。<br><br>以上です。<br></p><h5 id="h3de35099b3">参考</h5><p><a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Objectinitializer#Computedproperty_names" target="_blank" rel="noopener noreferrer">MDNリファレンス</a> </p>

正式名称はComputed Property Namesと言います

【JavaScript】オブジェクトのキーを角カッコ [brackets] で囲う記法について

<p>Webサイト制作におけるレイアウトの手法・用語がごっちゃになりませんか？<br>改めてその違いをまとめてみました。<br></p><h3 id="h03c49795de">レスポンシブWebデザイン</h3><p>「レスポンシブWebデザイン」とは、Webサイトを閲覧するユーザーが利用しているデバイス（パソコン・スマホ・タブレットなど）の<strong>画面サイズに合わせてデザインを柔軟に調整し</strong>、見やすく最適な表示にすることを指します。<br><br>レスポンシブWebデザインはどうやってレスポンシブにするかによって<strong>4種類の手法</strong>があります。<br></p><ul><li>レスポンシブレイアウト</li><li>リキッドレイアウト</li><li>フレキシブルレイアウト</li><li>グリットレイアウト</li></ul><p><br></p><h3 id="he42b188624">レスポンシブレイアウト</h3><p>レスポンシブレイアウトは、デバイスの画面幅に応じてコンテンツや画像、ナビゲーションなどの配置・表示/非表示などを調整するレイアウトです。デザインの切り替えは、「ブレイクポイント（※）」を基準にします。<br></p><h3 id="h0fd9d1bdf3">リキッドレイアウト</h3><p>リキッドレイアウトは、どのデバイスでも<strong>画面の横幅に合わせてコンテンツの表示サイズがピッタリに可変される</strong>レイアウトです。<br></p><h3 id="heaba0ae3db">フレキシブルレイアウト</h3><p>フレキシブルレイアウトは、<strong>リキッドレイアウトと同じで要素の単位を%で指定しますが、最小幅と最大幅も指定したレイアウト</strong>です。<br>例えば、リキッドレイアウトでは、大きなデスクトップで閲覧する場合、各要素が横長に広がり過ぎてかえって見づらくなってしまうことがあります。<br>これを避けるために、ブレイクポイントを指定することで、指定した幅以上の画面の場合は左右に余白を作って見やすい表示に調整します。<br></p><h3 id="h4991e0cd7b">グリットレイアウト</h3><p>グリッドレイアウトとは、<strong>Webサイトの幅と高さから、画面を縦横に格子状に分割し、ブロックで構成したレイアウト</strong>です。<br>CSSフレームワーク「Foundation」や「Masonry」があり、簡単に導入することができますが、外部ファイルなので仕様の変更に対応する必要があります。<br></p><h5 id="h00d4fbcb3b">上記デザイン導入の注意点</h5><p>レイアウトの方法を４つご紹介しましたが、単に横スクロールが出ないようにするだけでは、ユーザーが見易いWebサイトとは言えません。その為、それぞれ画面のサイズに合わせて、<strong>フォントサイズや画像サイズなどを調整</strong>します。<br></p><h3 id="ha214098e44">まとめ</h3><p>改めてまとめてみると色々種類がありましたね。<br>Top pageではファーストビューを高めるためリキッドレイアウト。<br>お問い合わせページなどではフレキシブルレイアウトなどページによって変えるのがよさそうです。<br><br></p>

design

Webレイアウトまとめ

<p style="text-align:justify">今回は、最近 <code>JavaScript</code>を書き始めた初心者の方や、ES6 以降の JavaScriptしか触っていない方などに向けて</p><p><code>Function.prototype.call()</code>&nbsp;/ <code>Function.prototype.apply()</code>&nbsp;/ <code>Function.prototype.bind()</code>&nbsp;について紹介します。<br>また様々なライブラリを使用しプロジェクトを進めていくと思いますが、ライブラリが動かないなど原因を調査する際にピュアなJSを見る場面が多く、僕自身も都度忘れるため備忘録を兼ねた記事です。<br>※この記事はJavaScriptでの<code>this</code>の扱いを理解しておく必要があります。以下の記事でthisについて記載してます。<br><br>では本題です<br></p><h3 id="h8a175a9b0e">前提</h3><p><code>Function.prototype.call()</code>&nbsp;/ <code>Function.prototype.apply()</code>&nbsp;/ <code>Function.prototype.bind()</code>&nbsp;はすべて関数オブジェクトのメソッドとなります。<br>関数として定義したものは、すべてこの三つのメソッドを呼び出せます。<br>ではこのメソッドが必要な理由とは？<br>答えは以下です。<br>関数のthisはグローバルオブジェクトで、ブラウザの場合はWindowオブジェクトです。<br>※<span style="color:#333333">ちなみにstrictモードの場合、thisにはundefinedがセットされます。</span><br>これが厄介でした。そのためthisを固定したい要望が生まれ上記のメソッド群が生まれたわけです。<br></p><h3 id="h79652057bf">call()とは</h3><pre><code>// 構文
func.call([thisArg[, arg1, arg2, ...argN]])</code></pre><p>既存の関数を呼び出す際に、異なる<code>this</code>オブジェクトを割り当てることが可能になります。<br></p><h3 id="he8b2df3525">apply()とは</h3><p>既存の関数を呼び出す際に、異なる<code>this</code>オブジェクトを割り当てることが可能になります（callとの違いは...？）<br></p><h5 id="h6cdd50302f">Tips</h5><p>call()メソッドは、第二引数以降にメソッドに渡す引数を設定できるのですが、スプレッド構文を使うことで配列もいれることができます。そしてその結果はapply()メソッドと全く同じになるため、apply()メソッドは近年使われなくなりつつあります。<br></p><h3 id="h0259f71495">call()とapply()の違い</h3><p>call()はbind()と同じく、第二引数以下は関数の引数を文字列で指定できます。<br>bind()とよく似ており、異なる点としては呼び出し時に実行される点だけです。<br>apply()は、第二引数には文字列はとれず、配列となります。<br>それぞれの違いは次の通りです。</p><pre><code>function hello(name1, name2, name3) {
  console.log("こんにちは、" + name1 + " " + name2 + " " + name3);
}
const tanaka = { name: "tanaka" };

// bindの場合
const bindTanaka = hello.bind(null, tanaka.name, "sasaki", "saito");
bindTanaka(tanaka); //こんにちは、tanaka sasaki saito

// callの場合
hello.call(tanaka, tanaka.name, "sasaki", "saito"); //こんにちは、tanaka sasaki saito

// applyの場合
hello.apply(tanaka, [tanaka.name, "sasaki", "saito"]); //こんにちは、tanaka sasaki saito</code></pre><p>※引数が配列ならapply()、文字列ならcall()を使うといった使い分けでOKです。<br>また<code>bind</code>の第一引数のthisキーワード部分は、なにかいれる必要があるので、thisを入れない場合は一般的にはnullが使われます（第一引数にnullやundefinedを指定すると、thisはグローバルオブジェクト（ブラウザはwindowオブジェクト）となります。）<br></p><h3 id="h5e4b7a26f7">bind()とは</h3><p>bind()メソッドは<strong>thisや引数を固定した新しい関数を作成します。</strong><br>bind()メソッドの第一引数として指定したオブジェクトをthisの参照先として固定することができます。</p><p style="text-align:justify">かつては現在ほど簡単ではなかった実行コンテキスト、あるいは<code>this</code>&nbsp;の扱いをぐっと容易にしたとても便利な関数です。</p><p style="text-align:justify">現在はアロー関数の登場により使う機会はほぼなくなっているもののpure JSをコードリーディングするには欠かせない知識です。</p><p><br>次の例を見てみましょう</p><pre><code>function hello() {
  console.log("こんにちは、" + this.name);
}
const tanaka = hello.bind({ name: "tanaka" });

tanaka("sasaki"); // こんにちは、tanaka</code></pre><p>呼び出す関数で引数を指定したとしても、bindの第二引数で引数を固定している場合、bindが指定した引数が優先されます。（引数を予約していると考えるとわかりやすいです）<br>また、このようにbindによる固定を<strong>bindによるthisの束縛</strong>といいます。<br></p><h3 id="h68176f37e0">bind(), call(), apply()の違い</h3><p>bind()はthisキーワードや引数の参照先を変更します。<br><strong>使用時点で実行はしません。</strong><br><br>call(), apply()はthisキーワードや引数の参照先を変更する点はbind()と同じです。<br>異なる点は、<strong>使用時点で関数を実行すること</strong>です。<br>次の例を見てみましょう</p><pre><code>function hello() {
  console.log("こんにちは、" + this.name);
}
const tanaka = { name: "tanaka" };

// bindの場合
const bindTanaka = hello.bind(tanaka);
bindTanaka(); //こんにちは、tanaka

// call()の場合
hello.call(tanaka); //こんにちは、tanaka

// apply()の場合
hello.apply(tanaka); //こんにちは、tanaka</code></pre><p><br>このように、bind()だけthisを固定、呼び出しの二段階となります。<br></p><h3 id="ha214098e44">まとめ</h3><p>JavaScriptでは<code>this</code> の扱いが特殊なためこういったメソッドを使用し固定する場面が必要な時があります。<br>こういった根本を知っていることでよりTypeScriptのAltJSなど使うときに応用が効きます。<br><br>この記事は以上となります。</p>

JSで忘れがちなcall() / apply() / bind()について

<p>オンラインなどのフリーツールでjsonからCSVへの変換はできるかと思いますが、扱っている情報によっては手元で変換したい場合があると思います。<br>今回はめちゃくちゃ便利な<code>jq</code>コマンドを用いて対応してみます。<br></p><h3 id="h0cca9b2034">jqコマンド</h3><p>jqコマンドはコマンドラインでJSONを扱える便利ツールです。<br>めちゃくちゃ便利なため是非お手元にインストールしてみてください...!!<br><br>homebrewなどあればインストールはこちらです。</p><pre><code>$ brew install jq</code></pre><p>Ubuntuであればaptでインストールできます。</p><pre><code>$ sudo apt install -y jq</code></pre><p><br></p><h3 id="hf78585007e">整形してみる</h3><p><br>それでは<code>jq</code>コマンドを用いて整形してみましょう。<br>サンプルにCoronavirs Trackerを利用してみます。<br>※Coronavirs Trackerは、世界中のCOVID-19の感染状況の数字をテキストで表示してくれるサービスになります。</p><pre><code>$ curl https://corona-stats.online/</code></pre><p><br>こんな感じで表示されます。<br><img src="https://images.microcms-assets.io/assets/8384d5683a0a40e2b92dd54f76ca37f7/3918a27add354953aa753197d523b882/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-12-19%2018.38.50.png" alt=""><br><br>このサービスはJSONファイル出力もapiとして提供しております。<br>以下コマンドでjsonを出力してみてください。<br></p><pre><code>$ curl https://corona-stats.online/?format=json -o sample.json</code></pre><p>これでカレントディレクトリにsample.jsonができました。<br><br>そして肝心のcsv変換コマンドは以下となります。</p><pre><code>$ cat sample.json | jq -r '.data[]|[.country, .cases, .todayCases, .deaths, .todayDeaths, .recovered, .active, .critical, .casesPerOneMillion, .deathsPerOneMillion, .tests, .testsPerOneMillion, .confirmed, .countryCode]|@csv'</code></pre><p><br>CSVに変換されました。<br><br>複数に入ってる<br></p>

コマンドラインでJSONをCSVに変換する

<h3 id="hceed918c43">プロパティが多くなるとめんどくさい</h3><pre><code>class User {
  public readonly id: number;
  public readonly name: string;
  public readonly age: number;
  public readonly email?: string;

  constructor(
    id: number,
    name: string,
    age: number,
    email?: string,
  ) {
    this.id = id;
    this.name = name;
    this.age = age;
    this.email = email;
  }
}</code></pre><p>Classに必要な初期化処理を愚直に書くとめんどくさいためこれを少しでも楽にする。<br></p><h3 id="h1ab691aa7d">Parameter propertiesで楽にする</h3><p>TypeScriptのクラスには<a href="https://www.typescriptlang.org/docs/handbook/classes.html#parameter-properties" target="_blank" rel="noopener noreferrer">parameter-properties</a>という記法がある。</p><pre><code>class User {
 constructor(
   public readonly id: number,
   public readonly name: string,
   public readonly age: number,
   public readonly email?: string,
 ) {}
}</code></pre><p><br>これで記述量が半分になって楽になる。<br><br><br></p>