Zenn
😸

TypeScript未経験者の学習方法

に公開
TypeScript
記事投稿コンテスト「TypeScriptでやってみた挑戦・学び・工夫」
tech

この記事は何?

この記事は記事投稿コンテスト　TypeScriptでやってみた挑戦・学び・工夫の投稿記事です。
TypeScript未経験だった私が学習を決めたきっかけ、学習方法を書いています。
私と同じようなTypeScript未経験の方の何か参考になるかもしれないと思ったので記事を書くことにしました。

著者の技術バックボーン

私の仕事は医療機器の組込みソフトウェア開発です。プログラミング言語はC、C++を23年間、使ってきました。C、C++でマイコンやマイコンに接続されたデバイスを制御し、装置を動かすことが目的です。
これまでTypeScriptの経験はありません。後述の学習を決めたきっかけがあり、TypeScriptの学習を始めました。

学習を決めたきっかけ

TypeScript未経験の私が学習を始めたきっかけはつぎの二つの理由です。

ｽﾀｯｸﾁｬﾝ

ロボットのｽﾀｯｸﾁｬﾝをご存知ですか?

https://protopedia.net/prototype/2345

その可愛らしさとコンセプトに惹かれ、私も購入しました。

私が購入したのは株式会社アールティのｽﾀｯｸﾁｬﾝ アールティver. 組立キットです。
ｽﾀｯｸﾁｬﾝ アールティver. 組立キット

https://www.rt-shop.jp/index.php?main_page=product_info&products_id=4188

ｽﾀｯｸﾁｬﾝの魅力は多く一言では語り尽くせませんが、魅力の一つとして

  • JavaScriptを使って自由にアプリケーションを開発できる

があると思っています。

ModdableSDKという仕組みなのだそうですが、これにより組込みソフトウェアエンジニア以外の方にもマイコン開発の門戸が開いた気がします。

https://www.moddable.com/

ｽﾀｯｸﾁｬﾝはJavaScript・TypeScript以外にもC、C++の開発環境もあるようです。
私はTypeScriptでデバイスを制御してみたいという願望があるので、TypeScriptで開発をしたいと考えています。

これが私がTypeScriptの学習を決めたきっかけの一つです。

Mastra

TypeScriptの学習を決めたきっかけの二つ目は、Zennに掲載のこちらの本Mastraで作るAIエージェント入門の学びのためです。

Mastraで作るAIエージェント入門
serinuntius 著

https://zenn.dev/serinuntius/books/4346a0fc6818f3

AIエージェントに興味があり、とあるイベントでMastraのことを知り、気になっていました。
たまたまこの本を知りGitHubのREADMEの手順を試してみたところGitHub解析を行うエージェントを動かすことができました。

この本はTypeScriptで各章をステップバイステップで機能を実装していく構成となっています。
GitHub解析エージェントを動かすことはできましたが、各章を写経し実装しておらずMastraの概要が理解できていません。
Mastraの概要の理解を進めるためにもTypeScriptをある程度のレベルになりたいと考えました。

これが私がTypeScriptの学習を決めたきっかけの二つ目です。

学習方法

TypeScriptの学習を始めて感じた効果的な学習方法について書きます。

コミュニティに参加し学ぶ

ｽﾀｯｸﾁｬﾝの開発をTypeScriptでやろうと決めましたが、経験がないためはじまりの開発環境の構築からビルドもわかりませんでした。
開発環境構築で問題解決できず手詰まりになったとき、ｽﾀｯｸﾁｬﾝのコミュニティに質問したところ、素早く適切な回答をいただき問題をスピーディーに解決できました。
やりたいのはTypeScriptを使っての開発で、開発手前の環境構築で詰まるとやる気が失われてしまいます。
この経験から自分で問題解決できないときはコミュニティに聞くことも大切だと思いました。
質問することでコミュニティにもノウハウが蓄積されます。
今の時代、当たり前のことだとも思いますが学ぶときにコミュニティに積極的に参加することは開発をスムーズに進める上で大事だと感じました。

写経

TypeScriptの学習に限った訳ではないですが、私がプログラミング言語の学習で必ずやることとして技術書の写経があります。
技術書を読んで終わりだけでなく、手を動かすことで学びが深まると感じています。
今回は次の本を購入し写経を行いました。

かんたん TypeScript
HIRO　著
技術評論社

https://gihyo.jp/book/2023/978-4-297-13739-7

写経の方法で意識しているのは次になります。

以前のイベント資料からの引用です。

https://www.docswell.com/s/juraruming/K6DLMZ-2022-07-08-080226#p6

