TypeScriptを1から勉強する話(読書録独り言)(途中からPython-TypeScript対応表)(読み終わるまで随時更新)
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)
}
この記事が気に入ったらサポートをしてみませんか?