【実務レベルの開発を学びたい方へ】React + Typescriptで超本格的なNotionクローンを作ろう from Udemy

「ReactやTypeScriptの基礎は理解したけど、実際に自分でWebアプリを作ったことがない…」

「もっと実践的なスキルを身につけて、早くエンジニアとして働けるレベルになりたい！」

そんなあなたのために、ログイン/ユーザー登録、入れ子でのメモ作成、WYSIWYGエディタ、リアルタイム通信など、本格的な機能を持ったNotionクローンを作成しながら実務レベルのReactアプリ開発について学べる講座です。

【この講座で学べること】

Notionライクな高機能Webアプリ開発:
- 基本的なCRUD操作（作成、読み取り、更新、削除）
- ノートの階層構造（親子関係）の実装
- ノートの変更のリアルタイム反映
- 検索機能
- 認証機能（ログイン、ユーザー登録）
- Vercelへのデプロイ
モダンなReact開発
TypeScript による型安全なコーディングと、保守性の高いアプリケーション設計
バックエンド（Firebase）との連携
インフラ（Vercel）を利用した、Webアプリケーションの公開

【本コースの対象者】

Reactエンジニアとしての転職/就職を本気で目指している方
React + Typescriptを使って自分でアプリを作ってみたい方
Reactの基礎は一定理解しており、実務レベルのアプリ構築について学びたい方
Reactの理解をもっと深めたい方

【受講する際の注意点】

HTML/CSS/Typescriptの基礎については解説していません
Reactの基本（Progateの内容等）、および別で提供している講座「就職/転職で有利なポートフォリオに！基礎〜応用4つのReactアプリで実践的な開発を学ぼう」の内容は理解している前提となっております

What's inside

Learning objectives

Reactとtypescriptを使い、本格的なnotionのクローンアプリの作成方法を学べる
転職/就職時に重要なポートフォリオに入れる自作アプリケーションを作る基礎ができる
Supabaseを利用し、フロントエンドの知識だけでも本格的なwebアプリを作れる
Jotaiを使い、グローバルステートを使ってアプリの状態を効率的に管理できる
リアルタイム通信の機能を作れる

実務に近いより実践的なreactを使った開発が学べる
Reactでのtailwind cssのセットアップがわかる
効率よくweb開発をするために便利な環境、ツールを学べる
ノート検索する機能の実装方法がわかる

Reactとtypescriptを使い、本格的なnotionのクローンアプリの作成方法を学べる
転職/就職時に重要なポートフォリオに入れる自作アプリケーションを作る基礎ができる
Supabaseを利用し、フロントエンドの知識だけでも本格的なwebアプリを作れる
Jotaiを使い、グローバルステートを使ってアプリの状態を効率的に管理できる
リアルタイム通信の機能を作れる
実務に近いより実践的なreactを使った開発が学べる
Reactでのtailwind cssのセットアップがわかる
効率よくweb開発をするために便利な環境、ツールを学べる
ノート検索する機能の実装方法がわかる

Syllabus

Supabaseをセットアップしよう

はじめに

本講座で学ぶこと

アプリのデモ

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Covers CRUD operations, hierarchical note structures, real-time updates, search, and authentication, which are essential for building modern web applications

Uses TypeScript for type-safe coding and maintainable application design, which are crucial for professional software development

Employs Firebase for backend integration and Vercel for web application deployment, which are standard practices in modern web development workflows

Assumes prior knowledge of HTML/CSS/TypeScript basics and React fundamentals, so learners should ensure they have a solid foundation before starting

Involves setting up and using Tailwind CSS, which is a popular utility-first CSS framework for rapidly styling web applications

Teaches state management using Jotai, which is useful for efficiently managing application state in React projects

Reviews summary

実践的react+ts notionクローン開発

