React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。 慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！
受講生 134名
難易度 初級
受講期間 無制限
学習した受講者のレビュー
5.0
kwonkyle
全く初めてReactに触れる方にも良さそうですね。 私はNext.jsとReact.jsには慣れているので、Electronをどのように実装し、どのようにデスクトップアプリを配布できるかに集中して学習しました。 Notionに丁寧にステップごとのコードを共有してくださったおかげで、必要な知識を素早く習得することができました。ありがとうございました。
Electronの核心概念および開発環境構築
Reactを活用したデスクトップUI/UX開発
Zustandを利用した簡単で強力な状態管理
開発からビルド、デプロイまでアプリ制作の全工程を経験
ElectronとReact間の通信 (IPC) 活用
はい、可能です！それもWeb開発をしながら一度は使ったことがあるReactと一緒にです。
Pythonで自分だけのプログラムを作りたくてPyQtに触れた記憶があります。機能は完璧でしたが、無骨なデザインがいつも物足りませんでした。もし私たちが毎日のように作っていた洗練されたWebページのように、デスクトップアプリを作ることができたらどうでしょうか？
この講義では単純に理論だけを学ぶのではありません。皆さんが実生活で使える洗練された実用的なタイマーアプリを最初から最後まで一緒に作ります。ReactとTailwind CSSでモダンなUIを描き、Zustandで状態を管理し、Electronで実際にインストール可能なアプリ(.exe, .dmg)まで作ってみる全過程を学ぶことができます。
[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (With Zustand)
React + Electronプロジェクトの最終段階である「アプリ配布」プロセスのみが必要ですか？この講義のCh 10-4. Firebase Hosting及びCh 11. アプリパッケージング及び配布チャプターは購入に関係なく誰でも無料で受講できます。皆さんの大切なプロジェクトの仕上げにお役に立てることを願っています。
この講義を通じて完成するタイマーアプリです。ウェブ版で直接体験するか、インストールファイルをダウンロードして皆さんのコンピューターで直接実行してみてください。
ウェブで直接確認する（Live Demo）
自分のコンピューターにインストールしてみる（Desktop App）
下記で使用中のオペレーティングシステム（OS）に合うファイルをダウンロードしてください。
Windows:インストールファイルのダウンロード
🍎 macOS:インストールファイルのダウンロード
🐧 Linux:インストールファイルのダウンロード
この講義は、皆さんが既に知っているReactの知識を基に始まります。私たちはReactの核心であるコンポーネントベースの開発方式とHooksを活用して、タイマーアプリのすべての画面を直接作成します。
この講義の核心です。ElectronはReactで作成したWebプロジェクトをWindows(.exe)、macOS(.dmg)などで実際にインストールして実行できるデスクトップアプリケーションに変換する橋渡しの役割を果たします。複雑なネイティブ言語を使わず、Web技術だけでデスクトップアプリ開発環境を構築し、最終成果物まで作り上げる全過程を実習します。
複雑な設定が必要なReduxの代わりに、この講義ではZustandを選択しました。タイマーの「開始/停止」状態や残り時間などのグローバル状態を最小限のコードで簡潔に管理する方法を学びます。
リアルタイム投票、コメント、いいね機能などの核心的なソーシャル機能から、カカオペイ・トスペイ連携による決済システムまで！
段階別実習でコミュニティプラットフォーム構築と収益化戦略を一度に身につけましょう。
「もし私がタイタニック号に乗っていたら生き残ることができただろうか？」という興味深い質問を実際のデータで解いてみます。
PyTorchでAIモデルを作り、FastAPIでバックエンドサーバー、Next.jsでウェブインターフェースを実装し、AIとウェブ開発を網羅するフルスタックプロジェクトを完成させることができます。
A. もちろんです！しかし、Electronを学ぶとWebブラウザを超えてユーザーのデスクトップまで拡張されます。
ウェブアプリはインターネットに接続されたブラウザ内でのみ動作しますが、Electronで作成されたアプリはファイルシステムに直接アクセスしたり、オペレーティングシステムの通知機能を使用するなど、はるかに強力で統合されたユーザーエクスペリエンスを提供することができます。
何よりも最大の利点は、C#やJavaのような新しい言語を学ぶ必要なく、皆さんが最も得意なReact技術をそのまま使用してこれらすべてを実装できるという点です。
はい、十分可能です！この講義はJavascriptの基礎知識さえあれば誰でもついてこられるように構成されています。
Electron: 'Electronとは何か'から始まり、Reactプロジェクトとどのように連携し、開発環境を設定するかを一歩ずつ最初から一緒に進めていきます。事前知識が全くなくても大丈夫です。
Zustand: わざとReduxのような複雑で大規模なライブラリの代わりに、はるかに直感的でコード量の少ないZustandを選択しました。
A. その通りです！この講義の本当の目標は、単純に「タイマーアプリ」を作ることではなく、「ReactとElectronでデスクトップアプリを作る方法」を皆さんのものにすることです。
タイマーアプリは、その公式を学ぶための最も基礎的な例題に過ぎません。講義を完走すれば、以下のような様々なアイデアを直接実装できる応用力を身につけることができるでしょう。
毎朝相場を教えてくれる株価トラッカー
APIと連動する私だけの天気情報アプリ
やることリストを管理するTo-doリスト
この講義は、皆さんが想像するあらゆるデスクトップアプリを作ることができる方法をお教えするコースです。
この講義は一般的なスペックのデスクトップ環境であれば、どこでも受講できるように構成されています。
Windows: Windows 10以上
macOS: macOS 11 (Big Sur) 以上
Linux: Ubuntu 20.04 LTSなど主要ディストリビューション
講義に必要なすべてのソフトウェアは無料で使用できるので心配しないでください。
コードエディター: Visual Studio Code
ランタイム: Node.js（18.x LTS版以上推奨）およびnpm（Node.js インストール時に自動インストール）
その他: 仮想マシン(VM)が必要になる場合があります。
ウェブ開発用のプログラムがやや重いため、以下のスペックを推奨します。ただし、最小スペックでも実習は可能です。
CPU: Intel i3 / AMD Ryzen 3以上
メモリ(RAM): 8GB以上（最小4GB）
ディスク: 開発ツールおよびプロジェクトインストール用の10GB以上の空き容量（SSD推奨）
グラフィックカード: 内蔵グラフィックでも十分です。
学習のすべてのプロセスが一つの空間で体系的に行えるよう、すべての資料をNotionページ一つに統合して提供します。
章別全体ソースコード
各章の実習を終えた後、完成した全体コードを提供します。自分のコードと比較して見落とした部分を確認したり、行き詰まった時の参考用として活用してください。
実習用リソース及びアセット
講義の実習に必要なアイコン、画像ファイルなどを直接探す必要なく、すぐにダウンロードして使用できるよう提供します。
オールインワン管理：別途ファイルをダウンロードして管理する必要がなく、たった一つのNotionリンクをブックマークしておくだけで、すべての資料にアクセスできるため非常に便利です。
継続的なアップデート：講義内容に変更事項や追加資料が生じた場合、Notionページに即座に反映し、常に最新情報を維持します。
学習対象は
誰でしょう？
Reactには慣れているものの、Webブラウザの枠を超え、自分だけのデスクトップアプリを作ってみたい方
開発からデプロイまで、「完成された」自分だけのアプリを制作し、差別化されたポートフォリオを構築したい方
Reduxの複雑さではなく、Zustandのような軽量でモダンな状態管理ライブラリを実践プロジェクトを通じて経験してみたい方
前提知識、
必要でしょうか？
基礎的な JavaScript(ES6+) 文法
HTML, CSSに対する基本的な理解
キャリア認証
2,469
受講生
107
受講レビュー
71
回答
4.5
講座評価
14
講座
こんにちは！西江大学のコンピュータ工学科を卒業し、現在大学院への進学を準備している学生です。
高校時代、偶然フルスタックWeb開発とPythonを活用した自動売買を始めたことで、プログラミングにのめり込むようになりました。
その後、様々なプロジェクトやプログラミングの家庭教師活動を経験し、実力とノウハウを共有してきました。これらの経験を通じて、プログラミングに初めて触れる方々にも「こんなに簡単なんだ！」と感じていただけるような講義を作れるよう努めています。
実用的な例題と親しみやすい説明で、皆さんの学習をサポートしたいと思っています。ありがとうございます。
全体
38件 ∙ (8時間 9分)
講座資料:
全体
8件
4.4
8件の受講レビュー
受講レビュー 5
∙
平均評価 5.0
5
全く初めてReactに触れる方にも良さそうですね。 私はNext.jsとReact.jsには慣れているので、Electronをどのように実装し、どのようにデスクトップアプリを配布できるかに集中して学習しました。 Notionに丁寧にステップごとのコードを共有してくださったおかげで、必要な知識を素早く習得することができました。ありがとうございました。
kwonkyleさん、こんにちは。星5つの評価と心のこもったレビュー、本当にありがとうございます。 すでにElectronとReactを使いこなされている中で、デスクトップアプリの実装と配布の流れに集中して学習されたとのこと、本講座の意図と合致しており大変嬉しく思います。特に、Notionにまとめられたステップ別のコードと解説が、必要な知識を迅速に習得するのに役立ったというお言葉は、講座を準備する上で最も重視した部分ですので、大きなやりがいを感じております。 今後も実務ですぐに活用できるテーマや、全体の流れを理解できるような講座でお応えできるよう、努力を続けてまいります。貴重なレビューをいただき、改めて感謝申し上げます。
受講レビュー 4
∙
平均評価 5.0
受講レビュー 18
∙
平均評価 5.0
5
私の講義に初めての星評価を残していただき、ありがとうございます！星5つと共に最後まで講義を聞いていただいたおかげで、より大きな力になります。今後も良い講義でお応えいたします。
受講レビュー 2
∙
平均評価 5.0
受講レビュー 8
∙
平均評価 4.8
5
貴重なレビューありがとうございます！ 講義の内容が学習の助けになったとのことで、大変嬉しく思います 😊 これからも継続的に改善してまいります。
知識共有者の他の講座はこちら
同じ分野の他の講座を見てみましょう！
![[無料] Notion MCP: 入門から活用まで講義サムネイル](https://cdn.inflearn.com/public/files/courses/338906/cover/01k4nkjw13vgrmrs0esxnc60w9?w=420)
![[Electron #2] React + Electron オフライン顔認証入退室・出席管理システム (With DeepFace)講義サムネイル](https://cdn.inflearn.com/public/files/courses/339677/cover/ai/0/3f0aeb99-6e04-4d30-ba5b-841a2c0fea14.png?w=420)
![[Level 3]初心者を超えた専門家として：QtとPythonを介した本番アプリケーションマスタークラス講義サムネイル](https://cdn.inflearn.com/public/courses/335355/cover/df1bb1b2-848a-430b-9eb3-087e418d0ffb/335355.png?w=420)
![MAUI [Cross-Platform Applications & C#]講義サムネイル](https://cdn.inflearn.com/public/courses/332442/cover/89ee60dc-f139-4b63-ae28-abd8a6036cb8/332442-eng.png?w=420)
![[Level 1] Qtを使ったPythonプログラミング：入門編講義サムネイル](https://cdn.inflearn.com/public/courses/335089/cover/838ed04b-4bc0-4f9f-bd00-91361fcb6238/335089.png?w=420)
![[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)講義サムネイル](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?w=420)