やってみたらなんとかなる

プログラミングをする上で調べたこととかやったこととか

[React] WebRTC x React でP2Pビデオ電話アプリを作ってみる #2 ~準備編~

# 概要 第2回は準備編です。環境構築などを進めます。

今回やること

  • node.jsのインストール
  • 作業ディレクトリの作成
  • Reactのインストール

node.jsのインストール

Reactを使用するのにはnode.jsが必要です。このインストールはOSごとにやり方が違うので公式とかここ(Windows)とかここ(Mac)とかを参考にしてみてください。参考までに僕がインストールした手順を残しておきます。(僕のPCのOSはmacOS Montereyです。)

①nodebrewのインストール

brew install nodebrew

②node.js(最新版)のインストール

nodebrew install-binary latest

これでOKのはずです。

作業ディレクトリの作成

適当な場所に作業ディレクトリを作ります。 僕は、Documentsディレクトリ内にreact-webrtcというディレクトリを作成しました。

npm init -y

でpackage.jsonを作成しておきましょう。

Reactのインストール

Reactをインストールします。(Reactをインストールって言い方あっているのかとても不安です。教えてください詳しい方...)

npx create-react-app frontend

この後、

cd frontend

でfrontendディレクトリに移動した後

npm start

その後、ブラウザでhttp://localhost:3000にアクセスして のような画面が表示されればOKです。

まとめ

ひとまずこれで準備完了です。次回から製作に入る予定です。

次のページ→ [React] WebRTC x React でP2Pビデオ電話アプリを作ってみる #3 ~映像・音声取得編~ - やってみたらなんとかなる