강의

멘토링

커뮤니티

Programming

/

Desktop Application

# [Electron #1] ElectronとReactで作るタイマーアプリ(With Zustand)

React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム(Windows、macOS、Linux)へデプロイまで行う実践講義です。 慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます!

難易度 初級

受講期間 無制限

  • dakgangjung123
React
React
Electron
Electron
GUI
GUI
cross-platform
cross-platform
zustand
zustand
React
React
Electron
Electron
GUI
GUI
cross-platform
cross-platform
zustand
zustand

学習した受講者のレビュー

学習した受講者のレビュー

5.0

5.0

kwonkyle

100% 受講後に作成

全く初めてReactに触れる方にも良さそうですね。 私はNext.jsとReact.jsには慣れているので、Electronをどのように実装し、どのようにデスクトップアプリを配布できるかに集中して学習しました。 Notionに丁寧にステップごとのコードを共有してくださったおかげで、必要な知識を素早く習得することができました。ありがとうございました。

受講後に得られること

  • Electronの核心概念および開発環境構築

  • Reactを活用したデスクトップUI/UX開発

  • Zustandを利用した簡単で強力な状態管理

  • 開発からビルド、デプロイまでアプリ制作の全工程を経験

  • ElectronとReact間の通信 (IPC) 活用

JavaScriptでGUI開発は可能でしょうか?

はい、可能です!それも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)に合うファイルをダウンロードしてください。

React: 慣れ親しんで完成する美しいUI

この講義は、皆さんが既に知っているReactの知識を基に始まります。私たちはReactの核心であるコンポーネントベースの開発方式とHooksを活用して、タイマーアプリのすべての画面を直接作成します。

Electron: 私のコードを本当の「インストール型GUI」に

この講義の核心です。ElectronはReactで作成したWebプロジェクトをWindows(.exe)、macOS(.dmg)などで実際にインストールして実行できるデスクトップアプリケーションに変換する橋渡しの役割を果たします。複雑なネイティブ言語を使わず、Web技術だけでデスクトップアプリ開発環境を構築し、最終成果物まで作り上げる全過程を実習します。

Zustand: 最も実用的で簡便なグローバル状態管理

複雑な設定が必要なReduxの代わりに、この講義ではZustandを選択しました。タイマーの「開始/停止」状態や残り時間などのグローバル状態を最小限のコードで簡潔に管理する方法を学びます。

React & FastAPIで作る投票コミュニティプラットフォーム:決済システムで収益化まで!

リアルタイム投票、コメント、いいね機能などの核心的なソーシャル機能から、カカオペイ・トスペイ連携による決済システムまで!
段階別実習でコミュニティプラットフォーム構築と収益化戦略を一度に身につけましょう。

もし私がタイタニックに乗っていたら?!PyTorch & Next.jsで生存確率予測AIウェブサービスを作る

「もし私がタイタニック号に乗っていたら生き残ることができただろうか?」という興味深い質問を実際のデータで解いてみます。
PyTorchでAIモデルを作り、FastAPIでバックエンドサーバー、Next.jsでウェブインターフェースを実装し、AIとウェブ開発を網羅するフルスタックプロジェクトを完成させることができます。

ご質問はありますか?

Q1. ウェブ開発者ですが、わざわざElectronまで学ぶ必要があるでしょうか?ただウェブだけ作っても良いのではないでしょうか?

A. もちろんです!しかし、Electronを学ぶとWebブラウザを超えてユーザーのデスクトップまで拡張されます。

ウェブアプリはインターネットに接続されたブラウザ内でのみ動作しますが、Electronで作成されたアプリはファイルシステムに直接アクセスしたり、オペレーティングシステムの通知機能を使用するなど、はるかに強力で統合されたユーザーエクスペリエンスを提供することができます。

何よりも最大の利点は、C#やJavaのような新しい言語を学ぶ必要なく、皆さんが最も得意なReact技術をそのまま使用してこれらすべてを実装できるという点です。

Q2. ElectronやZustandは初めてですが、React初心者でもついていけるレベルでしょうか?

はい、十分可能です!この講義はJavascriptの基礎知識さえあれば誰でもついてこられるように構成されています。

  • Electron: 'Electronとは何か'から始まり、Reactプロジェクトとどのように連携し、開発環境を設定するかを一歩ずつ最初から一緒に進めていきます。事前知識が全くなくても大丈夫です。

  • Zustand: わざとReduxのような複雑で大規模なライブラリの代わりに、はるかに直感的でコード量の少ないZustandを選択しました。


Q3. この講義を受講した後、タイマーアプリ以外の他のプログラムも作れるようになりますか?

A. その通りです!この講義の本当の目標は、単純に「タイマーアプリ」を作ることではなく、「ReactとElectronでデスクトップアプリを作る方法」を皆さんのものにすることです。

