강의

멘토링

로드맵

Inflearn brand logo image
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

  • タイプスクリプト

こんにちは
です。

65,525

受講生

1,602

受講レビュー

9,702

回答

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分)

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

受講レビュー

全体

15件

5.0

15件の受講レビュー

  • bottlewook님의 프로필 이미지
    bottlewook

    受講レビュー 3

    平均評価 5.0

    5

    24% 受講後に作成

    내용이 많이 어려워 진도를 빠르게 나가고 있진 않지만 자바스크립트를 이용한 디자인 패턴 강의를 내주셔서 감사합니다 ㅎㅎ 비전공자 개발자로서 꼭 한번 공부하고 싶었던 내용인데 그림판 예시와 함께 설명해 주셔서 회사 일 하면서도 도움 많이 받고있습니다!

    • 문석청님의 프로필 이미지
      문석청

      受講レビュー 36

      平均評価 5.0

      5

      32% 受講後に作成

      좋은 강의 감사합니다.

      • pehwish님의 프로필 이미지
        pehwish

        受講レビュー 6

        平均評価 5.0

        5

        100% 受講後に作成

        • beam.ch6님의 프로필 이미지
          beam.ch6

          受講レビュー 7

          平均評価 5.0

          5

          62% 受講後に作成

          • 정민교님의 프로필 이미지
            정민교

            受講レビュー 17

            平均評価 4.7

            5

            62% 受講後に作成

            여태 코드를 리팩토링 하다보니까 완성된 코드들이 소개시켜주신 디자인 패턴에 해당하는 것도 꽤나 많았네요. 고민하면서 작성했던 코드들이 강좌에서 소개해주는 내용과 비슷하니까 더 이해도 잘 되고 기억에 잘 남는 것 같습니다. 로직이 조금만 복잡해져도 코드가 굉장히 읽기 힘들어진다고 느낍니다. 수 많은 if 문들이 내 뇌를 쪼개는 것 같고, 수 많은 for문들이 쪼개진 뇌를 휘젓는 것 같습니다... 그럴 때마다 항상 리팩토링은 필수라고 생각하고요. 디자인 패턴 강의 꼭 강추합니다.

            ¥7,028

            zerochoの他の講座

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

            似ている講座

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