Teches

TypeScriptの（ジェネリクス）が何なのか、初心者向けにわかりやすく解説します。

JWT（JSON Web Token）の仕組みを初心者向けにわかりやすく解説します。構造、使い方、セキュリティの注意点まで基礎から学べます。

技術カテゴリのサンプル記事です。

WebRTC・WebSocket・シグナリング・呼制御・Socket.ioクライアント、Socket.ioサーバー、TURN、CORN、画面共有の仕組みについて段階的に理解する。 ゴール Twilio(あるいはzoomからリアルタイム通信の仕組みを理解する) 構成 React │ Socket.io │ WebSocket（TCP） │ シグナリング │ WebRTC │ UDP │ 音声・映像 Q. 普段Web開発で使うHTTP通信と比べて、WebSocketは何が違うのか——特に「誰が」「いつ」データを送れるのか、という点に注目して調べてみてください。 Http通信の場合はライアントからリクエストを投げたらサーバーからレスポンスが入ってくると言う。1方向的な通信のやりとりを行うが、それに対してウェブソケットはリアルタイム通信、つまり双方向通信を行うことができる。 補足: HTTP: クライアントが要求 → サーバーが応答、で1往復が完結。次のやり取りをするには再度リクエストが必要（コネクションはその都度使い捨てに近い）。 WebSocket: 最初の接続確立だけHTTPのハンドシェイク（Upgrade: websocket）を使うが、一度繋がるとコネクションを張りっぱなしにする。だから「クライアントから聞かれてないのにサーバーから送る」ということができる＝双方向・非同期。 Q. では素のWebSocketがあるのに、なぜ実務では「Socket.io」というライブラリを使うのか？ WebSocketだけでは足りない・面倒な点を調べてみてください。 WebSocketはリアルタイム通信の仕組みそのものですが、 Socket.ioは、 部屋(Room)管理 自動再接続 イベント管理 接続・切断通知 ブロードキャスト（全員・特定の部屋への送信） などの機能を提供してくれるライブラリのため、 WebSocketで一から自前実装するよりも開発効率が高く、保守しやすいため利用される。 補足: Socket.ioは「WebSocketの上位互換」ではなく、フォールバック機構を持つ点も大きいです。WebSocketが使えない環境（古いプロキシ等）では自動的にlong-pollingに切り替えます。つまりSocket.io自体が独自のプロトコルで、内部で「使えるならWebSocket、ダメならHTTPポーリング」を切り替えている、という位置づけです。 Q. Socket.io（サーバー経由の通信）があるのに、なぜビデオ通話や画面共有には別途「WebRTC」という技術が必要なのか？ 音声・映像データがサーバーを経由する場合としない場合で、何が変わるか考えてみてください。 映像、音声データは通信遅延を避けるためにUDPプロトコルを利用している。サーバーを経由する場合には、TCPプロトコルによる通信となるが、TCPプロトコルの通信の場合は、信頼性の確立のための仕組みが整っている反面、音声・映像のデータはデータサイズが多すぎて、通信をする際に、データ破損などが起こりやすく、通信遅延、通信事故が発生してしまう。そのため、UWPプロトコルを利用するのに、WebRTCという通信技術を使って映像、音声データはやり取りをする必要がある 良い着眼点です。UDP/TCPの違いは正しいですが、もう一つ重要な観点が抜けています。 ✅ プロトコルの違い: 音声・映像はSRTP（UDPベース）を使う。TCPは再送・順序保証の仕組みがある分、パケットロス時に「待ち」が発生し、リアルタイム性を損なう（多少コマ落ちしても待たされるよりマシ、という発想）。 ⚠️ もう一つの本質: 仮にサーバー経由でUDPを使えたとしても、全員の映像・音声データがサーバーを通ると、参加者が増えるほどサーバーの帯域・処理コストが跳ね上がり、サーバーが1つ余分な中継点＝遅延要因にもなる。WebRTCの一番の価値は「サーバーを介さずピア同士が直接繋がる（P2P）」こと。UDPを使うのは手段の一つで、目的は「サーバーを経由しない直接通信」を実現すること。 Q. ピア同士が「直接」繋がるには、事前にお互いのIPアドレスなどの接続情報を知る必要があります。でも見知らぬ相手同士がいきなり直接通信することはできません。この「最初の情報交換」はどうやって行うのでしょうか？ （ここでSocket.ioが再登場します） 自分の回答 1 シグナリングを行う。シグナリングとは、P2P通信のやりとりをするための接続情報を交換する仕組み。 ✅ 仕組みの本質: シグナリングとは「まだP2Pで直接繋がっていない2人が、繋がるために必要な情報を、既存の別の通信路（Socket.io/WebSocketなど）経由でやり取りすること」。 📌 重要な補足: WebRTC自体は「シグナリングをどうやるか」を規定していません。Socket.ioでも、素のWebSocketでも、極端な話メールでコピペしてもいい（実用的ではないですが）。あくまで**サーバーを介した「仲介」**であって、通信方式は自由です。 📌 実際に交換するものは次の2種類です: a. SDP（Session Description Protocol）: 「どんなコーデック・解像度で通信したいか」という能力・条件の記述 b. ICE candidate: 実際の接続先候補（IP:ポートの組み合わせ）のリスト このSDPのやり取りの手順こそが「呼制御」です。 ...

Mac開発環境 これは入れておけツール Nix Docker アルフレッド？ なんかもっと違うのがあったような Mac開発で一番最初にやること 隠しファイル・フォルダを表示状態にする Finder上で常に見えるようにしたい場合は、隠しファイルの表示ショートカットを使います。 Finderで 「Macintosh HD」（またはユーザーのルートフォルダ） を開きます。 キーボードで Command (⌘) + Shift + .（ピリオド） を押します。 うっすら半透明になった隠しフォルダ（usr や opt など）が表示されるようになります。 あとは usr ➔ local ➔ var ➔ www とダブルクリックで順にたどっていけばアクセスできます。 /usr/local/などのファイルパスで open . とすると、finderが開けるが、 code . でVSCodeを開けるようにしたい。 設定手順（最初の一回だけ） VS Code を普通にアプリ一覧から起動します。 キーボードで Command (⌘) + Shift + P を押します（コマンドパレットが開きます）。 入力欄に shell command と入力します。 候補に出てくる 「Shell Command: Install ‘code’ command in PATH」 を選択してクリックします。 (日本語設定の場合：「シェル コマンド: PATH 内に ‘code’ コマンドをインストールします」) 「成功しました」という通知（またはダイアログ）が出たら設定完了です！（VS Codeは閉じてOKです） めも ...