学生によると、実務レベルのReact + TypeScript開発を学ぶ上で、Notionクローンという具体的なプロジェクトは非常に実践的で、ポートフォリオ作成に役立つと多くの受講者が評価しています。Supabase、jotai、Tailwind CSSといったモダンな技術スタックを実際に手を動かして習得できる点も肯定的な意見が多いです。ただし、ペースが速いと感じる声もあり、ReactやTypeScriptの基礎知識は必須。前提知識の重要性や、難易度が高いと感じる人もいるため、挑戦する価値はあるが注意が必要です。

Supabaseやjotaiなど最新技術を学べる。

"Supabaseやjotai、Tailwind CSSなど、実務でよく使われるモダンな技術を一度に学べて大変勉強になりました。"

"特にjotaiを使った状態管理は、今後の開発に活かせる良い知識を得られました。"

"Tailwindの導入方法や使い方も学べて、フロントエンド開発の幅が広がりました。"

"最新の技術選定でアプリを構築する経験は、転職活動においてもアピールポイントになると思います。"

Notionクローン開発はポートフォリオに最適。

"Notionクローンを題材にしているのがとても実践的で、ポートフォリオに加えるのに最適な形だと感じました。"

"単なる基礎的な知識の羅列ではなく、認証機能やリアルタイム通信など、実際のWebアプリに必要な機能の実装が学べました。"

"この講座を通して、今まで断片的に学んでいた知識が繋がり、実務に近い形で手を動かすことができました。"

"モダンな構成で本格的なアプリを0から作り上げる経験は、非常に価値がありました。"

ライブラリのバージョン違いに注意。

"受講時期によっては、使用されているライブラリのバージョンが古く、そのままでは動かない部分がありました。"

"バージョンアップによる変更点に対応するために、自分で調べたり試行錯誤したりする必要がありました。"

"エラーが出たときに、講師の方のコードと見比べながら修正するのは少し手間がかかりました。"

"常に最新の環境に対応したコードが提供されると、よりスムーズに進められると思います。"

解説が速く、一部追いつくのが大変。

"講義のスピードが速く、コードを書き写すのに一時停止が必須でした。もう少しゆっくり進めてほしいです。"

"なぜこのコードを書くのか、という背景や設計思想の説明がもう少し丁寧だと、より理解が深まると思いました。"

"環境構築など、一部さらっと進んでしまう部分があり、自分で補完する必要がありました。"

"コードの解説自体は分かりやすいのですが、全体の流れや各パーツの繋がりが見えにくい箇所がありました。"

ある程度のReact/TS知識が求められる。

"講座の説明に「ReactやTypeScriptの基礎は含まない」とありますが、結構しっかりとした基礎理解がないと難しいです。"

"React初学者やProgateレベルだと、途中で挫折してしまう可能性があると感じました。"

"エラーが出た際に自分で解決できるレベル、または根気強く調査できる方でないと厳しいかもしれません。"

"解説が丁寧ですが、全くの初心者には向かない、経験者向けの講座です。"

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in 【実務レベルの開発を学びたい方へ】React + Typescriptで超本格的なNotionクローンを作ろう with these activities:

TypeScriptの基礎を復習する

Show steps

コースの前提知識であるTypeScriptの基礎を復習し、型安全なコーディングをスムーズに進められるようにする。

Browse courses on TypeScript

Show steps

TypeScriptの公式ドキュメントを読む
基本的な型定義の練習問題を解く
既存のJavaScriptコードをTypeScriptに変換する

Reactの基礎を復習する

Show steps

コースの前提知識であるReactの基礎を復習し、コンポーネントの作成や状態管理をスムーズに進められるようにする。

Browse courses on React

Show steps

Reactの公式ドキュメントを読む
簡単なReactコンポーネントを作成する
stateとpropsを使ったデータバインディングを試す

TypeScriptスターターブックを読む

Show steps

TypeScriptの理解を深め、コースでより効率的に開発を進められるようにする。

View Melania on Amazon

Show steps

書籍を購入または図書館で借りる
書籍の目次を確認し、興味のある章から読み始める
サンプルコードを実際に書いて実行してみる

Four other activities

Expand to see all activities and additional details

Show all seven activities

