VS Codeã䜿ã£ãŠãããšããã¿ãŒããã«æ©èœã£ãŠäŸ¿å©ããã ãã©ããªãã ãé£ãããâŠããšæãããšã¯ãããŸãããïŒå®ã¯ãVS Codeã®ã¿ãŒããã«ã¯ãšãã£ã¿ãŒãšçµ±åãããŠãããäœæ¥ãå¹çåããããã«æé©ãªããŒã«ã§ãã
äŸãã°ããããããšã¯ã¹ãããŒã©ãŒã§ãã¡ã€ã«ãéããããå¥ã®ã¿ãŒããã«ã¢ããªãèµ·åãããããã«ãVS Codeäžã§çŽæ¥ã³ãã³ãæäœãã§ããã®ã§ãäœæ¥ã¹ããŒããæ Œæ®µã«ã¢ããããŸãïŒ
æ¬èšäºã§ã¯ãåå¿è ã§ãè¿·ãã䜿ããããã«ãVS Codeã®ã¿ãŒããã«æ©èœã®åºæ¬æäœãããäœæ¥ãå¹çåãã䟿å©ãªäœ¿ãæ¹ãŸã§ã解説ããŸãããŸããã¡ãªããã»ãã¡ãªããã玹ä»ããã®ã§ãèªåã«åã£ãäœ¿ãæ¹ãèŠã€ããŠãã ããïŒð¡
ð ãã®èšäºã§ãããããš
- VS Codeã®ã¿ãŒããã«ãšã¯ïŒåºæ¬ã®äœ¿ãæ¹
- VS Codeã¿ãŒããã«ã䜿ãã¡ãªããã»ãã¡ãªãã
- ã¿ãŒããã«ãéãæ¹æ³ãšã·ã§ãŒãã«ããããŒ
- ãã䜿ãã³ãã³ããšäŸ¿å©ãªã«ã¹ã¿ãã€ãºæ¹æ³
- äœæ¥å¹çãã¢ãããããã³ã
VS Codeã®ã¿ãŒããã«ã®åºæ¬
VS Codeã®ã¿ãŒããã«ãšã¯ããšãã£ã¿ãŒå ã§çŽæ¥ã³ãã³ããå®è¡ã§ããæ©èœã®ããšã§ããåŸæ¥ã®ã¿ãŒããã«ïŒã³ãã³ãããã³ãããPowerShellãªã©ïŒãšåãããã«äœ¿ããŸãããVS Codeãšçµ±åãããŠãããããç»é¢ã®åãæ¿ããªãã§äœæ¥ãé²ããããã®ãæå€§ã®ã¡ãªããã§ãã
ð ã¿ãŒããã«ã®çš®é¡
VS Codeã§ã¯ã以äžã®ãããªã¿ãŒããã«ãå©çšã§ããŸãã
- PowerShellïŒWindowsæšæºã®ã·ã§ã«ïŒ
- Command PromptïŒcmdïŒïŒWindowsã®ã³ãã³ãããã³ããïŒ
- Bash / ZshïŒMacãLinuxã®ã¿ãŒããã«ã§äœ¿ãããã·ã§ã«ïŒ
- WSLïŒWindows Subsystem for LinuxïŒïŒWindowsã§Linuxç°å¢ã䜿ãå Žåã«äŸ¿å©ïŒ
ð¥ ã¿ãŒããã«ãéãæ¹æ³
ã¿ãŒããã«ãéãã«ã¯ã以äžã®æ¹æ³ããããŸãã
- ã·ã§ãŒãã«ããã㌠â
Ctrl + \
ïŒWindowsïŒ /Cmd + \
ïŒMacïŒ - ã¡ãã¥ãŒããŒããéã â
衚瀺
âã¿ãŒããã«
- ã¯ã€ãã¯ã¢ã¯ã»ã¹ããŒããéã â
Ctrl + Shift + P
ãæŒããŠãã¿ãŒããã«ããæ€çŽ¢
ã¿ãŒããã«ãéããšãç»é¢ã®äžéšã«é»ããŠã£ã³ããŠã衚瀺ãããŸããããã§ã³ãã³ããå ¥åããã°ããšã¯ã¹ãããŒã©ãŒã§æäœããªããŠãããã¡ã€ã«ã®äœæãåé€ãGitã®æäœãªã©ãå¯èœã«ãªããŸãïŒ

