カテゴリ：フロントエンド開発

【JavaScript 応用講座】：[WebRTC/P2P] チャット＆ファイル転送ができる双方向アプリを実装

【JavaScript 応用講座】：[WebRTC/P2P] チャット＆ファイル転送ができる双方向アプリを実装

2025-07-22 | lain

WebRTCとsimple-peerを使ってP2P通信を実現！signal交換の自動化に成功し、チャットとZIPファイルの送受信も完全動作。Node.jsによる軽量なシグナリングサーバ構成と接続の流れを実例付きで解説。

カテゴリ： JavaScript

タグ： #JavaScript#WebRTC#simple-peer#Node.js#WebSocket#P2P通信#ファイル共有#フロントエンド開発#ネットワークプログラミング#個人開発ログ

【JavaScript 応用講座】：P2P通信の基盤！Node.js製シグナリングサーバをKoyebで構築

【JavaScript 応用講座】：P2P通信の基盤！Node.js製シグナリングサーバをKoyebで構築

2025-07-22 | lain

Node.js と WebSocket を使ってシンプルなシグナリングサーバを構築し、無料のクラウドサービス Koyeb にデプロイする手順をまとめました。GitHub連携から起動確認、実際の接続テストまで、P2P通信の基盤となるシステムを最短で構築できます。

カテゴリ： JavaScript

タグ： #JavaScript#学習記事#P2P#WebRTC#P2P通信#simple-peer#ファイル共有#フロントエンド開発#分散アプリ#Webアプリ#シグナリングサーバ#Node.js#Koyeb#WebSocket#GitHub#無料ホスティング

【JavaScript 応用講座】：[P2P通信入門] simple-peerでシグナリングと接続を理解する

【JavaScript 応用講座】：[P2P通信入門] simple-peerでシグナリングと接続を理解する

2025-07-20 | lain

Webアプリ上でのP2P通信にチャレンジ！「WebRTCは難しそう…」と思っていたけれど、simple-peerを使えば意外とシンプルに実装できました。この記事では、実際の接続手順、initiator問題、シグナリングの中身までを丁寧に解説し、将来的な分散アプリ構想まで視野に入れたP2Pの可能性を探ります。

カテゴリ： JavaScript

タグ： #JavaScript#学習記事#P2P#WebRTC#P2P通信#simple-peer#JavaScript#フロントエンド開発#分散アプリ#IndexedDB#リアルタイム通信#Webアプリ#シグナリング

[DevTools] 入門講座 #03：Sourcesパネル完全ガイド！ブレークポイント、ステップ実行、リアルタイム編集

[DevTools] 入門講座 #03：Sourcesパネル完全ガイド！ブレークポイント、ステップ実行、リアルタイム編集

2025-07-15 | lain

本記事では、Chrome DevTools の 「Layers」ビューを使った立体レイヤー解析で、問題の真相に迫ります。見えない“背後霊”のようなレイヤーと、どう戦い、どう解決したのか──その記録です。

カテゴリ： DevTools

タグ： #Sourcesパネル#JavaScriptデバッグ#フロントエンド開発#Chrome#VSCodeとの違い