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
WSLでreactの開発環境作った話
Search
S-cubism
September 26, 2018
Technology
0
700
WSLでreactの開発環境作った話
S-cubism
September 26, 2018
Tweet
Share
More Decks by S-cubism
See All by S-cubism
未経験者がAndroidアプリをリリースするまで
scubism
0
130
scubism_LT_20180223_細田謙二_イベントソーシング
scubism
0
160
REVEAL.JSをちょっとだけ使ってみた
scubism
0
260
忙しい人のための仮想通貨
scubism
0
110
サーバ作業の注意コマンド
scubism
0
130
最近勉強してること、次にやりたいこと
scubism
0
110
FOOD TECH
scubism
0
67
Firebase(Realtime Database)について
scubism
0
130
複数会社複数リポジトリでのソース管理
scubism
0
100
Other Decks in Technology
See All in Technology
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
580
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
180
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
3
1.5k
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
220
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
980
プレーリーカードを活用しよう❗❗デジタル名刺交換からはじまるイベント会場交流のススメ
tsukaman
0
170
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
1
230
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
930
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
330
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
350
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
4
2.8k
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
130
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
Agile that works and the tools we love
rasmusluckow
331
21k
A better future with KSS
kneath
239
18k
Optimizing for Happiness
mojombo
379
70k
Why Our Code Smells
bkeepers
PRO
340
57k
Designing Experiences People Love
moore
142
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
How GitHub (no longer) Works
holman
315
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Transcript
WSLで reactの開発環境作った話 テクノロジーアーキテクト本部 松島一樹
Windowsでのreact開発環境について
React開発方法 • 仮想マシンを立てる(virtualbox) • Vagrant+ansibleで簡単に作成できる • シンボリックリンクがあるため共有フォルダが使えない (ホストのエディタから編集できない) • NodeをWindowsに入れる
• 無難そう • Windows Subsystem for Linuxを使う
WSLを使った理由 • Linuxのほうが使い慣れていた • Nodeのバージョン管理ツール(nvm)が使える • Windowsと相互運用しやすそう
Windows Subsystem for Linux ざっくり入門
WSLとは • Windows Subsystem for Linux(通称WSL) • Linux ELF64バイナリの実行環境
仕組み ユーザモード カーネルモード Linux syscall 変換を行う NT syscall [1]画像出典 WSL
System Calls (https://blogs.msdn.microsoft.com/wsl/2016/06/08/wsl-system-calls/)
WSL機能概要 • バックグラウンドプロセスの実行(一部) • 仮想的なLinuxのファイルシステム • ネットワーク通信 • シリアル通信のサポート
ファイルシステム • VolFs • VFSのほとんどの機能をサポート • “/”以下が格納 • Windowsのアプリケーションから触れない(ほうがいい) •
DrvFS • Windowsのファイルと相互運用 • Linuxのアクセス権限は利用できない ver1803からできるようになった • I/Oが遅いといわれている[1] [1] Microsoft、WSLのI/Oパフォーマンス改善に取り組み https://news.mynavi.jp/article/20180815-676572/
対応するディストリビューション など
つかいかた
bash起動方法 • アプリストアのアイコンをクリックする • “ファイル名を指定して実行”で”wsl”
特定のコマンドを実行する • コマンドプロンプトで • Powershellで • Explorerで コマンド 引数
React開発環境
環境構成 React project /mnt/c/Users/user/project/ C:¥Users¥user¥project Visual Studio code 編集 WSL
Ubuntu 18.04 Node 8.11.4 実行 node起動 Debugスクリプトでwslのフラグを立 てるとwslでnodeを起動してくれる ブラウザ localhost:3000 • nodeの実行はwsl上で • プロジェクトのファイルはDrvfsに置く
よかった点 • Linuxでの構築方法を流用できる • エディタ(vscode)から制御できる • ネットワークの設定が不要
悪かった点 • 仮想マシンと比べてビルドが遅い 参考: WSL vs VM for 開発作業(https://qiita.com/satoru_takeuchi/items/a54812806bba0eb48f02) •
コマンドを誤るとwindowsの動作にも影響が出てしまう • 通称fork爆弾.windowsがフリーズする • userのフォルダも削除される? 参考:Windows 10 WSLで『rm -rf /』を実行(https://news.mynavi.jp/article/dont_run_on_linux-3/) $ :(){ :|:& };: $ sudo rm –rf / --no-preserve-root
まとめ Linuxのバイナリを実行できる 動作は遅い 動作確認にはよさそう