簡単なTodoアプリをReact + TypeScriptで作る

Show steps

コースで学ぶNotionクローン開発の前に、ReactとTypeScriptを使った簡単なWebアプリ開発を経験することで、実践的なスキルを身につける。

Show steps

create-react-appでプロジェクトを作成する
TypeScriptの設定を行う
Todoリストの表示、追加、削除機能を実装する
ローカルストレージにTodoリストを保存する

Notionクローン開発の学習記録をブログに書く

Show steps

コースで学んだ内容をブログにまとめることで、知識の定着を促し、アウトプットスキルを向上させる。

Show steps

ブログサービスを選定する（例：note, Medium, はてなブログ）
コースで学んだ内容を整理する
ブログ記事を執筆する
記事を公開し、SNSで共有する

Notionクローンの改善点を洗い出してIssueを立てる

Show steps

コースで作成したNotionクローンをさらに発展させるために、改善点を見つけ出し、Issueとして報告することで、問題解決能力と貢献意欲を高める。

Show steps

Notionクローンを実際に使用してみる
改善点やバグを見つける
GitHubリポジトリにIssueを立てる
Issueの内容を具体的に記述する

Notionクローンの機能を拡張する

Show steps

コースで作成したNotionクローンに、独自の機能を追加することで、より実践的な開発スキルを身につける。

Show steps

追加したい機能を検討する
必要な技術要素を調査する
機能を実装する
テストを行い、動作を確認する

Career center

Learners who complete 【実務レベルの開発を学びたい方へ】React + Typescriptで超本格的なNotionクローンを作ろう will develop knowledge and skills that may be useful to these careers:

Reactエンジニア

Reactエンジニアは、Reactライブラリを使用して、動的でインタラクティブなユーザーインターフェースを構築します。このコースは、Reactエンジニアとしてのキャリアを目指す方に最適です。ReactとTypeScriptを用いたNotionクローン開発を通して、実践的なスキルを習得できます。特に、コンポーネントの再利用、ステート管理、API連携など、React開発における重要な概念を深く理解できます。さらに、リアルタイム通信や認証機能の実装など、高度な技術も学べるため、Reactエンジニアとして即戦力となることができます。

See salaries and explore the career path for Reactエンジニア

フロントエンドエンジニア

フロントエンドエンジニアは、ウェブサイトやアプリケーションのユーザーインターフェースを構築し、ユーザーエクスペリエンスを向上させる役割を担います。このコースでは、ReactとTypeScriptを使用した本格的なNotionクローンを作成するため、実践的なスキルを習得できます。特に、ログイン/ユーザー登録、入れ子でのメモ作成、リアルタイム通信など、実務で求められる機能開発の経験は、フロントエンドエンジニアとして即戦力となるために非常に役立ちます。さらに、モダンなReact開発や型安全なコーディング、バックエンドとの連携など、幅広い知識を習得することで、より高度な開発に挑戦できます。

See salaries and explore the career path for フロントエンドエンジニア

ウェブアプリケーションエンジニア

ウェブアプリケーションエンジニアは、ウェブ上で動作するアプリケーションの設計、開発、テスト、デプロイを担当します。このコースでは、ReactとTypeScriptを使ってNotionクローンを作成する過程で、ウェブアプリケーション開発に必要な一連のスキルを習得できます。特に、フロントエンドのReact開発に加えて、バックエンド（Firebase）との連携やインフラ（Vercel）の利用も学ぶため、ウェブアプリケーションエンジニアとして活躍するための基盤を築くことができます。また、リアルタイム通信や認証機能の実装など、高度な技術も学べるため、より複雑なアプリケーション開発にも対応できます。

See salaries and explore the career path for ウェブアプリケーションエンジニア

UI開発者

UI開発者は、ユーザーインターフェースの設計と実装に特化した役割を担います。このコースでは、ReactとTypeScriptを使ってNotionクローンを作成するため、現代的なUI開発に必要なスキルを習得できます。特に、Reactコンポーネントの設計、ステート管理、イベント処理など、UI開発における重要な概念を深く理解できます。さらに、Tailwind CSSを使ったスタイリングや、リアルタイム通信を使ったインタラクティブなUIの実装など、実践的なスキルも身につけられます。

