inflearn logo
inflearn logo

TS/JSデザインパターン with Canvas: ゼロ秒にしっかり学ぶ

タイプスクリプト/JavaScriptでペイントを作成し、さまざまなデザインパターンの使い方と長所と短所を学びます。 canvas apiを学べるのはボーナス!

難易度 中級以上

受講期間 無制限

Design Pattern
Design Pattern
oop
oop
TypeScript
TypeScript
JavaScript
JavaScript
canvas
canvas
Design Pattern
Design Pattern
oop
oop
TypeScript
TypeScript
JavaScript
JavaScript
canvas
canvas

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

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

4.7

5.0

bottlewook

24% 受講後に作成

内容がかなり難しいので、進捗はあまり早くありませんが、 JavaScript を利用したデザイン パターンを教えてくれてありがとうございます 😊😊 非専門の開発者として、꼭一度勉強してみたかった内容でしたが、ペイントの例とともに説明してくれて、会社で仕事をしている間も大いに役立っています!

5.0

문석청

32% 受講後に作成

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

5.0

불타는금호동

100% 受講後に作成

デザインパターンをフロントエンドの観点から学べる講義だったので、より意味のある講義でした。クラスの使い方についても様々な例を見ることができて良かったです! もしReactでの例も見ることができたら、もっと現実世界でどう活用できるかイメージがパパパッと湧いてきそうですが、この部分は追加で一緒に学習しながらインサイトを得ることができました。 良い講義ありがとうございます!

受講後に得られること

  • タイプスクリプトデザインパターン

  • JavaScriptのデザインパターン

  • canvasでペイントを作る

デザインパターンを学んで私に役立つのは正しいですか? 🤔

と質問される方を本当にたくさん見ました。私はこう答えます。

あなたは知らずに生きるよりも役に立ちます!

私はいつも「デザインパターンは学ぶわけではない。私のコードを最適化してみると、自然にデザインパターンの形になる」と言ってきました。しかし、オブジェクト指向の概念とクラスを積極的に使用しないJavaScript/TypeScriptの特性上、デザインパターンを積極的に使用しない方が多く見られました。それで、少なくともデザインパターンがどんなものなのか、どんな種類があるのか皆さんに紹介しようと思います。

このレッスンを見ると、あなたがすでにいくつかのデザインパターンを書いていることに気づくことができ、デザインパターンを使ってコードを最適できることがわかります。

さまざまなデザインパターンがありますが、すべて役に立つわけではありません。ただ、3つの便利なデザインパターンがあなたのコードのクオリティを変えるでしょう

デザインパターンの便利さ、簡単な例を見てください!

もしあなたのコードでこのような複数の関数にわたって同じifステートメントが繰り返されていませんか?これにより、新しいifステートメントが追加されるたびに3つの関数を変更する必要があります。

ファクトリーパターンとステータスパターンを活用すれば、こんなにきれいに修正できます!修正が生じたときに関数一つだけ修正してもいいです。

この講義の特徴

📌本講義では、 GoFの本に出てくる23のデザインパターンとその他のデザインパターンをJavaScript/TypeScriptに合わせて学びます。

📌デザインパターンはSOLIDの原則とは別にできません。 SOLID原則も一緒に紹介します。

📌実務と同様の例として、ペイントHTML canvas APIを使用して作成します(開発者ツールDebuggerを使用する蜂蜜のヒントも少し含まれています!)

📌 タイプスクリプトに進むが、JavaScriptでの違い扱います(言語的な特性のため、一部のデザインパターンに違いがあります)

こんな方におすすめです

デザインパターンを学びたい方

クリーンコード、オブジェクト指向に興味があり、デザインパターンを学びたい方

JS/TSの例が必要な方

市中のデザインパターン本/講義が異なる言語になっており、JavaScript、TypeScriptの例が必要な方

実践的な例で理解したい方

毎回出てくる動物、猫、自動車クラスの代わりに実務で使われるコードでデザインパターンを理解したい方

受講後は

  • 今私が書いているコードがどんなデザインパターンなのか分かります。

  • 学んだデザインパターンを適用して、現在のコードをきれいにリファクタリングできます。

  • 他の人にコードを説明するとき、句句節を説明するのではなく、「このデザインパターンを書きました!」と簡単にコミュニケーションできるようになります。

  • 新しいコードを書くときにどんなデザインパターンを書けば効率的かを判断できるようになります。

  • JavaScript / TypeScript言語属性を使用してパターンをより簡単にすることができます。

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

タイプスクリプト文法で学ぶ

Javaなどの他のオブジェクト指向言語とは違いがあります。構造的なタイピング、インタフェース、抽象クラスなどを最初にお知らせします。

JavaScriptの文法でも学びます。

