Node.js×React_デスクトップアプリ開発_Udemy講座案

UDEMY講座設計 Node.js × React で作る デスクトップアプリ開発入門 文系出身・新人エンジニアのための坂道型学習コース 対象：文系出身 新人エンジニア 形式：Udemy動画講座（知識 ×ハンズオン） 設計：坂道型学習フレームワーク

WHY なぜ「Node.js × React デスクトップアプリ」なのか 文系新人が最初に挫折するのは技術の難しさではなく、「Webの知識が形になって見えない」ことにある。 1 2 3 現場で使える構成に触れられ 自分のアプリが手元で動く Web知識がそのまま活きる ブラウザ越しでなく、 OS上で動く「自分だ HTML/CSS/JSの知識をそのまま転用で Node.js＋React＋Electronは実務の技術 けのアプリ」が完成する体験がモチベー き、学習の「積み上がり感」を実感しや スタックとほぼ同じで、学びが即戦力に ションになる。 すい。 直結する。 る 2

WHAT 完成イメージ：受講後にできるようになること My Desktop App — Electron ホーム データ ✓ ReactでUIを部品化し、状態管理を実装できる React製 UIコンポーネント ✓ Node.jsでローカルAPI/ファイルI/Oを組み込める 設定 ✓ ✓ ElectronでOS常駐のデスクトップ化ができる Windows/Mac向けにアプリを配布パッケージ化できる 3

HOW 全体像： 3つの技術がどう組み合わさるか No El Re Node.js Electron React + + JS実行環境 デスクトップ化の器 UIライブラリ （バックエンド処理） （Main / Renderer） （画面・部品） Electronの中で Node.jsとReactが同時に動くことで、 Web技術のまま OSアプリが作れる 4

ROADMAP 学習ロードマップ：坂道フレームワーク設計 山場（最も苦しい壁）はコース全体で1つだけに絞り、乗り越えられる負荷で段階的に積み上げる Electron連携 （山場） UI実装 React基礎 配布・完成 Node.js基礎 環境構築 1 2 3 4 5 6 5

AUDIENCE 対象者と前提知識 こんな方におすすめ 受講前に準備しておくこと • 文系出身で、エンジニア 1〜2年目 • PCの基本操作（フォルダ・ターミナル起動） • HTML/CSS/JavaScriptの基礎を学習済み • テキストエディタ（ VS Code）の利用経験 • 「作ったものが動く実感」がまだ薄い方 • React/Node.jsは未経験でも受講可能 6

PART 1 · NODE.JS Node.jsの基礎（デスクトップアプリの裏側） Why • • What ブラウザの外でJavaScriptを動かせ • npmによるパッケージ管理 ることを理解する • ファイルシステム操作（fs） ファイル操作・API通信など「サー • 非同期処理（Promise / バー的な処理」の必要性を知る async-await） How • ハンズオン：ローカルファイルを読 み書きするスクリプトを作成 • 演習：簡易APIサーバーをExpress で起動 7

PART 2 · REACT Reactの基礎（画面をつくる部品化の考え方） Why • 画面を「部品（コンポーネント）」とし て考える発想を身につける • HTML手書きの限界と、状態管理 の必要性を理解する What • コンポーネント / Props / State • イベントハンドリング • フック（useState, useEffect） How • ハンズオン：ボタン付きカウンター を実装 • 演習：入力フォームと一覧表示コン ポーネントを作成 8

PART 3 · ELECTRON ／ 山場 Electronの仕組み： Main / Renderer / IPC Main Process • Node.jsが動く土台 • OSの機能（ファイル・メニュー・通知）にアクセ ス • アプリのウィンドウを生成する Renderer Process IPC （プロセス間通信） • Reactが動く画面 • HTML/CSS/JSでUIを描画 • MainにはIPCを通してだけアクセス可能 ここが最初の壁：「なぜ2つのプロセスに分かれているのか」を図で腹落ちさせてから実装に入る 9

PART 4 · HANDS-ON 開発環境構築ハンズオン（つまずき防止ステップ） 1 Node.jsのインストール 公式サイトからLTS版を導入し、ターミナルでバージョン確認 2 プロジェクト作成 create-react-app / Vite でReact雛形を作成 3 Electron導入 electron / electron-builder をnpm installで追加 4 起動スクリプト設定 package.jsonにmainとscriptsを追記して起動確認 5 動作確認 npm run electron:dev でウィンドウが立ち上がることを確認 10

PART 5 · UI設計 コンポーネント設計：画面を部品に分解する 設計の考え方 App • 1画面＝1つの大きな部品ではなく、役割ごとに小さく分割する • データ（State）は親が持ち、子には Props で渡す • 見た目（表示）とロジック（処理）を分けて考える習慣をつける Sidebar Header ListView 11

PART 6 · PACKAGING パッケージング・配布：完成させて手渡す W m L Windows macOS Linux .exe .dmg .AppImage electron-builder で3ステップ配布 1 package.jsonに build 設定を記述 2 npm run dist でビルド実行 3 生成物を配布・共有 12

SUPPORT つまずきポイントと声かけフレーズ例 つまずき 「Main/Rendererの違いが分からない」 つまずき 「エラーの原因が分からず止まる」 声かけ例 「ブラウザのタブ（画面）と、パソコン本体（裏方）が別の部屋にいるイ メージです」 声かけ例 「エラーメッセージは敵ではなく地図。まず赤い行の 1行目だけ読んで みましょう」 つまずき 声かけ例 「Reactの状態管理が腑に落ちない」 「Stateは付箋、 Propsはその付箋を渡すこと、と考えると整理できます」 13

SUMMARY まとめ：受講後に手にしているもの ✓ Node.js × React × Electron を組み合わせて動かせる知識 ✓ 「動くものを完成させた」という自信 ✓ 実務のWeb開発技術スタックにそのまま接続できる土台 次のステップ 応用編：クラウド連携・自動アップデート機能の追加へ 14