See salaries and explore the career path for UI開発者

ウェブデベロッパー

ウェブデベロッパーは、ウェブサイトやウェブアプリケーションの設計、開発、テスト、デプロイを担当します。このコースでは、ReactとTypeScriptを使ってNotionクローンを作成する過程で、ウェブアプリケーション開発に必要な一連のスキルを習得できます。特に、バックエンド（Firebase）との連携やインフラ（Vercel）を利用したWebアプリケーションの公開は、ウェブデベロッパーとして必要な知識です。また、このコースでは、リアルタイム通信や認証機能の実装など、高度な技術も学べるため、ウェブデベロッパーとしての市場価値を高めることができます。

See salaries and explore the career path for ウェブデベロッパー

TypeScriptエンジニア

TypeScriptエンジニアは、TypeScript言語を使用してアプリケーションを開発し、コードの品質と保守性を向上させる役割を担います。このコースでは、ReactとTypeScriptを使ったNotionクローンを作成するため、TypeScriptを使った実践的な開発経験を積むことができます。特に、型定義、インターフェース、ジェネリクスなど、TypeScriptの高度な機能を活用することで、より堅牢で保守性の高いアプリケーションを開発できます。また、このコースでは、TypeScriptを使ったテストやデバッグなど、開発プロセス全体を学ぶことができます。

See salaries and explore the career path for TypeScriptエンジニア

フルスタックエンジニア

フルスタックエンジニアは、フロントエンドとバックエンドの両方の開発を担当し、ウェブアプリケーション全体を構築します。このコースでは、ReactとTypeScriptを使ったNotionクローンを作成する過程で、フルスタックエンジニアに必要なスキルを幅広く習得できます。特に、フロントエンドのReact開発に加えて、バックエンド（Firebase）との連携やインフラ（Vercel）の利用も学ぶため、フルスタックエンジニアとして活躍するための基盤を築くことができます。また、リアルタイム通信や認証機能の実装など、高度な技術も学べるため、より複雑なアプリケーション開発にも対応できます。

See salaries and explore the career path for フルスタックエンジニア

ソフトウェアエンジニア

ソフトウェアエンジニアは、ソフトウェアの設計、開発、テスト、デプロイを担当します。このコースでは、ReactとTypeScriptを使ってNotionクローンを作成する過程で、ソフトウェア開発に必要な一連のスキルを習得できます。特に、Reactを使ったフロントエンド開発や、TypeScriptを使った型安全なコーディング、バックエンドとの連携など、ソフトウェアエンジニアとして必要な知識を幅広く学ぶことができます。また、リアルタイム通信や認証機能の実装など、高度な技術も学べるため、より複雑なソフトウェア開発にも対応できます。

See salaries and explore the career path for ソフトウェアエンジニア

プログラマー

プログラマーは、特定のプログラミング言語を使用して、ソフトウェアのコードを記述します。このコースでは、ReactとTypeScriptを使ってNotionクローンを作成するため、プログラマーとしてのスキルを向上させることができます。特に、Reactを使ったUI開発や、TypeScriptを使った型安全なコーディングなど、現代的なプログラミング技術を学ぶことができます。また、このコースでは、コードの書き方だけでなく、テストやデバッグなど、開発プロセス全体を学ぶことができます。

See salaries and explore the career path for プログラマー

ジュニアデベロッパー

ジュニアデベロッパーは、経験豊富な開発者の指導のもとで、ソフトウェア開発の基本的なタスクを担当します。このコースは、ジュニアデベロッパーとしてのキャリアをスタートさせるのに役立ちます。ReactとTypeScriptを使ったNotionクローン開発を通して、実践的なスキルを習得できます。特に、コードの書き方、テスト、デバッグなど、開発の基礎を学ぶことができます。また、経験豊富な開発者からのフィードバックを受けることで、より早く成長することができます。

