강의

멘토링

커뮤니티

Programming

/

Front-end

誰よりも早く作ってみるElectron Todo List With TypeScript

誰よりも早く試してみるElectron Todo List With TypeScript Reactベースのデスクトップ動作サービスを作ることができるElectronをTypeScriptで開発してみましょう!

難易度 入門

受講期間 無制限

  • Neo
React
React
TypeScript
TypeScript
Electron
Electron
Portfolio
Portfolio
React
React
TypeScript
TypeScript
Electron
Electron
Portfolio
Portfolio

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

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

4.9

5.0

HelloWorld

100% 受講後に作成

真似しやすくて良いです。入門用として考えると良いです

5.0

DKN

100% 受講後に作成

深い内容は期待していませんでしたが、やってみて入門用にはぴったりのようですね。良いです。

5.0

wonder

100% 受講後に作成

いいですね

受講後に得られること

  • TodoListを作りながらElectronをかじってみる

  • Reactベースのデスクトップアプリがどのように作られるかを調べてみる

誰よりも早く試すElectron Todo List With TypeScript

React、TypeScript、Electron、ポートフォリオ

ウェブ技術で作るデスクトップアプリケーション!
React + TypeScript + ElectronでTodoアプリを作ってみましょう。

🎯 講義紹介

この講義はウェブ開発者でも簡単にデスクトップアプリケーションを作れるように
ElectronとTypeScriptを最初から最後まで実習中心で学ぶ講義です。

一度のコードでWindows、macOS、Linuxで動作するアプリを作ってみて、
ReactとTypeScript(Electron移植)で構成されたTodoリストアプリケーションを直接完成させます。

🧩 このような内容を学びます

セクション主要学習内容

1. TypeScript基礎 型システム、関数とインターフェース、クラス、ジェネリックなど核心文法整理

2. Electronを理解するElectronの構造、メリット・デメリット、Node.js & Chromiumベースの理解

3. 開発環境セットアップ VSCode、Node.js、nvmのインストールからReactプロジェクトの初期セットアップまで

4. Electronとの連携React + Electron環境の構築とnpm run devでの同時実行

5. Todoアプリの作成 TypeScriptとReactでTodo CRUD機能の実装

6. 仕上げ & ビルド完成したアプリを実行ファイルとしてパッケージングする方法の紹介

🧠 学習目標

  • TypeScript文法を正確に理解し、プロジェクトに適用できる。

  • Electronの動作構造を理解し、ReactアプリとElectronを連携できる。

  • ✅ 一つのコードでクロスプラットフォームデスクトップアプリを開発できる。

  • React + TypeScript + Electronの統合開発環境を直接構築できる。

📚 開発過程および注意事項

React + TypeScriptでToDoリストWebを開発し、Electronでポーティングしてデスクトップアプリを作成します。
講義はReact + TypeScript + Electronを使ってみることに焦点を当てています。

上級講義は今後提供予定ですので、基礎講義であることを確認してから受講してください!

こんな方におすすめです

ウェブ技術でデスクトップアプリを作ってみたい開発者

React + TypeScript
Electron

環境を一度に身につけたい方

TypeScript文法を
実戦プロジェクトで練習したい方

受講前の参考事項

実習環境

  • 講義はMacOS基準で説明します。Windowsマシンでも付いてこられます。

  • 講義ではVSCodeを使用します。

  • 講義はElectron + TypeScriptの使用を目的としています!

学習資料

  • Notionリンクで提供いたします!

前提知識および注意事項

  • 基礎コンピュータ活用能力

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Reactを学んでより深く入っていきたい方

  • デスクトップサービスを開発する方法を知りたい方

  • Electronについて気になった方

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

  • TypeScript

  • React

こんにちは
です。

2,265

受講生

255

受講レビュー

39

回答

4.7

講座評価

29

講座

こんにちは!Inflearn(インフラン)で講師を務めているNeoです。

普段なかなか接することのできない開発技術を、多くの方々に触れていただくことが私の目標です。

ですので、私は単なる理論の羅列よりも実務中心のカリキュラムを構成し、トラブルなく学べる実習中心の講義を提供したいと考えています。

初心者の方でも無理なくついていけるよう、最大限分かりやすく親切なアプローチで内容を構成しており、特に知識へのハードルを下げることに注力しています。
時には、志を同じくする方々と共に講義制作を行うこともあります!

コラボレーションやその他ビジネスに関するお問い合わせは、yeseong0412@gmail.comまでお願いいたします!

カリキュラム

全体

8件 ∙ (50分)

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

受講レビュー

全体

8件

4.9

8件の受講レビュー

  • dkssudgktpdy님의 프로필 이미지
    dkssudgktpdy

    受講レビュー 20

    平均評価 5.0

    5

    100% 受講後に作成

    真似しやすくて良いです。入門用として考えると良いです

    • human2642622님의 프로필 이미지
      human2642622

      受講レビュー 72

      平均評価 5.0

      5

      38% 受講後に作成

      • yeseong0412
        知識共有者

        ありがとうございます〜!!

    • edwards님의 프로필 이미지
      edwards

      受講レビュー 17

      平均評価 5.0

      5

      38% 受講後に作成

      • yeseong0412
        知識共有者

        講義を聞いてくださってありがとうございます〜!

    • fain9301님의 프로필 이미지
      fain9301

      受講レビュー 97

      平均評価 4.8

      4

      75% 受講後に作成

      良い講義をありがとうございます。

      • loward님의 프로필 이미지
        loward

        受講レビュー 21

        平均評価 5.0

        5

        100% 受講後に作成

        深い内容は期待していませんでしたが、やってみて入門用にはぴったりのようですね。良いです。

        ¥1,222

        Neoの他の講座

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

        似ている講座

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