VS Codeã¿ãŒããã«ã䜿ãã¡ãªãã
VS Codeã®ã¿ãŒããã«ã䜿ãããšã§ãäœæ¥å¹çãå€§å¹ ã«åäžããŸããããã§ã¯ãç¹ã«äŸ¿å©ãªãã€ã³ãã玹ä»ããŸãïŒâš
ð äœæ¥å¹çãã¢ããïŒã³ãã³ãã§çŽ æ©ãæäœã§ãã
ããŠã¹ã§ãã¡ã€ã«ãéãããããšã¯ã¹ãããŒã©ãŒã§ãã©ã«ããç§»åãããããããããã³ãã³ãã䜿ãã°äžç¬ã§ç®çã®æäœãå¯èœã§ãã
äŸãã°ã
mkdir new-project
cd new-project
touch index.html
ãã®3è¡ãå®è¡ããã ãã§ãæ°ãããããžã§ã¯ããã©ã«ããäœæãããã®äžã« index.html
ãšãããã¡ã€ã«ãäœæã§ããŸããGUIã§äžã€ãã€æäœããããããå§åçã«ã¹ããŒãã£ãŒã§ããïŒ
ð¥ïž ãšãã£ã¿ãŒãšäžäœåããŠããŠç»é¢ã®åãæ¿ãäžèŠ
éåžžã®ã¿ãŒããã«ïŒã³ãã³ãããã³ãããMacã®ã¿ãŒããã«ãªã©ïŒã䜿ããšããšãã£ã¿ãŒãšã¿ãŒããã«ãè¡ãæ¥ããå¿ èŠããããäœæ¥ãåæãããŠããŸããŸãã
VS Codeãªãããšãã£ã¿ãŒãšã¿ãŒããã«ãåãç»é¢ã«ãããããã³ãŒããæžããªããããã«ã³ãã³ããå®è¡ã§ããŸããç¹ã«éçºäœæ¥ã§ã¯ã以äžã®ãããªæäœãã¹ã ãŒãºã«ã§ããŸãã
npm start
ã§éçºãµãŒããŒãèµ·ågit commit -m "fix bug"
ã§ã³ãŒããã³ãããnode index.js
ã§ã³ãŒãã®å®è¡
ð¡ Gitã®æäœãç°¡åã«ã§ãã
VS Codeã®ã¿ãŒããã«ã䜿ãã°ãGitã®æäœããšãã£ã¿ãŒäžã§å®çµããŸããäŸãã°ããªããžããªã®ç¶æ ã確èªããã«ã¯ä»¥äžã®ã³ãã³ããå®è¡ããã ãã
git status
ãŸãã倿Žã远å ããŠã³ãããããã«ã¯ã
git add .
git commit -m "æŽæ°å
容ãèšè¿°"
ãšå ¥åããã°OKïŒ GUIããŒã«ãªãã§ãããã¹ãŠã®Gitæäœãå¯èœã§ãã
â¡ ã·ã§ãŒãã«ããããŒã§çŽ æ©ãééã§ãã
VS Codeã§ã¯ãã¿ãŒããã«ãã·ã§ãŒãã«ããããŒã§äžç¬ã§ééã§ããŸãã
Ctrl + \``ïŒWindowsïŒ /
Cmd + “ïŒMacïŒ â ã¿ãŒããã«ã®ééCtrl + Shift + 5
â æ°ããã¿ãŒããã«ã远å
ãã®ããã«ã·ã§ãŒãã«ãããæŽ»çšããã°ãããŠã¹ã䜿ããã«äœæ¥ãé²ããããã®ã§ãéçºã¹ããŒããæ Œæ®µã«åäžããŸãïŒ