See salaries and explore the career path for ジュニアデベロッパー

テクニカルリード

テクニカルリードは、開発チームを技術的な面からリードし、プロジェクトの成功を導く役割を担います。このコースを受講することで、ReactとTypeScriptを用いた実践的な開発経験が得られ、チームメンバーへの技術的な指導やサポートに役立ちます。特に、Notionクローンという複雑なアプリケーションの開発を通して、アーキテクチャ設計、コードレビュー、パフォーマンス改善など、テクニカルリードに必要なスキルを磨くことができます。また、最新の技術トレンドや開発手法を学ぶことで、チーム全体の技術力を向上させることができます。テクニカルリードを目指すのであれば、チームを成功に導くためにこのコースが役に立つかもしれません。

See salaries and explore the career path for テクニカルリード

ソフトウェアアーキテクト

ソフトウェアアーキテクトは、ソフトウェアシステムの全体的な構造と設計を担当します。このコースを通して、ReactとTypeScriptを用いたNotionクローンのような、複雑なWebアプリケーションのアーキテクチャ設計に関する洞察を得られる「かも」しれません。認証機能、リアルタイム通信、データ管理など、様々な要素が組み合わさったアプリケーションを構築する経験は、スケーラブルで保守性の高いシステムを設計する上で役立ちます。このコースでの経験は、将来的に大規模なソフトウェアプロジェクトのアーキテクチャ設計に携わる際に役立つかもしれません。高度な学位（修士号や博士号など）が通常必要とされる可能性があります。

See salaries and explore the career path for ソフトウェアアーキテクト

DevOpsエンジニア

DevOpsエンジニアは、開発と運用を連携させ、ソフトウェアのリリースサイクルを加速させる役割を担います。このコースでは、Vercelへのデプロイを学ぶため、DevOpsエンジニアとしてのキャリアをスタートさせるのに役立ちます。特に、CI/CDパイプラインの構築、自動テスト、インフラストラクチャの自動化など、DevOpsエンジニアに必要なスキルを習得できます。また、開発チームとの連携を円滑にするためのコミュニケーションスキルも磨くことができます。このコースで得られる知識と経験は、DevOpsエンジニアとしてのキャリアを大きく前進させるかもしれません。

See salaries and explore the career path for DevOpsエンジニア

ウェブデザイナー

ウェブデザイナーは、ウェブサイトやウェブアプリケーションの視覚的なデザインを担当します。このコース自体はデザインに特化していませんが、ReactとTypeScriptを使った開発スキルを習得することで、ウェブデザイナーとしてより高度な表現が可能になります。特に、インタラクティブなUIや、動的なコンテンツの表示など、デザインだけでは実現できない表現を、開発スキルを使って実現することができます。また、他の開発者との連携もスムーズになり、より良いウェブサイトやウェブアプリケーションを制作することができます。

See salaries and explore the career path for ウェブデザイナー

QAエンジニア

QAエンジニアは、ソフトウェアの品質を保証するために、テスト計画の作成、テストの実施、バグの報告などを行います。このコース自体はテストに特化していませんが、ReactとTypeScriptを使った開発スキルを習得することで、QAエンジニアとしてより効果的にソフトウェアの品質を評価できます。特に、コードの構造や動作を理解することで、より適切なテストケースを作成したり、バグの原因を特定したりすることができます。つまり、開発の知識があることで、より質の高いテストを行うことができるようになります。

See salaries and explore the career path for QAエンジニア

Reading list

We've selected one books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in 【実務レベルの開発を学びたい方へ】React + Typescriptで超本格的なNotionクローンを作ろう.

【実務レベルの開発を学びたい方へ】React + Typescriptで超本格的なNotionクローンを作ろう

What's inside

Learning objectives

Syllabus

Traffic lights

Save this course

Reviews summary

実践的react+ts notionクローン開発

Activities

Career center

Reading list

Share

Similar courses