私は普段エンジニアではないのですが、最近は生成AIとペアを組んで、Webツールの開発に熱中しています。
そこで私が一番こだわったポイント。それが「クライアントサイド技術」を採用することでした。
なぜ、非エンジニアの私がそこにこだわったのか？理由はシンプルで、「皆さんの大事なデータを守りたいから」です。
「画像を変換するサイト」って便利ですが、「一度サーバーにアップロードする」のが怖くないですか？仕事の資料や、プライベートな写真を、見知らぬ誰かのサーバーに送るのはリスクがあります。
だからこそ、「サーバーに送らず、ブラウザだけで完結する」仕組みを作りたかったのです。
ツールを公開した際、本職のエンジニアの方から「クライアントサイド処理なんですね！すごい！」と褒めていただいたのですが、正直言うと「クライアントサイドって具体的に何？」と思っている方も多いはず。（私も勉強するまではふんわりした理解でした…笑）
しかし、この仕組みこそが、個人が「安全」で「高性能」なツールを作るための最強の武器なのです。
今回は、専門用語を一切使わず、私たちの身近な「飲食店」に例えて、この技術のすごさを解説します！
1. 「普通のレストラン」と「持ち込み焼肉屋」の違い
Webサービスには大きく分けて2つのやり方があります。それが「サーバーサイド（従来型）」と「クライアントサイド（今回）」です。
これを飲食店で例えると、こうなります。
① サーバーサイド処理 ＝ 「食材を持ち込んだら料理してくれるレストラン」
私たちがよく使う多くのWebサービス（Google検索やSNSなど）は、この形式です。
- 客（あなた）が食材を持ってお店に行く
- 食材を厨房（サーバー）に預ける
- プロのシェフが料理を作って、席まで運んでくる
【特徴】
- 食材（データ）を預ける: 自分の食材を一度厨房に渡さないといけません
- 店側が大変: 注文が増えると厨房がパンクするし、維持費（サーバー代）がかかる
- 待ち時間がある: 調理して運ばれてくるまで待つ必要がある
② クライアントサイド処理 ＝ 「持ち込んで自分で焼くスタイルの焼肉屋」
今回、私がAIと作ったツールで採用したのがこの形式です。
- 客（あなた）が自分の食材を持って入店する
- 店は「コンロと調味料（プログラム）」だけを渡す
- 「焼く（処理する）」のは、自分のテーブル（あなたのPC）で行う
【特徴】
- 食材（データ）を渡さない: 自分の席で焼くので、店員に食材を預ける必要がない
- 店側が楽: 調理はセルフサービスなので、コストがほぼかからない
- 即座に食べられる: 自分のペースで焼いてすぐ食べられる
この比喩のポイントは、「食材（データ）はあなたが持ち込んだもの」という点です。お店（サービス提供者）は「調理器具（プログラム）」だけを提供し、実際の調理作業はあなた自身が行うのです。
2. 「持ち込み焼肉屋（クライアントサイド）」の3つのメリット
では、なぜ私がこの「持ち込み焼肉屋スタイル」にこだわったのか？そこには、ユーザーにとっても開発者にとっても嬉しい3つのメリットがあるからです。
メリット①：プライバシー最強（これが一番の理由！）
普通の画像変換サイトだと、一度画像をサイトの運営側にアップロード（厨房に預ける）する必要があります。もしそのサーバーがハッキングされたり、運営者が悪意を持っていたら、データは流出してしまいます。
クライアントサイドなら、処理はすべてあなたのブラウザ（自分のテーブル）の中で完結します。画像データが私の手元やサーバーに送られることは一切ありません。
「誰にも見せずに、自分の手元だけで作業が完了する」。これなら、社外秘の画像でも安心して使ってもらえますよね。私が一番実現したかったのはこれです。
メリット②：爆速（店員を待たなくていい）
サーバーサイドだと、「画像をアップロード（送信）→変換（待機）→ダウンロード（受信）」という通信の往復時間が必要です。
しかしクライアントサイドなら、この通信時間がゼロです。ドラッグ＆ドロップした瞬間に、あなたのPCパワーを使って一瞬で変換が終わります。
メリット③：運営費がタダ（個人開発の味方）
これは開発者側のメリットですが、もし私が「普通のレストラン（サーバーサイド）」形式でこのツールを作っていたら、たくさんの人が使うたびに高性能なサーバー料金が発生し、とても無料では提供できなかったでしょう。
「焼く（計算する）」作業を皆さんのPCにお任せすることで、私は高額なサーバー代を払わずに済み、結果として「完全無料・無制限」でツールを公開できるのです。
3. 知っておきたい注意点（デメリットも正直に）
良いことばかりに聞こえるクライアントサイド技術ですが、正直にお伝えすると、いくつか注意点もあります。
注意点①：あなたのスマホ/ PCの性能に依存する
「持ち込み焼肉屋」では、コンロで焼くのは自分です。つまり、古いPCやスマホだと処理が遅くなる可能性があります。高性能なサーバーが一括で処理してくれるレストラン方式とは違い、デバイスの性能差が出やすいのです。
注意点②：プログラム（コンロ）のダウンロードは必要
「サーバーに送らない」といっても、最初にプログラム自体（JavaScriptやWASMファイル）はダウンロードする必要があります。つまり、完全オフラインでは使えません。ただし、一度ダウンロードすれば、その後の処理はネット接続不要です。
注意点③：悪意あるコードには無防備
もし、ダウンロードしたプログラム自体に悪意あるコードが仕込まれていたら、あなたのブラウザ内で実行されてしまいます。つまり、「信頼できる提供元かどうか」の判断が重要です。私のツールは完全にオープンソースで公開しているので、誰でもコードを確認できるようにしています。
4. 「WASM」って何？（ちょっとだけ技術の話）
私が提供しているツールでは、「WASM（WebAssembly / ウェブアセンブリ）」という技術を使っているのもあります。
これは簡単に言うと、「ブラウザ上で動く超高性能なコンロ」のようなものです。
従来、ブラウザで動くプログラムといえば「JavaScript」が主流でしたが、WASMはそれよりもはるかに高速に動作します。画像変換のような重たい処理も、まるでプロの調理器具を使うかのようにサクサク動くのです。
この技術があるからこそ、「サーバーに送らずにブラウザだけで完結」という理想が実現できました。
参考：WASMを使ったツール↓
5. まとめ：個人こそ「クライアントサイド」を攻めろ
大企業は、ユーザーのデータを収集・分析したいので「サーバーサイド（レストラン）」を選びがちです。それも正当なビジネスモデルの一つです。
一方、個人開発者は、資金がないし、何より「ユーザーのデータを預かる責任（リスク）」を負いたくないので、「クライアントサイド（持ち込み焼肉屋）」が相性抜群です。
「サーバーにデータを送らないから、とにかく安全」
「処理はあなたのPCで行うから、爆速かつ無料」
正直さ、もうみんなスマホ/ PCのスペックを持て余していますよね？
熱心にゲームをする人以外は、もう今の時代のスマホ/ PCはオーバースペックなんです。
だからこそ、クライアントサイド技術がいきるわけですね。
高性能スマホ/ PCが普及しているからこそ、誰もが自分の持ってる端末で昔はできなかった複雑な処理ができるようになったのです。
非エンジニアの私がAIと一緒にたどり着いたこの答え、少しでも伝われば嬉しいです！
参考までに。それでは！
▼ その「持ち込み焼肉屋スタイル」で作った自作ツールはこちら
コメント