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
61
VS CodeのDev Containersを活用して開発を効率化しよう
ismt7
1
750
Visual Studio CodeとGitHub Codespacesで始めるリモート開発入門
ismt7
0
77
Visual Studio Code リモート開発 スタートガイド
ismt7
1
29
Visual Studio Codeで始めるリモート開発入門
ismt7
1
450
これから始めたい人集合! ゼロから学ぶGit_GitHub入門
ismt7
0
73
Visual_Studio_Codeをインストールしよう_Windows編_.pdf
ismt7
0
70
Gitコマンドをインストールする方法①(Windows編)
ismt7
0
60
Other Decks in Technology
See All in Technology
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
280
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
170
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
Share my, our lessons from the road to re:Invent
naospon
0
140
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.7k
Goで作って学ぶWebSocket
ryuichi1208
3
2.8k
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.2k
IAMのマニアックな話2025
nrinetcom
PRO
3
440
AIエージェント入門
minorun365
PRO
31
18k
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
270
手を動かしてレベルアップしよう!
maruto
0
210
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
GraphQLとの向き合い方2022年版
quramy
44
14k
For a Future-Friendly Web
brad_frost
176
9.6k
Docker and Python
trallard
44
3.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Fireside Chat
paigeccino
34
3.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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