---
title: プログラミング講座 #3 コードを書く
tags: 
author: [ZOI_dayo](https://convert.docswell.com/user/ZOI_dayo)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/Y76N9G9P7V.jpg?width=480
description: 部活用に作成した資料です。 「#1 基本的なプログラム」を理解してから見ることをお勧めします https://www.docswell.com/s/ZOI_dayo/ZENXWG-Programming-01  VSCodeのインストールです
published: April 17, 23
canonical: https://convert.docswell.com/s/ZOI_dayo/5NR1NW-Programming-03
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/Y76N9G9P7V.jpg)

プログラミング講座
#3 コードを書く
@ZOI_dayo


# Page. 2

![Page Image](https://bcdn.docswell.com/page/G755NVNP74.jpg)

コード読めるけど実行できないんだが
実行したり書いたりする準備がめんどくさいので放置してました...(すみません)
基本的に、
エディタでコードを書く→ 実行する ( → バグ直したり改良したり→ もう一回実行 → … )
の流れ
※ #1「基本的なプログラム」は理解しておいてください


# Page. 3

![Page Image](https://bcdn.docswell.com/page/9J2N535ZER.jpg)

1. エディタのインストール
Windowsに元から入っている「メモ帳」を使うこともできるけど...やめた方がいい
初心者でもプロ用のエディタを使うべき!
なぜ → まともなエディタを使ったらコード書く時に手伝いをしてくれる!


# Page. 4

![Page Image](https://bcdn.docswell.com/page/DEYPK1KNEM.jpg)

1. エディタのインストール
使いやすいエディタ色々あるけど、とりあえず「Visual Studio Code」を使っとけばいい
https://code.visualstudio.com/
からダウンロード → インストール


# Page. 5

![Page Image](https://bcdn.docswell.com/page/VJN5R2RV78.jpg)

1. エディタのインストール
開く
こんな感じ →


# Page. 6

![Page Image](https://bcdn.docswell.com/page/YE9YM1MVJ3.jpg)

2. コードを書く
「ファイル」→「新しいテキストファイル」
を押すと空っぽのファイルが出てくる
適当に書いてみよう


# Page. 7

![Page Image](https://bcdn.docswell.com/page/GE86L4L47D.jpg)

2. コードを書く
こんな感じになる
(色つけたりヒント出したりしてくれる)
「ファイル」→「保存」で保存できる


# Page. 8

![Page Image](https://bcdn.docswell.com/page/LEL9L6LVJR.jpg)

3. コードを実行する
コードの実行は思ったより大変...
JavaScriptとかPythonとかをシンプルに動かすにはコマンドライン(黒い画面)
使わないといけない...
JavaScriptなら、(ちょっと面倒だけど)簡単に実行する方法があるのでそれを紹介


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4JMZM5MNEW.jpg)

3. コードを実行する
まずはChrome(EdgeやFireFoxでもいい)を開く
そこで右上「…」から「その他のツール」
→「デベロッパーツール」
(またはF12キーを押してもいけるはず)


# Page. 10

![Page Image](https://bcdn.docswell.com/page/PJR6V3V479.jpg)

3. コードを実行する
こんなのが出てくるので、(上部の「コンソール」を押す)
青色の「&gt;」のところにコードをVSCodeからコピペ
そしてEnterで実行
実行される!


# Page. 11

![Page Image](https://bcdn.docswell.com/page/PEXMZ4ZZ7X.jpg)

(余談) VSCode以外のエディタは?
もちろんVSCode以外のエディタもあって、それぞれに個性があるから好きなのを使えばいい
有名なものは...
シンプルで機能が少ないけど、軽くて使いやすい
Sublime、CotEditor
Vim、Emacs
シンプルで軽く機能も多い、ただし操作が異次元に難しい
Visual Studio、Eclipse、XCode
機能全部のせ、ただし重い
Jetbrains系
機能全部のせ、言語ごとに特化、重い、有料(学割で無料)
他にも色々あるから、ぜひお気に入りのエディタを探してみよう


# Page. 12

![Page Image](https://bcdn.docswell.com/page/3EKG8Z8VJD.jpg)

まとめ
テキストエディタ(VSCode)のインストール、あとChromeの開発者ツールを使って
JavaScriptを実行する話でした
VSCodeはめちゃくちゃ機能が多いので、慣れていくにつれて楽にコードが書けるように
なります〜


# Page. 13

![Page Image](https://bcdn.docswell.com/page/L73N2DMQ75.jpg)

終わり