ほとんどの場合、タイプスクリプトとJavaScriptコードはほぼ同じです。ただし、違いのある部分は別にお知らせします。

講義の教案には要約とUMLがあります。

コードがますます複雑になるので、デザインパターンが適用された部分だけを別々にUMLで表示してみました。 UMLは講義でお知らせします。

シンプル(コードではない)ペイントを作ってみましょう。

うまくいかない例ではなく、本物のプログラムを作成しながらデザインパターンを学びましょう。 25のデザインパターンを入れるのは大変でした...

受講前の注意

練習環境

  • レッスンは、Windows 11からVisual Studio Code Live Serverに進みます。ただし、オペレーティングシステム、IDEは関係ありません。

  • タイプスクリプトは5.5バージョン以上です。

選手の知識と注意事項

  • 基本的なJavaScript、TypeScript文法

  • タイプスクリプトがわからない場合は、タイプスクリプトコードからタイプ部分を削除するとJavaScriptです(ただしJavaScriptでデザインパターンが異なる部分があります)

  • ペイントの作成は補助的な役割であり、このレッスンの主な目的はデザインパターン学習です。



こんな方に
おすすめです

学習対象は
誰でしょう?

  • JavaScriptでより効率的なコードを作成したい人

  • デザインパターンがどこに使えるのか気になる方

  • JavaScriptでクラスの使い方が気になる方

  • タイプスクリプトでインターフェース、抽象クラスの使い方が気になる方

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

  • JavaScript

  • タイプスクリプト

こんにちは
zerochoです。

67,385

受講生

1,727

受講レビュー

9,762

回答

4.8

講座評価

25

講座

私の講義の強みはQ&Aです(Inflearn回答王を2回受賞)。24時間以内にできる限りお答えします!一緒に悩んでいるという気持ちで回答させていただきます!

私の講座の大きな強みはQ&Aサポートです。(インフラーンQ&A王賞を2回受賞)24時間以内にご質問にお答えし、最善を尽くしてサポートいたします!問題を一緒に解決している感覚を味わっていただけるでしょう。

👉ZeroCho Lectures
ZeroCho(ゼロチョ)講義の全ロードマップ。私の全コースの完全なロードマップはこちらでご確認いただけます。

– 『Node.js教科書』、『コーディング自律学習 ZeroChoのJavaScript』、『Let's Get IT JavaScript』、『TypeScript教科書』著者
ZeroCho.com 運営者
– 現) YouTubeにてZeroCho TVで開発関連の放送中
– 元) Smoretalk CTO
– 元) 今日のピックアップ CTO(カカオモビリティにエグジット後、カカオモビリティ最年少開発パート長)

  • Node.js教科書ZeroChoの独学JavaScriptLet's Get IT JavaScriptTypeScript教科書の著者

  • ZeroCho.comの運営者

  • 現在、開発関連のトピックを扱うYouTubeチャンネルZeroCho TVを運営中

  • SmoreTalk CTO

  • Today Pickup CTO(カカオモビリティに買収、最年少リード開発者として合流)

もっと見る

カリキュラム

全体

34件 ∙ (6時間 16分)

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

受講レビュー

全体

26件

4.7

26件の受講レビュー

  • seukchungmoon8847님의 프로필 이미지
    seukchungmoon8847

    受講レビュー 37

    平均評価 5.0

    5

    32% 受講後に作成

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

    • pehwish0827님의 프로필 이미지
      pehwish0827

      受講レビュー 7

      平均評価 5.0

      5

      100% 受講後に作成

      • beamch61227님의 프로필 이미지
        beamch61227

        受講レビュー 9

        平均評価 5.0

        5

        62% 受講後に作成

        • 30110303님의 프로필 이미지
          30110303

          受講レビュー 4

          平均評価 5.0

          5

          100% 受講後に作成

          デザインパターンをフロントエンドの観点から学べる講義だったので、より意味のある講義でした。クラスの使い方についても様々な例を見ることができて良かったです! もしReactでの例も見ることができたら、もっと現実世界でどう活用できるかイメージがパパパッと湧いてきそうですが、この部分は追加で一緒に学習しながらインサイトを得ることができました。 良い講義ありがとうございます!

          • bwlimtony7082님의 프로필 이미지
            bwlimtony7082

            受講レビュー 3

            平均評価 5.0

            5

            24% 受講後に作成

            内容がかなり難しいので、進捗はあまり早くありませんが、 JavaScript を利用したデザイン パターンを教えてくれてありがとうございます 😊😊 非専門の開発者として、꼭一度勉強してみたかった内容でしたが、ペイントの例とともに説明してくれて、会社で仕事をしている間も大いに役立っています!

            zerochoの他の講座

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

            似ている講座

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

            期間限定セール、あと5日日で終了

            ¥41,580

            30%

            ¥7,270