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
150
AWS AmplifyではじめるDevOps
ismt7
0
60
VS CodeのDev Containersを活用して開発を効率化しよう
ismt7
1
750
Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門
ismt7
0
77
Visual Studio Code リモート開発 スタートガイド
ismt7
1
28
Visual Studio Codeで始めるリモート開発入門
ismt7
1
450
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
73
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
67
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
60
Other Decks in Technology
See All in Technology
Building Products in the LLM Era
ymatsuwitter
10
5k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
350
Helm , Kustomize に代わる !? 次世代 k8s パッケージマネージャー Glasskube 入門 / glasskube-entry
parupappa2929
0
210
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
1.1k
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
RSNA2024振り返り
nanachi
0
530
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
500
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
2
1.3k
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
140
Amazon S3 Tablesと外部分析基盤連携について / Amazon S3 Tables and External Data Analytics Platform
nttcom
0
120
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
390
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
230
Featured
See All Featured
Faster Mobile Websites
deanohume
306
31k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
The Invisible Side of Design
smashingmag
299
50k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
KATA
mclloyd
29
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Automating Front-end Workflow
addyosmani
1367
200k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.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