
コーディングは初めてなら with ウェブパブリッシング - HTML基礎
ezweb
この講義を通じて、ウェブページを構成する3大言語であるHTML、CSS、JavaScriptのうち、HTML言語の基礎をしっかりと固めることができます。検索に最適化され、ウェブアクセシビリティとウェブ標準を遵守するHTMLを正しく学習してみましょう。
入門
HTML/CSS
React + TypeScriptを活用し、実務感覚で「ToDoリスト(ToDo List)」を自ら作成するプロジェクト中心のカリキュラムです。単に文法を学ぶだけでなく、コンポーネント構造の設計 → 状態管理 → 型の適用 → 機能実装 → ローカルストレージ連携 → デプロイまで、実際のサービス形式で完成させることで、TypeScriptの活用感覚を身につけることができます。
受講生 16名
難易度 初級
受講期間 無制限
React + TypeScript 開発環境の構築
UIコンポーネント構造の設計および状態管理の基礎
ToDoの追加 / 完了 / 削除機能の実装
TypeScriptを活用したロジックの最適化
リファクタリングと保守に強いコード構造の設計
チャンネル登録&高評価&コメントイベント
簡単なミッションを完了して、50%割引クーポンを今すぐ手に入れましょう。期間限定で提供される過去最大級の特典を、今すぐお見逃しなく!
イベントに参加する:https://forms.gle/wcD2wRVeaG7B7fSj7
React + TypeScriptを活用して「ToDoリストアプリ」を実際に作成するプロジェクト中心のカリキュラム
コンポーネント構造設計 → 状態管理 → 型の適用 → 機能実装 → ローカルストレージ連携 → デプロイ
基礎文法をアプリ開発に直接適用しながら、Reactの実務環境でTSを自然に習得できるように構成しました。
https://web-todo-ts.vercel.app/
TODOのタイトルを入力し、いつまでに完了するか期限を選択した後、追加ボタンをクリックします。
TODOのタイトルをクリックして、完了に切り替えてみてください。
編集ボタンをクリックして、ToDoのタイトルを修正してみてください。
削除ボタンをクリックして、ToDoを削除してみてください。
TODOリストを表示する
ToDoの修正(TODOの修正)
TypeScriptを学習したが、実際のプロジェクトに適用したことがない方
Reactで簡単なアプリを作ってみたものの、型安全性のないコードに不安を感じている方
ポートフォリオ用のReact + TypeScript ミニプロジェクトを完成させたい方
ReactプロジェクトにTypeScriptを自然に適用する方法を習得します。
コードの型安全性と生産性を同時に確保する感覚を体得します。
実務アプリ設計の基本であるコンポーネントの分離と状態の流れを明確に理解します。
完成したTodoListアプリをポートフォリオにそのまま活用できます。
vite、parcel、rsbuildの比較およびアプリ生成、共通タイプの設定
入力フォーム、ToDoリストコンポーネントの構成、propsとstateの型指定
入力フォーム、ToDoリストコンポーネントの構成、propsとstateの型指定
インターフェース、ユニオン型、オプション属性など、実務型の型活用
GitHubとVercelのサービスを利用して、完成したプロジェクトをデプロイします。
GitHubとVercelを活用したデプロイ
この講座はReactとTypeScriptを初めて学ぶ入門者も受講できるカリキュラムです。
HTML、CSS、JavaScriptの基本文法を理解していれば十分に付いていくことができ、
Reactの基礎文法(コンポーネント、props、useState)に関する簡単な理解があれば、よりスムーズに進めることができます。
コード中心に進めるため、理論よりも実際に作りながら身につける実践型の授業を目指しています。
コード中心の講義ですので、IDE(Visual Studio Code)環境で一緒にコードを打ちながら進めることをお勧めします。
この講義の映像、コード例、画像、教本などの資料はすべてezwebに著作権があります。
ただし、受講生は個人学習およびポートフォリオ用として、サンプルコードを自由に活用いただけます。
講義で扱うすべてのサンプルは教育目的の実習用コードであり、商業利用の際には別途許可が必要です。
学習対象は
誰でしょう?
TypeScriptを学習したものの、実際のプロジェクトに適用したことがない方
Reactで簡単なアプリを作ってみたものの、型安全性のないコードに不安を感じている方
ポートフォリオ用のReact + TypeScriptミニプロジェクトを完成させたい方
実務で求められるコンポーネントベース設計と状態管理の基礎を固めたいフロントエンド入門者
前提知識、
必要でしょうか?
html/css
javascript
TypeScript
キャリア認証
2,922
受講生
72
受講レビュー
4
回答
4.9
講座評価
14
講座
■ [現在] ESTSOFT KDT フロントエンド講師
■ グリーンコンピュータアート学院 ウェブパブリッシング、フロントエンド講師
■ ウェブパブリッシングYouTubeチャンネル「Rock's Easyweb」運営
■ ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
■ ハンビッコンピュータアカデミー ウェブパブリッシング講師
■ フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
■ UI/UXウェブデザインポートフォリオ講義
[ 書籍 ]
2021.07.19 刊行 / ウェブデザイン&ウェブパブリッシングのためのFigma完璧活用書 / BJ Public
2022.08.25 出版 / コーディングは初めて with ウェブパブリッシング / ヨンジン出版社
2023.10 出刊 /2024 SDエデュ ユ・ソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画
2024.11 重版 /2025 SDエデュ ユーソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画
2025.11 重版 /2026 SDエデュ ユ先生のウェブデザイン技能士実技家庭教師ノート / 時代考試企画
[ 受賞歴 ]
2022.08 グリーンコンピュータアート学院 鐘路支店 - 優秀講師 2021.06 グリーンコンピュータアート学院 鐘路支店 - 優秀講師 2018.06 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2017.05 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2016.05 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2015.10 グリーンコンピュータアカデミー 新村支店 - 優秀講師
全体
14件 ∙ (3時間 23分)
講座資料(こうぎしりょう):
1. アプリ生成および共通タイプ設定
18:56
2. UI生成
07:20
3. タイプ活用 ToDoリスト変数生成
14:11
4. 新規投稿入力関数
26:15
5. タスク完了/未完了切り替え関数
27:39
6. 修正、削除関数
10:27
7. やることを入力
25:37
8. やることリスト出力
08:58
9. やることの修正 - UI実装
25:31
10. やることをチェックする
07:04
11. やることを修正する
10:06
12. やることを削除する
08:08
13. アプリレビュー
07:46
14. アプリデプロイ - vercel
05:49
全体
1件
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!
期間限定セール、あと1日日で終了
¥23,100
30%
¥4,388