TypeScriptを1から勉強する話(読書録独り言)(途中からPython-TypeScript対応表)(読み終わるまで随時更新）

2023年8月3日 18:49

Python: ﾁｮｯﾄﾜｶﾙ, フロントエンド: Vue入門した

筆者について

初めまして！株式会社PantaRhei代表取締役CEOのかずです！

弊社ではAIを用いた営業のアウトバウンドリスト最適化を行なっています。

私個人はデータサイエンティスト/AIエンジニアで、データ分析やAI作成、データ基盤構築などを生業としています。
最近はChatGPTなどの大規模言語モデル(LLM)の登場でAI環境が荒れまくりです。Code Interpreterも登場しデータサイエンスもAIがベースを担う時代が到来しました。余波というか本波が直撃してます。
自分はAIやデータ周り以外もできちゃうエンジニアになっちゃおう。
こうして、フロントエンドも勉強していく運びになりました。

前回はフロントエンドの勉強の最初の一歩として、Vue.jsの入門書を読みました。よかったです。学びになりました。TypeScriptと組み合わせたいです。

ではやっていこう！

結論

Java Scriptを勉強している気分になった

読書録

まずはシンプルにnode.jsをインストールした。(node.jsってなんとなくフレームワークのイメージがあった。JSの実行環境だったのか。ん、JS!?)

npm install -g typescript

としてtypescriptの実行環境を作成する。この手のinstallをするときはdocker、もしくは最低限仮想環境を使わないと、、、と気になる。

プログラミング入門最初のHello Worldをやる。

console.log('Hello World!");

をhelloworld.tsとして、コンパイルする。

tsc helloworld.ts

とすると、、、

helloworld.jsが生成された！(個人的にこれは衝撃だった。コンパイルって、人間語から機械語(バイナリ)に変換する操作だと思っていたので、別言語ファイルを作成するんだなぁと。)

そして最終的にjsを以下のコードで実行する。

node helloworld.js

最後はnodeなのね。jsをやっている感じだ。jsも全く分からないので同時並行的に勉強するとして進んでいく。

セミコロンは付けたほうが良いらしい。
(セミコロンは1行単位であれば付けなくても実行できるが、それは忘れた人のために付与してくれているだけ)

constとletの違いはミュータブルかイミュータブルか。pythonでいうリストかタプルかの違いだね。普通は安全のためにconstを使ったほうが良いらしい。ちなみにvarは公式非推奨らしい。

フォーマット文字列

Python

hensu = "す"
mojiretsu = f"安心してください。履いてま{hensu}よ。"

TypeScript

const hensu = "せん"
const mojiretsu = `安心してください。履いてま${hensu}よ。`

注目すべきはダブル/シングルクオーテーションではなく、バッククオーテーションになっているところ。テンプレートリテラルというらしい。

エスケープの扱い

Python

escape_mojiretsu = "ao@midori\.co\.jp"

TypeScript

const escape_mojiretsu = `ao@midori.co.jp`

テンプレートリテラルの中ではエスケープする必要がない。

インクリメント/デクリメント

Python

ない

TypeScript

num++;
++num;

「++」の位置は優先順位の差。参考

インデントの推奨スペース数は2こ。Pythonは4個だったと記憶。

PythonとTypeScriptの対応表

If文

基本if文

Python

x = 1
y = 2

if x==y:
    print("2つの数は一致しているよ。")
else:
    print("2つの数は一致していないよ。")

TypeScript

const x = 1;
const y = 2;

if (x==y) {
    console.log("2つの数は一致しているよ。");
} else {
    console.log("2つの数は一致していないよ。")
}

else if文

Python

test_score = 80

if test_score >= 90:
    print("秀")
elif test_score >= 80:
    print("優")
elif test_score >= 70:
    print("良"):
elif test_score >= 60:
    print("可")
else:
    print("不可")

TypeScript

const test_score = 80

if (test_score>=90) {
    console.log("秀");
} else if (test_score>=80) {
    console.log("優");
} else if (test_score>=70) {
    console.log("良");
} else if (test_score>=60) {
    console.log("可");
} else {
    console.log("不可");
}

switch分

Python

ない

TypeScript

const x = 5

switch (x) {
    case 1:
        console.log("値は1です！");
    case 2:
        console.log("値は2です!");
    case 3:
        console.log("値は3です!");
    case 4:
        console.log("値は4です！");
    case 5:
        console.log("値は5です!");
}

While文

基本while文

Python

cnt = 0

while cnt <=5:
    print(cnt)
    cnt += 1

TypeScript

let cnt = 0

while (cnt <= 5) {
    console.log(cnt)
    cnt++;

For文

基本for文

Python

for i in range(5):
    print(i)

TypeScript

for (let i=0; i<5; i++) {
    console.log(i);
}

リスト(配列)を用いたfor文

Python

obj_list = ["桃", "みかん", "りんご", "ぶどう", "苺"]
for obj in obj_list:
    print(obj)

TypeScript

const obj_list: string[] = ["桃", "みかん", "りんご", "ぶどう", "苺"]
for (const element of obj_list) {
    console.log(element);
}

連想配列(キー)を用いたfor文

Python

obj_dict = {
    "太郎": 5,
    "花子": 12,
    "一郎": 17,
    "一子" 21
}
for key in obj_dict.keys:
    print(key)

TypeScript

const obj_dict: {[key: string]: number;} = {
    "太郎": 5,
    "花子": 12,
    "一郎": 17,
    "一子" 21
};

for (const element in obj_dict) {
    console.log(element);
}

連想配列(バリュー)を用いたfor文

Python

for value in obj_dict.values:
    print(value)

for (const key in obj_dict) {
    console.log(obj_dict[element]);
}

Mapを用いたfor文(PythonのMapとは異なるので、PythonはDictで実装)

Python

obj_dict = {
    "太郎": 5,
    "花子": 12
}
for key, value in obj_dict.items():
    print(key)
    print(value)

TypeScript

const obj_map = new Map();
obj_map.set("太郎", 5)
obj_map.set("花子": 12)

for (const [key, value] of obj_map) {
    console.log(key)
    console.log(value)
}

関数

基本的な関数(引数, 返り値がある場合)

Python(こんなカチカチに型指定したことないし、返り値や変数が指定と異なっても大丈夫らしい(参考)。大丈夫か。)

def test_func(x: float, y: float = None) -> float:
    ans = x * y
    return ans

TypeScript

function test_func (x: number, y: number = None): number {
    const ans = x * y;
    return ans;
}

可変長変数を引数にとる関数

python

def test_func(*args):
    for i in args:
         print(i)

TypeScript

function test_func (...args) {
    for (const i of args) {
        console.log(i)
}

この記事が気に入ったらサポートをしてみませんか？