初心者でもできる！Binaryデータのサーバーアップロード完全ガイド

## はじめに
みなさん、こんにちは！最近、APIテストをしていて「あれ？Binaryって何だろう？」と思ったことはありませんか？私は恥ずかしながら、先週までその正体をちゃんと理解していなかったんです（汗）。

でも、調べてみたら「これ、すごく基本的なことじゃん！」と驚きました。今日はそんなBinaryデータの正体と、サーバーへのアップロード方法について、初心者目線でわかりやすく解説します！

## Binaryって一体何なの？

まず、Binaryの正体から説明しますね。

Binary（バイナリ）とは、**二進数を使った情報のエンコード方式**のことです。簡単に言うと、すべてのデータを「0」と「1」だけで表現する方法なんです。テキストも、画像も、音声も、すべて「0」と「1」の組み合わせになります。


https://ja.wikipedia.org/wiki/%E3%83%90%E3%82%A4%E3%83%8A%E3%83%AA


なぜこんな方式があるかというと、コンピューターのハードウェア（論理ゲートやフリップフロップなど）が「オン（1）」と「オフ（0）」の2つの状態しか認識できないからなんです。

私が最初に「へぇ〜！」と思ったのは、私たちが普段見ている文字や画像も、コンピューターの中ではすべて「0」と「1」の羅列になっているということ。これって、ちょっと不思議な感じがしませんか？

## バイナリの表現方法はこんなにある！

バイナリデータについて調べていくと、「表現方法がこんなに多いの？！」と驚きました。ここでは、主な表現方法を紹介しますね！

バイナリデータは、「ビット」という単位で構成されています。ビットは0か1の値しか持てません。そして、8ビットを1組にしたものを「1バイト」と呼びます。1バイトは256種類（2の8乗）の値を表現できるんです！これを使って、文字、数字、画像、音声など、あらゆる情報をエンコードしています。

バイナリデータを表現する方法は主に3つあります。それぞれ特徴があって面白いんですよ！

### 1. 十進数表記（私たちの日常で使う数字！）

私たち人間にとって一番馴染みがある表記方法です。例えば、十進数の「10」は、バイナリでは「1010」になります。

最初は「なんで十進数を使うの？」と思いましたが、理由は単純で、私たち人間が普段から使っているからなんです。でも、コンピューターにとっては処理が複雑になるので、大規模なデータ処理には向いていないんですよ。

### 2. 二進数表記（コンピューターの母国語！）

0と1だけで表現する方法です。コンピューターにとっては最も自然な表記方法で、処理効率も抜群です！

ただ、人間にとっては「10110101」みたいな数字の羅列を見ても「うーん、何のこと？」ってなりますよね（笑）。私も最初は全然理解できませんでした。読解が難しく、間違いも起こしやすいというデメリットがあります。

### 3. 十六進数表記（プログラマーの強い味方！）

0〜9の数字とA〜Fのアルファベットを使って表現する方法です。16種類の記号を使うので、二進数よりも人間にとって読みやすく、コンピューターにとっても処理しやすいんです。

私がプログラミングを始めた頃、「なんでFFとかA3とか書いてあるの？」と不思議に思っていましたが、これが十六進数表記だったんですね。メモリやストレージの容量を表す時にもよく使われています。

以下に、各表記方法の例を示しますね！

|数値|十進数表記|二進数表記|十六進数表記|
|:-:|:-:|:-:|:-:|
|10|10|1010|A|
|100|100|1100100|64|
|255|255|11111111|FF|

この表を見て「へぇ〜！」と思いませんか？同じ数値でも表記方法によってこんなに違うんです。目的に応じて使い分けることが大切なんですよ。

### その他の表現方法（もっと深掘りしてみよう！）

上記以外にも、バイナリデータを表現する方法はいくつかあります。ちょっとマニアックですが、知っておくと「おっ！」と思われるかも？

- **BCDコード**: 10進数の各数字を4ビットで表現する方法です。人間にとって分かりやすく、処理速度も比較的速いので、金融機関などでよく使われています。私が銀行のシステム開発に関わった時、初めて知りました！

- **EBCDICコード**: IBMが開発した文字コードで、英数字や記号などを8ビットで表現します。主にメインフレームで使用されるんですよ。古いシステムを触る機会があれば出会うかも？

- **ASCIIコード**: 米国情報交換標準コードで、英数字や記号などを7ビットで表現します。最も広く使われている文字コードの一つです。プログラミングを始めたばかりの頃、「あ、これか！」と思った記憶があります。

- **Unicode**: 世界中の文字を表現するために作られた文字コードです。UCS-2やUTF-8など、様々な符号化形式があります。日本語や絵文字も表現できるので、今のWebサイトやアプリ開発には欠かせません！

これらの表現方法は、それぞれ異なる特徴を持っているので、目的に応じて使い分ける必要があります。私も最初は混乱しましたが、使っているうちに「あ、この場面ではこの表記が便利だな」と分かってきました！

## なぜBinaryでファイルをアップロードするの？

「でも、なんでわざわざBinaryでファイルをアップロードするの？」と思いますよね。私も最初はそう思いました。でも、理由はとっても合理的なんです！

### 1. データ転送が超高速！

Binary形式のデータは、テキスト形式と比べてめちゃくちゃコンパクトで効率的なんです。特に大量のデータを送る場合や、ネット環境が良くない時には、Binary形式を使うとデータ転送量を大幅に減らせて、通信速度がグンと上がります！

