강의

멘토링

커뮤니티

BEST
Programming

/

Web Development

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

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

  • zerocho
이론 실습 모두
canvas
Design Pattern
oop
TypeScript
JavaScript

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

受講後に得られること

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

  • 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

  • タイプスクリプト

こんにちは
です。

66,541

受講生

1,685

受講レビュー

9,755

回答

4.8

講座評価

22

講座

제 강의의 장점은 Q&A입니다(인프런 답변왕 2회 수상). 24시간 이내에 최대한 답변드립니다! 같이 고민한다는 느낌으로 답변 드릴게요!

One of the key strengths of my courses is the Q&A support. (Winner of the Inflearn Q&A King award twice) I respond to your questions within 24 hours, doing my best to help you out! You’ll feel like we’re solving the problems together.

👉ZeroCho Lectures
제로초 강의 전체 로드맵. A complete roadmap of all my courses is available here.

– Node.js교과서, 코딩자율학습 제로초의 자바스크립트, Let's Get IT 자바스크립트, 타입스크립트 교과서 저자 
ZeroCho.com 운영자
– 현) 유튜브에서 ZeroCho TV로 개발 관련 방송중 
– 현) 스모어톡 CTO 
– 전) 오늘의픽업 CTO(카카오모빌리티에 엑싯 후 카카오모빌리티 최연소 개발파트장)

  • Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook

  • Operator of ZeroCho.com

  • Currently running a YouTube channel ZeroCho TV, covering development topics

  • CTO at SmoreTalk

  • Former CTO at Today Pickup (acquired by Kakao Mobility, where I became the youngest lead developer)

カリキュラム

全体

34件 ∙ (6時間 16分)

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

受講レビュー

全体

24件

4.6

24件の受講レビュー

  • bwlimtony7082님의 프로필 이미지
    bwlimtony7082

    受講レビュー 3

    平均評価 5.0

    5

    24% 受講後に作成

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

    • seukchungmoon8847님의 프로필 이미지
      seukchungmoon8847

      受講レビュー 37

      平均評価 5.0

      5

      32% 受講後に作成

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

      • pehwish0827님의 프로필 이미지
        pehwish0827

        受講レビュー 7

        平均評価 5.0

        5

        100% 受講後に作成

        • beamch61227님의 프로필 이미지
          beamch61227

          受講レビュー 8

          平均評価 5.0

          5

          62% 受講後に作成

          • alsry922님의 프로필 이미지
            alsry922

            受講レビュー 17

            平均評価 4.7

            5

            62% 受講後に作成

            今までコードをリファクタリングしてきたら、完成したコードが紹介していただいたデザインパターンに該当するものも結構ありました。 悩みながら作成したコードが講座で紹介されている内容と似ているので、より理解もしやすいですし、記憶にも残りやすい気がします。 ロジックが少しでも複雑になると、コードが非常に読みにくくなると感じます。数多くのif文が私の脳を砕くようで、数多くのfor文が砕かれた脳をかき回すようです… そんな時はいつもリファクタリングは必須だと思いますし、デザインパターンの講義は本当におすすめです。

            ¥7,399

            zerochoの他の講座

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

            似ている講座

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