部活用に作成した資料です。 「#1 基本的なプログラム」を理解してから見ることをお勧めします https://www.slideshare.net/ZOIdayo/1-257348878 VSCodeのインストールです

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

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

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

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

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

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

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

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

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

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

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

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

13. 終わり