### 2. サーバー側の処理も爆速！

サーバー側でデータを解析・処理・保存する時も、Binary形式なら変換作業が少なくて済むので、処理効率が格段に上がります。テキストデータより解析速度が速いので、データ操作もサクサク進みます。

### 3. データの完全性を守れる！

ネット上でデータを送ると、ノイズや干渉、改ざんのリスクがあります。でも、Binary形式ならデータがシンプルでコンパクトなので、エラーが起きにくいんです。さらに、チェックサムやハッシュアルゴリズムでデータの正確性を確認できるので、安心感が違います！

### 4. あらゆるデータ形式に対応！

Binary形式は、テキスト、画像、音声、動画など、どんなデータ形式でも扱えます。つまり、どんなファイルでもBinary形式で送れるので、データのやり取りがめちゃくちゃ柔軟になるんです！

## Apidogで実際にBinaryデータを送ってみよう！

さて、理論はわかったけど、実際にどうやってBinaryデータを送るの？ここからは、私が愛用している[Apidog](http://www.apidog.com/jp/?utm_source=opr&utm_medium=a2qiita4&utm_content=binary)を使って、実際の手順を紹介します！

### 1. Apidogで新しいリクエストを作成

まずは[Apidog](http://www.apidog.com/jp/?utm_source=opr&utm_medium=a2qiita4&utm_content=binary)を開いて、新しいHTTPプロジェクトを作成します。プロジェクト内で「**+**」アイコンをクリックして、新しいリクエストを作りましょう。

リクエストのメソッドは「POST」を選んで、URLを入力します。ファイルをアップロードする場合は、サーバー側がファイルを受け取れるエンドポイントを指定してくださいね。

### 2. Bodyタイプを「Binary」に設定

リクエスト編集画面で「Body」タブを選択します。そして「Body」タブの下にある「Binary」オプションをクリックします。これで設定完了！保存しておきましょう。

この設定、最初は「え？これだけ？」と思いましたが、本当にこれだけなんです。[Apidog](http://www.apidog.com/jp/?utm_source=opr&utm_medium=a2qiita4&utm_content=binary)の使いやすさに感動しました！

![apidog-binary-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043706/7338f976-a4f6-4a4b-9b5a-bcb5ea63acb4.png)

### 3. ファイルを選択して送信

インターフェースを保存したら、「実行」ページに移動します。そこで「Upload」ボタンをクリックして、アップロードしたいファイルを選びます。画像でも、音声でも、どんなファイルでもOKです！

ファイルを選んだら、「送信」ボタンをクリックするだけ。これで、選んだファイルがBinaryデータとしてサーバーに送信されます。超簡単ですよね！

## プログラムからBinaryデータを送る方法（Axios編）

「APIテストツールは分かったけど、実際のプログラムからはどうやって送るの？」という疑問にもお答えします！ここでは、JavaScriptのAxiosライブラリを使った方法を紹介します。

### 1. FormDataオブジェクトを作成

まず、Binaryデータを`FormData`オブジェクトに追加します。`FormData`は、フォーム送信をシミュレートしてサーバーにデータを送るための便利なオブジェクトです。

```javascript
let formData = new FormData();
// ファイル入力要素やBlobオブジェクトからデータを取得
formData.append('file', binaryData, 'filename.ext');
```

ここで、`file`はサーバー側でファイルを取得するためのフィールド名、`binaryData`はアップロードするバイナリデータ（ファイルやBlobオブジェクト）、`filename.ext`はサーバー上で保存するファイル名です。

### 2. Axiosの設定

次に、Axiosのリクエスト設定を行います。特に`headers`部分が重要です。ファイルをアップロードする場合、ブラウザが自動的に`Content-Type`を`multipart/form-data`に設定してくれるので便利です。

```javascript
const config = {
  headers: {
    // Content-Typeはブラウザが自動設定してくれます
    'Accept': 'application/json', // 必要に応じて変更してください
  },
};
```

### 3. リクエストを送信

最後に、Axiosを使ってformDataオブジェクトを送信します。

```javascript
axios.post('your-server-endpoint', formData, config)
  .then(response => {
    // 成功時の処理
    console.log('アップロード成功！', response.data);
  })
  .catch(error => {
    // エラー時の処理
    console.error('アップロード失敗...', error);
  });
```

`your-server-endpoint`は、ファイルをアップロードするサーバーのURLです。

この方法、最初は「FormDataって何？」と思いましたが、使ってみるとめちゃくちゃ便利なんです！特にファイルアップロードには最適ですよ。

## まとめ

今回、Binaryデータの正体と、サーバーへのアップロード方法について解説しました。振り返ると：

1. Binaryとは「0」と「1」だけで表現するデータ形式
2. 転送効率が高く、処理も速い
3. データの完全性を保ちやすい
4. あらゆるデータ形式に対応できる
5. ApidogやAxiosを使えば簡単にBinaryデータを送信できる

私自身、この知識を得てから、ファイルアップロード機能の実装がグッと楽になりました。特にApidogを使ったテストは、直感的で分かりやすく、開発効率が格段に上がりましたよ！

みなさんも、ぜひBinaryデータの送信を試してみてください。最初は難しそうに感じるかもしれませんが、実際にやってみると「あれ？意外と簡単じゃん！」と思うはずです。