Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript/TypeScriptの開発環境を構築してみよう(実行環境 編)
Search
Ishimoto Tatsuya
February 24, 2023
Technology
0
120
JavaScript/TypeScriptの開発環境を構築してみよう(実行環境 編)
JavaScript/TypeScriptを使った開発プロジェクトを始めていくために、必要な開発環境の構築の流れを細く資料として作成したものです
Ishimoto Tatsuya
February 24, 2023
Tweet
Share
More Decks by Ishimoto Tatsuya
See All by Ishimoto Tatsuya
Visual Studio CodeのDev Containersを使って開発環境構築してみよう(2024/09/07版)
ismt7
0
110
AWS AmplifyではじめるDevOps
ismt7
0
42
VS CodeのDev Containersを活用して開発を効率化しよう
ismt7
1
650
Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門
ismt7
0
64
Visual Studio Code リモート開発 スタートガイド
ismt7
1
20
Visual Studio Codeで始めるリモート開発入門
ismt7
1
410
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
57
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
53
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
43
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
48k
【㈱アイモバイル】エンジニア向け会社説明資料
imobile
0
480
v-modelの歩みを振り返る
bengo4com
5
2.4k
LLMOps : ΔMLOps
shuntaito
13
2.1k
VPoE Meetup Vol.1 VPoEとして実践してきたことと反省点
coconala_engineer
2
180
実は仲良し?Amplify Gen2と生成AI
mkdev10
0
150
RDS for Db2 データ移行編 - Part2:S3経由のバックアップ・リストアでデータ移行 /20241011-RDSforDb2-dojo
mayumihirano
0
140
いまいまMySQL2024 @ OSC Nagaoka
sakaik
3
300
안드로이드 기술 이력서의 최소 조건
pluu
1
1.1k
KongによるAPIライフサイクル マネジメント
hashitokyo
1
160
Microsoft 365 でデータセキュリティを強化しよう
sophiakunii
2
480
多数のWebサービスをECS/Fargate構成で効率よく構築・運用するなら copilot-cli
interu
2
170
Featured
See All Featured
Building Your Own Lightsaber
phodgson
102
6k
Agile that works and the tools we love
rasmusluckow
327
21k
It's Worth the Effort
3n
183
27k
Visualization
eitanlees
143
15k
Side Projects
sachag
452
42k
GraphQLとの向き合い方2022年版
quramy
43
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
Testing 201, or: Great Expectations
jmmastey
38
7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
Producing Creativity
orderedlist
PRO
341
39k
Done Done
chrislema
181
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.8k
Transcript
JavaScript/TypeScriptの 開発環境を構築してみよう (実行環境 編) 日本仮想化技術株式会社 VirtualTech.jp 2023/02/24 1
概要 2
• Webブラウザ上で動作するプログラム言語の1つ • クライアントサイドのWeb開発に広く使用されている • JavaScriptは、HTMLやCSSと組み合わせてWebページを動的に操作し、ユーザーのインタラク ション1を処理することができる • 1995年にNetscape Communicationsによって最初に開発された
• Node.js2を使ってJavaScriptでWebアプリケーションのバックエンドを構築することもできる [1] インタラクションとは、ユーザーがWebページ上で操作を行った際に、Webページがその操作に応じて反応することを指す [2] Node.jsとは、サーバーサイドのJavaScriptランタイム 3 JavaScriptとは
• Microsoftが開発したオープンソースのプログラミング言語 • JavaScriptのスーパーセット1となる言語 • JavaScriptの構文に加えて、型アノテーションやクラス、インターフェース、ジェネリック型な どの機能をサポート • 大規模なアプリケーションの開発のために設計 主な特徴:
• 静的型付けによる安全性の向上 • JavaScriptとの互換性 • 開発元が同じなのでVS Code2との相性がいい [1] スーパーセットとは、ある言語が別の言語の構文や機能を取り込んで、それに加えて独自の機能を持っている言語のこと [2] Visual Studio Codeの略 TypeScriptとは 4
実行環境構築 5
Mac編 6
• HomeBrewを使用してanyenvをインストール • anyenvを使用してnodenvコマンドをインストール • nodenvを使用してnodeコマンドをインストール • 各種アップデート 手順 7
aynenvをインストール: • 『brew install anyenv』 anyenvを初期化: • 『anyenv init』 •
コマンド上に表示された「eval ~~」の部分を設定ファイル1に追加 ◦ 『vi ~/.zshrc』 • 設定ファイルの変更内容を反映 ◦ 『source ~/.zshrc』 anyenvインストールの初期化: • 『anyenv install --init』 ◦ 質問が表示されたら『y』と入力 [1] macOSが標準としているzshを使用することを前提にしています HomeBrewでanyenvをインストール 8
nodenvのインストール nodenvをインストール: • 『anyenv install nodenv』 • シェルの再起動 ◦ 『exec
$SHELL -l』 9
インストール可能なバージョンを確認: • 『nodenv install -l』 バージョンを指定してインストール: • 『nodenv install {{バージョン}}』
◦ {{バージョン}}は、一覧で確認した任意のバージョンをインストール ◦ 公式サイトに表示されているLTS版のインストールを推奨 グローバルで設定する場合: • ローカルとグローバルのいずれかのスコープで設定することが可能 • すべてのワークスペースで同じ設定が作用するようにグローバルに設定 • 『nodenv global {{バージョン}}』 ローカルで設定する場合: • 設定したいワークスペースに移動 • 『nodenv local {{バージョン}}』 nodeをインストール 10
nodeコマンドの確認: • 『node -v』 npmコマンドの動作確認: • 『npm -v』 nodeのインストール確認 11
anyenvをアップデート: • 『brew upgrade anyenv』 **envをアップデート: • 『anyenv install --update』
nodeをアップデート: • 『nodenv install {{新しいバージョン}}』 • 『nodenv global {{新しいバージョン}}』 各種アップデート 12
スクリプトでまとめて実行する方法 13 https://gist.github.com/ismt7/82674e3db1927d6f80e056d324f9fc42
Windows編 14
手順 Windowsに開発環境を構築する方法は主に次の方法があります。 1. Windowsにインストールする場合 2. Linux用Windowsサブシステムにインストールする場合(準備中) 15
Windowsにインストール編 16
17
18
19
20
21
22
23
nvmコマンドについて 次のコマンドを上から順に実行してください • 「nvm -h」: ◦ CLIツールのヘルプが表示されたら正常にインストールができています ◦ コマンドが認識されていない場合、ターミナルの再起動することで解決する時があります •
「nvm list available」: ◦ インストール可能なバージョンを確認します ◦ LTSの列に表示されている1番上に表示されているバージョンを後で使用します • 「nvm install {{バージョン}}」: ◦ 前の手順で確認したバージョンを指定してNode.jsをインストールします ◦ インストールしただけでは、nodeコマンドは使用できません • 「nvm use {{バージョン}}」: ◦ インストールしたバージョンを指定して有効化します ◦ このコマンドを実行することでnodeコマンドが使用できるようになります • 「nvm current」: ◦ 現在有効化されているnodeコマンドのバージョンが表示されます 24
nodeコマンド • 「node -v」: ◦ nodeコマンドのバージョンを確認することができます ◦ この操作は、一般的にCLIツールが正常に動作しているかを確認するために実行します • 「npm
-v」: ◦ npmコマンドのバージョンを確認することができます ◦ 上のコマンドと同様にCLIツールが正常に動作しているかを確認するために実行します 25
おわり 26