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
210
AWS AmplifyではじめるDevOps
ismt7
0
82
VS CodeのDev Containersを活用して開発を効率化しよう
ismt7
1
870
Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門
ismt7
0
97
Visual Studio Code リモート開発 スタートガイド
ismt7
1
50
Visual Studio Codeで始めるリモート開発入門
ismt7
1
530
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
96
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
110
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
82
Other Decks in Technology
See All in Technology
努力家なスクラムマスターが陥る「傍観者」という罠と乗り越えた先に信頼があった話 / 20250830 Takahiro Sasaki
shift_evolve
PRO
2
110
mruby(PicoRuby)で ファミコン音楽を奏でる
kishima
1
360
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
200
Goss: New Production-Ready Go Binding for Faiss #coefl_go_jp
bengo4com
1
1.1k
Goss: Faiss向けの新しい本番環境対応 Goバインディング #coefl_go_jp
bengo4com
1
1.4k
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
shinop
0
120
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
110
実運用で考える PGO
kworkdev
PRO
0
120
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
520
進捗
ydah
1
210
プロダクトの成長に合わせたアーキテクチャの段階的進化と成長痛、そして、ユニットエコノミクスの最適化
kakehashi
PRO
1
110
AIとTDDによるNext.js「隙間ツール」開発の実践
makotot
6
780
Featured
See All Featured
The Language of Interfaces
destraynor
160
25k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
It's Worth the Effort
3n
187
28k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
490
Facilitating Awesome Meetings
lara
55
6.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Agile that works and the tools we love
rasmusluckow
330
21k
Building Applications with DynamoDB
mza
96
6.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
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