![Typescriptを勉強する事になりました。](https://www.popoblog.tech/wp-content/uploads/2023/09/2e5ebb003d35654f33c9219cfb2b1c2e.jpg)
こんにちわ!Popoです。
この記事を読むと「TypeScriptて何?」が解決できます。
新しい仕事に着手する事になりました。
Javaのクライアント・サーバーのアプリケーションの開発案件です。
Javaのアプリケーションは運用・保守、プロジェクトの管理といった対応はいくつも行ってきましたが、開発作業は行ったことがありません。
そのため、ロジックを追う事はできるのですが、開発!する事は初心者と同レベルの状態です。😆
そんな私が、今回JavaやTypeScriptの案件を行う事になり、開発作業も少し行う事になりました。
![](https://www.popoblog.tech/wp-content/uploads/2023/05/cropped-79073d2d475c1194e5648b33dfb42d39.png)
これを機にJavaやTypeScriptのレベルを上げたいですね
これから案件が始めるという状況ですので、一緒に勉強していければと思っています。
![](https://www.popoblog.tech/wp-content/uploads/2023/05/business_man_question.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/05/business_man_question.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/05/business_man_question.png)
TypeScriptて何?
JavaScriptと何が違うの?
こんな疑問が出てくると思います。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VHlwZVNjcmlwdCVFMyU4MiU5MiVFNyU5MiVCMCVFNSVBMiU4MyVFNiVBNyU4QiVFNyVBRiU4OSVFMyU4MiU5MiVFMyU4MSU5NyVFMyU4MSVBNiVFOCVBOSVBNiVFMyU4MSU5NyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MiU4OCVFMyU4MSU4NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9YWE1Y2U5MWExMTRhNTA2ZmQ4MGRjZWYyZjJhZDZiMGQ&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzaGltYWppcmkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWYxZGM1MmFiZTYwMTMyZGJmM2MxNDU3MGZmOTg4MDc0&blend-x=142&blend-y=436&blend-mode=normal&txt64=aW4g44Ko44Or44OQ44O844Kv44Kw44Or44O844OX&txt-width=770&txt-clip=end%2Cellipsis&txt-color=%231E2121&txt-font=Hiragino%20Sans%20W6&txt-size=36&txt-x=156&txt-y=536&s=99f2d0f32584dfc861ce354ce152d8a4)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VHlwZVNjcmlwdCVFMyU4MiU5MiVFNyU5MiVCMCVFNSVBMiU4MyVFNiVBNyU4QiVFNyVBRiU4OSVFMyU4MiU5MiVFMyU4MSU5NyVFMyU4MSVBNiVFOCVBOSVBNiVFMyU4MSU5NyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MiU4OCVFMyU4MSU4NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9YWE1Y2U5MWExMTRhNTA2ZmQ4MGRjZWYyZjJhZDZiMGQ&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzaGltYWppcmkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWYxZGM1MmFiZTYwMTMyZGJmM2MxNDU3MGZmOTg4MDc0&blend-x=142&blend-y=436&blend-mode=normal&txt64=aW4g44Ko44Or44OQ44O844Kv44Kw44Or44O844OX&txt-width=770&txt-clip=end%2Cellipsis&txt-color=%231E2121&txt-font=Hiragino%20Sans%20W6&txt-size=36&txt-x=156&txt-y=536&s=99f2d0f32584dfc861ce354ce152d8a4)
TypeScriptとは
![](https://www.popoblog.tech/wp-content/uploads/2023/09/a156757a5e2f2014aa9c3e6610738bb0.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/09/a156757a5e2f2014aa9c3e6610738bb0.png)
特徴
まずは、「Typescript」て何?ですよね。
こんな表現をされている方がいます。
![TypeScript→型付き](https://www.popoblog.tech/wp-content/uploads/2023/09/20230910-06.jpg)
![TypeScript→型付き](https://www.popoblog.tech/wp-content/uploads/2023/09/20230910-06.jpg)
Javascript言語に、変数等の型を明確にした言語がTypescriptという事ですね。
![](https://www.popoblog.tech/wp-content/uploads/2023/05/business_man_question.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/05/business_man_question.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/05/business_man_question.png)
ふ~ん?
そんな感じですよね😓具体的には!
const strWork = "AAAAA"
let num = 100
var check = true
![](https://www.popoblog.tech/wp-content/uploads/2023/08/8be6e8a52c759e191bee9f656702af30.jpeg)
![](https://www.popoblog.tech/wp-content/uploads/2023/08/8be6e8a52c759e191bee9f656702af30.jpeg)
const strWork:string = "AAAAA"
let num:number = 100
var check:boolean = true
objective-cからSwiftへの移行時も、この変更はありましたね!
メリット、デミリット
表にまとめてみました。
メリット | デメリット |
---|---|
JavaScriptとの互換性がある 型と値が異なるとコンパイルエラーが発生するため、バグを防止できる JavaScriptの知識があれば覚えやすい | 利用者人口がまだ少ない TypeScriptは日本語で読める情報が多くなく、学習に時間がかかる |
私は、Swiftでアプリ開発はできます。
結構似ている部分が多くて取っ付きやすいですね!
TypeScript環境構築
![](https://www.popoblog.tech/wp-content/uploads/2023/09/ac0eba8729b1c4f8e6d27ad8376bc3b0.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/09/ac0eba8729b1c4f8e6d27ad8376bc3b0.png)
はじめはやはり環境構築ですね。
Typescriptに必要な環境を準備してみましょう
Node.js
このNode.jsはプログラミング言語ではなく、「Javascript言語を対象としたオープンソースの実行環境であり、Javascriptの特徴を調整し、機能をアップグレードしたもの」というものになります。
インストールは簡単です。下記の3作業です。
- インストーラーをダウンロード
- インストーラーを実行
- インストールの確認
インストーラーをダウンロード
Node.jsの公式サイトからWindowsインストーラ(.msi)をダウンロードします。
それそれのパソコン環境に合わせてインストーラーを選択します。
![インストールダウンロードサイト](https://www.popoblog.tech/wp-content/uploads/2023/08/1-0.jpg)
![インストールダウンロードサイト](https://www.popoblog.tech/wp-content/uploads/2023/08/1-0.jpg)
![インストーラダウンロード](https://www.popoblog.tech/wp-content/uploads/2023/08/20230805-02.jpg)
![インストーラダウンロード](https://www.popoblog.tech/wp-content/uploads/2023/08/20230805-02.jpg)
インストーラーを実行
インストーラーを実行します。
![node.jsインストール①](https://www.popoblog.tech/wp-content/uploads/2023/08/1-1.jpg)
![node.jsインストール①](https://www.popoblog.tech/wp-content/uploads/2023/08/1-1.jpg)
チェックボックスにチェックして「NEXT」ボタン押下です。
![node.jsインストール②](https://www.popoblog.tech/wp-content/uploads/2023/08/1-2.jpg)
![node.jsインストール②](https://www.popoblog.tech/wp-content/uploads/2023/08/1-2.jpg)
ダウンロード先はそのままです。「NEXT」ボタン押下です。
![node.jsインストール③](https://www.popoblog.tech/wp-content/uploads/2023/08/1-3.jpg)
![node.jsインストール③](https://www.popoblog.tech/wp-content/uploads/2023/08/1-3.jpg)
こちらの画面もデフォルトのままで「NEXT」ボタンを押下します。
![node.jsインストール④](https://www.popoblog.tech/wp-content/uploads/2023/08/1-4.jpg)
![node.jsインストール④](https://www.popoblog.tech/wp-content/uploads/2023/08/1-4.jpg)
ネイティブモジュール用のツールは必要ないのでチェックはつけません。
![node.jsインストール⑤](https://www.popoblog.tech/wp-content/uploads/2023/08/1-5.jpg)
![node.jsインストール⑤](https://www.popoblog.tech/wp-content/uploads/2023/08/1-5.jpg)
インストール開始です。
![node.jsインストール⑥](https://www.popoblog.tech/wp-content/uploads/2023/08/1-6.jpg)
![node.jsインストール⑥](https://www.popoblog.tech/wp-content/uploads/2023/08/1-6.jpg)
![node.jsインストール⑦](https://www.popoblog.tech/wp-content/uploads/2023/08/1-7.jpg)
![node.jsインストール⑦](https://www.popoblog.tech/wp-content/uploads/2023/08/1-7.jpg)
インストール完了です。
![node.jsインストール⑧](https://www.popoblog.tech/wp-content/uploads/2023/08/1-8.jpg)
![node.jsインストール⑧](https://www.popoblog.tech/wp-content/uploads/2023/08/1-8.jpg)
インストールの確認
コマンドプロンプトのコマンドで確認ができます。
バージョンが表示されればOKです。😊
Node –version
![node.jsインストール⑨](https://www.popoblog.tech/wp-content/uploads/2023/08/1-9.jpg)
![node.jsインストール⑨](https://www.popoblog.tech/wp-content/uploads/2023/08/1-9.jpg)
VSCode
VSCodeは、Visual Studio Codeの略で、ソースコードの記述に使う高機能エディタになります。
こちらも簡単です。
- VSCodeインストール
- 日本語化
VSCodeインストール
VSCodeのサイトからインストーラーをダウンロードします。
「Visual Studio Codeをダウンロードする」をクリックします。
![VSCodeインストール①](https://www.popoblog.tech/wp-content/uploads/2023/08/2-0.jpg)
![VSCodeインストール①](https://www.popoblog.tech/wp-content/uploads/2023/08/2-0.jpg)
それそれのパソコン環境に合わせてインストーラーを選択します。
![VSCodeインストール②](https://www.popoblog.tech/wp-content/uploads/2023/08/2-1.jpg)
![VSCodeインストール②](https://www.popoblog.tech/wp-content/uploads/2023/08/2-1.jpg)
![VSCodeインストール③](https://www.popoblog.tech/wp-content/uploads/2023/08/2-2.jpg)
![VSCodeインストール③](https://www.popoblog.tech/wp-content/uploads/2023/08/2-2.jpg)
「同意する」にチェックをして「次へ」のボタンを押下します。
![VSCodeインストール④](https://www.popoblog.tech/wp-content/uploads/2023/08/2-3.jpg)
![VSCodeインストール④](https://www.popoblog.tech/wp-content/uploads/2023/08/2-3.jpg)
インストール先はそのままです。
![VSCodeインストール⑤](https://www.popoblog.tech/wp-content/uploads/2023/08/2-4.jpg)
![VSCodeインストール⑤](https://www.popoblog.tech/wp-content/uploads/2023/08/2-4.jpg)
ショートカット名はお好きな名前に変更してください。
![VSCodeインストール⑥](https://www.popoblog.tech/wp-content/uploads/2023/08/2-5.jpg)
![VSCodeインストール⑥](https://www.popoblog.tech/wp-content/uploads/2023/08/2-5.jpg)
追加タスクもデフォルトのままでいいと思います。
![VSCodeインストール⑦](https://www.popoblog.tech/wp-content/uploads/2023/08/2-6.jpg)
![VSCodeインストール⑦](https://www.popoblog.tech/wp-content/uploads/2023/08/2-6.jpg)
![VSCodeインストール⑧](https://www.popoblog.tech/wp-content/uploads/2023/08/2-7.jpg)
![VSCodeインストール⑧](https://www.popoblog.tech/wp-content/uploads/2023/08/2-7.jpg)
インストール開始です。
![VSCodeインストール⑨](https://www.popoblog.tech/wp-content/uploads/2023/08/2-8.jpg)
![VSCodeインストール⑨](https://www.popoblog.tech/wp-content/uploads/2023/08/2-8.jpg)
インストール完了です。簡単ですね😊
![VSCodeインストール⑩](https://www.popoblog.tech/wp-content/uploads/2023/08/2-9.jpg)
![VSCodeインストール⑩](https://www.popoblog.tech/wp-content/uploads/2023/08/2-9.jpg)
日本語化
こちらも簡単です。
まず、VSCodeを立ち上げます。そして、エクステンションメニューを表示させます。
下記赤枠の拡張機能を選択します。
![エクステンションメニュー](https://www.popoblog.tech/wp-content/uploads/2023/09/20230911-01.jpg)
![エクステンションメニュー](https://www.popoblog.tech/wp-content/uploads/2023/09/20230911-01.jpg)
下記の画面表示になります。
![VSCode日本語化②](https://www.popoblog.tech/wp-content/uploads/2023/08/3-1.jpg)
![VSCode日本語化②](https://www.popoblog.tech/wp-content/uploads/2023/08/3-1.jpg)
入力欄に「japan」と入力していただくと、先頭に「Japanese Language Pack for Visual Studio Code」が表示されます。
これをインストールするだけです。赤枠箇所を押下すればインストールが開始されます。
![](https://www.popoblog.tech/wp-content/uploads/2023/08/3-5.jpg)
![](https://www.popoblog.tech/wp-content/uploads/2023/08/3-5.jpg)
インストールが完了すると下記画面が表示されますので、左下の「Change Language and Restart」ボタンを押下して再起動させます。
![VSCode日本語化④](https://www.popoblog.tech/wp-content/uploads/2023/08/3-3.jpg)
![VSCode日本語化④](https://www.popoblog.tech/wp-content/uploads/2023/08/3-3.jpg)
日本語になっていますね。これで完了です。
![VSCode日本語化⑤](https://www.popoblog.tech/wp-content/uploads/2023/08/3-4.jpg)
![VSCode日本語化⑤](https://www.popoblog.tech/wp-content/uploads/2023/08/3-4.jpg)
まとめ
![まとめ](https://www.popoblog.tech/wp-content/uploads/2023/09/711d04b493d11337f1a7410d7ad9a2fb.png)
![まとめ](https://www.popoblog.tech/wp-content/uploads/2023/09/711d04b493d11337f1a7410d7ad9a2fb.png)
まずは、Typescriptの環境構築についてお話してみました。
私もこれから勉強という事で、結構ワクワクしてます。
老眼で細かな文字がみえずらいえすが、、、、😆😆😆
なんとか頑張ってみたいと思います。
これからTypescriptを勉強していくという方は、一緒にレベルアップできればと思います。
![](https://www.popoblog.tech/wp-content/uploads/2023/05/cropped-79073d2d475c1194e5648b33dfb42d39.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/05/cropped-79073d2d475c1194e5648b33dfb42d39.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/05/cropped-79073d2d475c1194e5648b33dfb42d39.png)
それではまた!