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
160
AWS AmplifyではじめるDevOps
ismt7
0
64
VS CodeのDev Containersを活用して開発を効率化しよう
ismt7
1
760
Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門
ismt7
0
81
Visual Studio Code リモート開発 スタートガイド
ismt7
1
32
Visual Studio Codeで始めるリモート開発入門
ismt7
1
460
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
77
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
75
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
64
Other Decks in Technology
See All in Technology
マルチアカウント環境における組織ポリシーについて まとめてみる
nrinetcom
PRO
2
110
ライフステージの変化を乗り越える 探索型のキャリア選択
tenshoku_draft
2
360
開発者のための FinOps/FinOps for Engineers
oracle4engineer
PRO
2
290
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
250
アウトカムを最大化させるプロダクトエンジニアの動き
hacomono
PRO
0
110
データモデルYANGの処理系を再発明した話
tjmtrhs
0
390
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
570
生成AIがローコードツールになる時代の エンジニアの役割を考える
khwada
0
350
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
10
2.1k
最近のSRE支援ニーズ考察 | sogaoh's LT @ Road to SRE NEXT@札幌
sogaoh
PRO
1
160
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
190
2025/3/1 公共交通オープンデータデイ2025
morohoshi
0
120
Featured
See All Featured
A designer walks into a library…
pauljervisheath
205
24k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
We Have a Design System, Now What?
morganepeng
51
7.4k
The Cult of Friendly URLs
andyhume
78
6.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
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