また、写経の方法の他に写経をする環境にも気をつかいます。
コロナ以降、時差出勤可能(1時間早く出社)となり通勤で座れるようになりました。
通勤中にコードを書く環境・習慣をつくることができました。

印象に残っている学び

TypeScriptを学びはじめて印象に残ったことについて書きます。

型定義ファイル

ｽﾀｯｸﾁｬﾝの開発で印象に残ったことです。
JavaScriptに定義された関数を使いたいことがありました。
そのためには型定義ファイルを作り、TypeScriptに「このモジュールにはこういう関数があるよ」と教える必要があります。
TypeScript学び始めの私はこの知識がなく、関数呼び出しの方法もわからず解決できませんでした。
この件も前述のｽﾀｯｸﾁｬﾝのコミュニティに質問したところ解決できました。コミュニティのありがたさを実感した出来事でした。

具体的にはQiita記事の次の章に書いています。

ｽﾀｯｸﾁｬﾝの顔色を変えてみる
変更点2. typingsディレクトリにcolor.d.tsファイルを作成する

https://qiita.com/juraruming/items/6ecddd416046ef67fa27#変更点2-typingsディレクトリにcolordtsファイルを作成する

スコープ

購入した本の写経での学びです。

本の各章でスクリプトのリストが掲載されていて、それを写経し、実行し動作確認します。
リストの前後で同じ変数名が使われているとエラーとなりました。

具体的には次のようなケースです。
リスト2-11を写経し、動作確認した後にリスト2-13を写経した場合です。

list2-11.ts
const x1: number = 3;
const x2: number = 0.14;
console.log(x1 + x2);       // 3.14が出力される
list2-13.ts
const x1: number = 10000000;   // 1千万
const x2: number = 10_000_000; // 1千万

console.log(x1);   // 10000000を出力
console.log(x2);   // 10000000を出力

リスト2-13をトランスパイルすると次のエラーとなりました。

$ npx tsc
src/list2-11.ts:1:7 - error TS2451: Cannot redeclare block-scoped variable 'x1'.

1 const x1: number = 3;
        ~~

  src/list2-13.ts:8:7
    8 const x1: number = 10000000;   // 1千万
            ~~
    'x1' was also declared here.

src/list2-11.ts:2:7 - error TS2451: Cannot redeclare block-scoped variable 'x2'.

2 const x2: number = 0.14;
        ~~

  src/list2-13.ts:9:7
    9 const x2: number = 10_000_000; // 1千万
            ~~
    'x2' was also declared here.

src/list2-13.ts:8:7 - error TS2451: Cannot redeclare block-scoped variable 'x1'.

8 const x1: number = 10000000;   // 1千万
        ~~

  src/list2-11.ts:1:7
    1 const x1: number = 3;
            ~~
    'x1' was also declared here.

src/list2-13.ts:9:7 - error TS2451: Cannot redeclare block-scoped variable 'x2'.

9 const x2: number = 10_000_000; // 1千万
        ~~

  src/list2-11.ts:2:7
    2 const x2: number = 0.14;
            ~~
    'x2' was also declared here.


Found 4 errors in 2 files.

Errors  Files
     2  src/list2-11.ts:1
     2  src/list2-13.ts:8

このエラーの解決方法がわからなかったので、変数名が重複する場合は次の処置をしていました。

list2-13.ts
const x1_list2_13: number = 10000000;   // 1千万
const x2_list2_13: number = 10_000_000; // 1千万

console.log(x1_list2_13);   // 10000000を出力
console.log(x2_list2_13);   // 10000000を出力

変数x1、x2の変数名が重複しないようx1_list2_13、x2_list2_13のようにリスト番号をつけるようにしました。
解決方法がわかるまでこのスタイルで本のリストの写経を続けました。
解決方法は下記のリストのとおりでスコープで括ることです。そうすることで他のリストと変数名が重複していてもエラーにならずに済むようになりました。

list2-13.ts
{
    const x1: number = 10000000;   // 1千万
    const x2: number = 10_000_000; // 1千万

    console.log(x1);   // 10000000を出力
    console.log(x2);   // 10000000を出力
}

解決方法がわかったとき後は何も考えず本の写経を行えるようになり楽になったことで印象に残っていました。
また、こんなシンプルなこと、基本的なことも知らなかったのか、と印象に残っていました。

最後に

長文を最後まで読んでいただきありがとうございました🙇
私と同じようなTypeScript未経験の方の何か参考になれば嬉しいです。

GitHubで編集を提案

Discussion