タイマーアプリは、その公式を学ぶための最も基礎的な例題に過ぎません。講義を完走すれば、以下のような様々なアイデアを直接実装できる応用力を身につけることができるでしょう。

  • 毎朝相場を教えてくれる株価トラッカー

  • APIと連動する私だけの天気情報アプリ

  • やることリストを管理するTo-doリスト

この講義は、皆さんが想像するあらゆるデスクトップアプリを作ることができる方法をお教えするコースです。

受講前の参考事項

実習環境

この講義は一般的なスペックのデスクトップ環境であれば、どこでも受講できるように構成されています。

オペレーティングシステム(OS)

  • 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)が必要になる場合があります。

推奨PC仕様

ウェブ開発用のプログラムがやや重いため、以下のスペックを推奨します。ただし、最小スペックでも実習は可能です。

  • CPU: Intel i3 / AMD Ryzen 3以上

  • メモリ(RAM): 8GB以上(最小4GB)

  • ディスク: 開発ツールおよびプロジェクトインストール用の10GB以上の空き容量(SSD推奨)

  • グラフィックカード: 内蔵グラフィックでも十分です。

学習資料

学習のすべてのプロセスが一つの空間で体系的に行えるよう、すべての資料をNotionページ一つに統合して提供します。

Notionページで提供されるもの

  • 章別全体ソースコード
    各章の実習を終えた後、完成した全体コードを提供します。自分のコードと比較して見落とした部分を確認したり、行き詰まった時の参考用として活用してください。


  • 実習用リソース及びアセット
    講義の実習に必要なアイコン、画像ファイルなどを直接探す必要なく、すぐにダウンロードして使用できるよう提供します。


学習資料の特徴

  • オールインワン管理:別途ファイルをダウンロードして管理する必要がなく、たった一つのNotionリンクをブックマークしておくだけで、すべての資料にアクセスできるため非常に便利です。

  • 継続的なアップデート:講義内容に変更事項や追加資料が生じた場合、Notionページに即座に反映し、常に最新情報を維持します。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Reactには慣れているものの、Webブラウザの枠を超え、自分だけのデスクトップアプリを作ってみたい方

  • 開発からデプロイまで、「完成された」自分だけのアプリを制作し、差別化されたポートフォリオを構築したい方

  • Reduxの複雑さではなく、Zustandのような軽量でモダンな状態管理ライブラリを実践プロジェクトを通じて経験してみたい方

前提知識、
必要でしょうか?

  • 基礎的な JavaScript(ES6+) 文法

  • HTML, CSSに対する基本的な理解

こんにちは
です。

913

受講生

46

受講レビュー

58

回答

4.6

講座評価

7

講座

こんにちは!西江大学のコンピュータ工学科を卒業し、現在大学院への進学を準備している学生です。

高校時代、偶然フルスタックWeb開発とPythonを活用した自動売買を始めたことで、プログラミングにのめり込むようになりました。

その後、様々なプロジェクトやプログラミングの家庭教師活動を経験し、実力とノウハウを共有してきました。これらの経験を通じて、プログラミングに初めて触れる方々にも「こんなに簡単なんだ!」と感じていただけるような講義を作れるよう努めています。

実用的な例題と親しみやすい説明で、皆さんの学習をサポートしたいと思っています。ありがとうございます。

 

GitHubリポジトリへ移動(クリック!)

カリキュラム

全体

38件 ∙ (8時間 9分)

講座資料(こうぎしりょう):

講座掲載日: 
最終更新日: 

受講レビュー

全体

2件

5.0

2件の受講レビュー

  • kylekwondev님의 프로필 이미지
    kylekwondev

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

    全く初めてReactに触れる方にも良さそうですね。 私はNext.jsとReact.jsには慣れているので、Electronをどのように実装し、どのようにデスクトップアプリを配布できるかに集中して学習しました。 Notionに丁寧にステップごとのコードを共有してくださったおかげで、必要な知識を素早く習得することができました。ありがとうございました。

    • dakgangjung123
      知識共有者

      kwonkyleさん、こんにちは。星5つの評価と心のこもったレビュー、本当にありがとうございます。 すでにElectronとReactを使いこなされている中で、デスクトップアプリの実装と配布の流れに集中して学習されたとのこと、本講座の意図と合致しており大変嬉しく思います。特に、Notionにまとめられたステップ別のコードと解説が、必要な知識を迅速に習得するのに役立ったというお言葉は、講座を準備する上で最も重視した部分ですので、大きなやりがいを感じております。 今後も実務ですぐに活用できるテーマや、全体の流れを理解できるような講座でお応えできるよう、努力を続けてまいります。貴重なレビューをいただき、改めて感謝申し上げます。

  • dkfkqlxm1580님의 프로필 이미지
    dkfkqlxm1580

    受講レビュー 15

    平均評価 5.0

    5

    100% 受講後に作成

    • dakgangjung123
      知識共有者

      私の講義に初めての星評価を残していただき、ありがとうございます!星5つと共に最後まで講義を聞いていただいたおかげで、より大きな力になります。今後も良い講義でお応えいたします。

¥4,190

dakgangjung123の他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!