강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Desktop Application

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

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

72名 が受講中です。

  • dakgangjung123
실습 중심
토이프로젝트
처음하는배포
electron
cross-platform
React
Electron
GUI
zustand

こんなことが学べます

  • 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に対する基本的な理解

こんにちは
です。

460

受講生

25

受講レビュー

46

回答

5.0

講座評価

6

講座

안녕하세요! 서강대학교 컴공과를 졸업하고 현재 대학원 진학을 준비 중인 학생입니다.

고등학교 때 우연히 풀스택 웹 개발과 파이썬을 활용한 자동 매매를 시작하면서 프로그래밍에 빠지게 되었습니다.

그 후 다양한 프로젝트와 프로그래밍 과외활동을 경험하며 실력과 노하우를 공유했습니다. 이러한 경험을 통해 프로그래밍을 처음 접하는 분들에게도 "이렇게 쉬울 수 있구나!"라는 느낌을 줄 수 있는 강의를 만들고자 노력하고 있습니다.

 

실용적인 예제와 친근한 설명으로 여러분의 학습을 돕고 싶습니다. 감사합니다.

 

GitHub 저장소 바로가기 (클릭!)

カリキュラム

全体

38件 ∙ (8時間 9分)

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

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

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

¥4,016

dakgangjung123の他の講座

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

似ている講座

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