VS Codeã¿ãŒããã«ã®ãã¡ãªãã
VS Codeã®ã¿ãŒããã«ã¯äŸ¿å©ã§ããã䜿ãããªãã«ã¯ããã€ã泚æç¹ããããŸããã¡ãªããã ãã§ãªãããã¡ãªããããã£ããææ¡ããŠãããŸããããâ ïž
ð ã³ãã³ããèŠããå¿ èŠããã
GUIïŒã°ã©ãã£ã«ã«ã»ãŠãŒã¶ãŒã»ã€ã³ã¿ãŒãã§ãŒã¹ïŒã§ã¯ããã¿ã³ãã¯ãªãã¯ããã ãã§æäœã§ããŸãããã¿ãŒããã«ã§ã¯ã³ãã³ããçŽæ¥å ¥åããå¿ èŠããããŸãã
äŸãã°ããã¡ã€ã«ãåé€ããå ŽåïŒ
rm filename.txt
ãšå ¥åããªããã°ãªããŸããã
åå¿è ã®ãã¡ã¯ããã䜿ãã³ãã³ããèŠããã®ã倧å€ã§ãããæ £ãããšå§åçã«éãäœæ¥ã§ããããã«ãªããŸãïŒ
ð ãšã©ãŒãçºçãããšå¯ŸåŠãé£ãã
ã¿ãŒããã«ã§ã³ãã³ããå®è¡ãããšãééã£ãå ¥åãç°å¢èšå®ãã¹ã§ãšã©ãŒãçºçããããšããããŸãã
äŸãã°ãcd
ã³ãã³ãã§ååšããªããã©ã«ãã«ç§»åããããšãããšïŒ
cd nonexistent-folder
bash: cd: nonexistent-folder: No such file or directory
ãšãã£ããšã©ãŒã衚瀺ãããŸãã
ãšã©ãŒã®å 容ããã£ããèªãã§å¯ŸåŠããå¿ èŠããããããåå¿è ã«ãšã£ãŠã¯å°ãããŒãã«ãé«ããããããŸããã
ð» GUIæäœã«æ £ããŠãã人ã«ã¯ããŒãã«ãé«ã
æ®æ®µãWindowsã®ãšã¯ã¹ãããŒã©ãŒãMacã®Finderã§ãã¡ã€ã«ç®¡çãããŠãã人ã«ãšã£ãŠã¯ãã¿ãŒããã«æäœã¯å°ãé¢åã«æãããããããŸããã
ããããã¿ãŒããã«ã䜿ãããšã§äœæ¥å¹çãé£èºçã«åäžããã®ã§ãå°ããã€ã§ãã³ãã³ãæäœã«æ £ããŠããã®ãããããã§ãïŒðª
âïž PowerShellãBashã®èšå®ãå¿ èŠãªå Žåããã
ããã©ã«ãã®ã¿ãŒããã«ã¯OSã«ãã£ãŠç°ãªããŸãã
- Windows â PowerShell ãããã©ã«ã
- Mac / Linux â Bash ãããã©ã«ã
ãã Bash
ã䜿ãããã®ã« PowerShell
ãéããŠããŸãå Žåãèšå®ã倿Žããå¿
èŠããããŸãã
VS Codeã§ã¯ãã¿ãŒããã«ã®ããã©ã«ãã·ã§ã«ãç°¡åã«å€æŽã§ããŸãã
èšå®æé
Ctrl + Shift + P
ïŒMacã¯Cmd + Shift + P
ïŒãæŒã- ã
Terminal: Select Default Profile
ããšå ¥åããŠéžæ - 奜ããªã·ã§ã«ïŒPowerShell / Bash / Zsh ãªã©ïŒãéžæ
ããããããšã§ãèªåã«åã£ãç°å¢ã§å¿«é©ã«ã¿ãŒããã«ã䜿ãããšãã§ããŸãïŒâš
VS Codeã¿ãŒããã«ã®äŸ¿å©ãªäœ¿ãæ¹
VS Codeã®ã¿ãŒããã«ã¯åºæ¬çãªäœ¿ãæ¹ã ãã§ãªããã·ã§ãŒãã«ãããã«ã¹ã¿ãã€ãºã掻çšããããšã§ãããã«äŸ¿å©ã«äœ¿ãããšãã§ããŸãïŒ ããã§ã¯ãäœæ¥å¹çãUPãããæ¹æ³ã玹ä»ããŸããð¡
ã·ã§ãŒãã«ããããŒã掻çšãã
ã¿ãŒããã«ããã°ããæäœããã«ã¯ãã·ã§ãŒãã«ããããŒã䜿ãã®ãäžçªã§ãã
æäœ | ã·ã§ãŒãã«ããããŒïŒWindowsïŒ | ã·ã§ãŒãã«ããããŒïŒMacïŒ |
---|---|---|
ã¿ãŒããã«ãéãã»éãã | `Ctrl + “ | `Cmd + “ |
æ°ããã¿ãŒããã«ãéã | Ctrl + Shift + 5 | Cmd + Shift + 5 |
ã¿ãŒããã«ãåãæ¿ãã | Ctrl + Tab | Cmd + Tab |
ã¿ãŒããã«ãã¯ãªã¢ãã | Ctrl + L ãŸã㯠clear ã³ãã³ã | Cmd + K |
ã·ã§ãŒãã«ãããèŠããŠãããšãããŠã¹æäœãæžãããŠäœæ¥ãã¹ã ãŒãºã«ãªããŸãïŒð¡
ããã©ã«ãã®ã¿ãŒããã«ã倿Žãã
VS Codeã§ã¯ãããã©ã«ãã®ã¿ãŒããã«ïŒPowerShell / Bash / Zsh ãªã©ïŒã倿Žã§ããŸãã
æé
Ctrl + Shift + P
ïŒMacã¯Cmd + Shift + P
ïŒãæŒã- ã
Terminal: Select Default Profile
ããæ€çŽ¢ããŠéžæ - 䜿çšãããã¿ãŒããã«ïŒPowerShell / Bash / Zsh ãªã©ïŒãéžæ
äŸãã°ãWindowsã®PowerShellãããGit Bashã®ã»ãã䜿ãããã人ã¯ããã®æ¹æ³ã§ç°¡åã«åãæ¿ãå¯èœã§ãïŒ
è€æ°ã®ã¿ãŒããã«ãåæã«éãæ¹æ³
éçºäžã«ãè€æ°ã®ã¿ãŒããã«ãåæã«äœ¿ãããããšã¯ãããããŸããäŸãã°ã1ã€ã¯npm run dev
ïŒãµãŒããŒèµ·åçšïŒããã1ã€ã¯git commit
ãªã©ã®ããŒãžã§ã³ç®¡ççšãšãã£ãäœ¿ãæ¹ãå¯èœã§ãã
æ°ããã¿ãŒããã«ãéãæ¹æ³
Ctrl + Shift + 5
ïŒMacã¯Cmd + Shift + 5
ïŒã§æ°ããã¿ãŒããã«ã远å- æ¢åã®ã¿ãŒããã«ã® ã+ããã¿ã³ ãã¯ãªãã¯
- ã¿ãŒããã«ã®äžéšã¿ããã¯ãªãã¯ããŠåãæ¿ã
ãããæŽ»çšããã°ãäœæ¥ããšã«ã¿ãŒããã«ãåããŠç®¡çã§ããã®ã§äŸ¿å©ã§ãïŒ
ã¿ãŒããã«ã®ã«ã¹ã¿ãã€ãºïŒãã©ã³ããµã€ãºã»ã«ã©ãŒå€æŽïŒ
VS Codeã®ã¿ãŒããã«ã¯ããã©ã³ããµã€ãºãã«ã©ãŒã倿ŽããŠãèªå奜ã¿ã«ã«ã¹ã¿ãã€ãºã§ããŸãã
èšå®æ¹æ³
Ctrl + Shift + P
ïŒMacã¯Cmd + Shift + P
ïŒãæŒã- ã
Preferences: Open Settings (JSON)
ããæ€çŽ¢ããŠéã - 以äžã®èšå®ã远å
"terminal.integrated.fontSize": 14,
"terminal.integrated.cursorStyle": "underline",
"terminal.integrated.defaultProfile.windows": "Git Bash",
ãã©ã³ããµã€ãºã倿Žããããã«ãŒãœã«ã®åœ¢ãå€ãããããããšã§ãèªåã«ãšã£ãŠäœ¿ããããã¿ãŒããã«ç°å¢ãäœãããšãã§ããŸãïŒ âš
ãã䜿ãVS Codeã¿ãŒããã«ã®ã³ãã³ã
ã¿ãŒããã«ã䜿ãããªãã«ã¯ãåºæ¬ã®ã³ãã³ããèŠããŠããããšã倧åã§ããããã§ã¯ããã䜿ãã³ãã³ãããŸãšããŸããã
ãã£ã¬ã¯ããªæäœ
ã³ãã³ã | 説æ |
---|---|
pwd | çŸåšã®ãã£ã¬ã¯ããªïŒãã©ã«ãïŒã衚瀺 |
ls ïŒMac/LinuxïŒ / dir ïŒWindowsïŒ | ãã£ã¬ã¯ããªå ã®ãã¡ã€ã«ã»ãã©ã«ããäžèŠ§è¡šç€º |
cd ãã©ã«ãå | æå®ãããã©ã«ããžç§»å |
cd .. | 1ã€äžã®ãã©ã«ããžç§»å |
ãã¡ã€ã«ã»ãã©ã«ãæäœ
ã³ãã³ã | 説æ |
---|---|
touch ãã¡ã€ã«å | æ°ãããã¡ã€ã«ãäœæ |
mkdir ãã©ã«ãå | æ°ãããã©ã«ããäœæ |
rm ãã¡ã€ã«å | ãã¡ã€ã«ãåé€ |
rmdir ãã©ã«ãå | ãã©ã«ããåé€ïŒç©ºã®ãã©ã«ãã®ã¿ïŒ |
Gitã®åºæ¬æäœ
ã³ãã³ã | 説æ |
---|---|
git init | Gitãªããžããªãäœæ |
git status | çŸåšã®ãªããžããªã®ç¶æ ãç¢ºèª |
git add . | 倿Žããã¹ãŠã¹ããŒãžã³ã° |
git commit -m "ã³ã¡ã³ã" | 倿Žãã³ããã |
git push origin main | ãªã¢ãŒããªããžããªãžå€æŽãããã·ã¥ |
Gitãã¿ãŒããã«ã§æäœããã°ãVS Codeäžã§ããŒãžã§ã³ç®¡çãã¹ã ãŒãºã«ã§ããŸãïŒð¡
VS Codeã¿ãŒããã«ããã£ãšäŸ¿å©ã«ïŒæ¡åŒµæ©èœã掻çš
ããã«äœæ¥ãå¿«é©ã«ããã«ã¯ãæ¡åŒµæ©èœã掻çšããã®ãããããã§ãïŒ
ããããæ¡åŒµæ©èœ
æ¡åŒµæ©èœå | 説æ |
---|---|
Oh My Zsh | BashãZshãã«ã¹ã¿ãã€ãºãããããã |
GitLens | Gitã®å±¥æŽã倿ŽãèŠèŠçã«è¡šç€º |
Terminal Tabs | ã¿ãŒããã«ãã¿ã管çã§ãã |
ShellCheck | ã·ã§ã«ã¹ã¯ãªããã®ãšã©ãŒãæ€åº |
æ¡åŒµæ©èœãå ¥ãããšãVS Codeã®ã¿ãŒããã«ãããã«ãã¯ãŒã¢ããããŸãïŒ
ãŸãšã
- VS Codeã®ã¿ãŒããã«ã¯ãã³ãã³ãæäœããšãã£ã¿ãŒå ã§è¡ãã䟿å©ãªæ©èœ
- ã¡ãªãã â äœæ¥å¹çã¢ãããGitæäœãã¹ã ãŒãºãã·ã§ãŒãã«ããããŒã§çŽ æ©ãéé
- ãã¡ãªãã â ã³ãã³ããèŠããå¿ èŠãããããšã©ãŒå¯ŸåŠãé£ãã
- 䟿å©ãªäœ¿ãæ¹ â ã·ã§ãŒãã«ããããŒã®æŽ»çšãããã©ã«ãã¿ãŒããã«ã®å€æŽãè€æ°ã¿ãŒããã«ã®åæå©çš
- åºæ¬ã®ã³ãã³ããèŠããã°ãããå¿«é©ã«äœæ¥ãã§ããïŒ
ð ãŸãã¯ç°¡åãªã³ãã³ããã詊ããŠãå°ããã€æ £ããŠãããŸãããïŒð
