はじめてのプログラミングエディタ入門（小学校高学年〜中学生向け）
これからプログラミングを始める方向けに、「プログラミングエディタとは何か」と「おすすめの無料エディタ」、そして「インストール方法」を分かりやすく紹介します。
エディタとは何か
エディタ（エディター）とは、プログラムを書くためのソフトのことです。
ノートやメモ帳のように文字を書くための道具ですが、プログラミング用のエディタには次のような便利な機能があります。
- プログラムの内容ごとに色が変わる
- 書き間違いに気づきやすい
- 入力をサポートしてくれる
こうした機能のおかげで、プログラムを正しく、効率よく書くことができます。
今回は、JavaScriptを書くときに使えるエディタにしぼって紹介します。
無料で使えるおすすめエディタ（JavaScript対応）
初心者でも使いやすい無料エディタを3つ紹介します。
- Visual Studio Code（ビジュアル スタジオ コード）
- Notepad++（ノートパッドプラスプラス）
- CotEditor（コットエディター）
① Visual Studio Code（ビジュアル スタジオ コード）
特徴
Visual Studio Codeは、世界中で使われている人気のエディタです。
JavaScriptとの相性もよく、これからしっかり学びたい人におすすめです。
- コードに色がついて見やすい
- 入力補助機能が充実している
- 拡張機能で機能を追加できる
インストール方法
-
公式サイトにアクセス
https://code.visualstudio.com/ -
「Download」をクリック
-
ダウンロードしたファイルを開く
-
画面の指示に従ってインストール
自分のユーザー領域にインストールする方法
Visual Studio Codeは、パソコン全体ではなく「自分のユーザー領域」にだけインストールすることもできます。
この方法なら管理者のパスワードがいらないので、学校や家族共用のパソコンでも使いやすくなります。
Windowsの場合
-
公式サイトのダウンロードページにアクセス
https://code.visualstudio.com/Download -
Windows用のダウンロードボタンの横にある矢印を開き、「User Installer」（x64 または Arm64）を選んでダウンロード
-
ダウンロードしたファイル（
.exe）を開いてインストール
管理者の許可を求める画面は出ず、C:\Users\<ユーザー名>\AppData\Local\Programs\Microsoft VS Code にインストールされます。
Macの場合
Macには「User Installer」はありませんが、アプリを置く場所を変えるだけでユーザー領域にインストールできます。
-
公式サイトからMac用の
.zipファイルをダウンロードして解凍 -
出てきた
Visual Studio Code.appを、パソコン全体の「アプリケーション」フォルダ（/Applications）ではなく、自分のホームフォルダにある「アプリケーション」フォルダ（~/Applications）にドラッグ＆ドロップ
※~/Applications フォルダがない場合は、ホームフォルダの中に「Applications」という名前のフォルダを新しく作ってください。
② Notepad++（ノートパッドプラスプラス）
特徴
Notepad++は、シンプルで軽く動くエディタです。
見た目はシンプルですが、プログラミングに必要な機能はしっかりそろっています。
- 動作がとても軽い
- インストールが簡単
- JavaScriptにも対応
- 初心者でも扱いやすい
※Windows専用のソフトです（Macでは使用できません）。
難しい設定をせずに、すぐに使い始められるのが特徴です。
インストール方法
-
公式サイトにアクセス
https://notepad-plus-plus.org/ -
「Download」をクリック
-
ダウンロードしたファイルを開く
-
画面の指示に従ってインストール
自分のユーザー領域にインストールする方法
Notepad++には、インストールしないで使える「ポータブル版」があります。
自分のフォルダに置くだけで使えるので、管理者のパスワードがいらず、学校や家族共用のパソコンでも使いやすくなります。
-
公式サイトのダウンロードページにアクセスし、いちばん新しいバージョンをクリック
https://notepad-plus-plus.org/downloads/ -
「Portable」の zip ファイルをダウンロード
ふつうのパソコンなら、名前に「x64」が入っているもの（例：npp.8.9.8.1.portable.x64.zip）を選びます。 -
ダウンロードしたzipファイルを右クリックして「すべて展開」を選び、自分のフォルダ（例：
C:\Users\<ユーザー名>\Notepad++）に展開 -
展開したフォルダの中にある
notepad++.exeをダブルクリックすると起動します
※インストールしないので、スタートメニューには登録されません。notepad++.exe を右クリックして「スタートにピン留めする」を選んでおくと、次から起動しやすくなります。
③ CotEditor（コットエディター）
特徴
CotEditorは、Mac用のシンプルで軽く動くエディタです。
日本で開発されているので、メニューや説明がすべて日本語で分かりやすいのが特徴です。
- 動作が軽く、すぐに起動できる
- メニューが日本語で分かりやすい
- JavaScriptのコードにも色がつく
- 初心者でも扱いやすい
※Mac専用のソフトです（Windowsでは使用できません）。
インストール方法
-
Macの「App Store」を開く
-
検索欄に「CotEditor」と入力して検索
-
「入手」をクリック
-
インストールが終わったら「開く」をクリック
※公式サイト: https://coteditor.com/
自分のユーザー領域にインストールする方法
App Storeではなく配布ページからダウンロードすれば、CotEditorも「自分のユーザー領域」にインストールできます。
管理者のパスワードがいらないので、学校や家族共用のMacでも使いやすくなります。
-
CotEditorの配布ページ（GitHub）にアクセス
https://github.com/coteditor/CotEditor/releases/latest -
「Assets」の中にある
CotEditor_バージョン番号.dmgをクリックしてダウンロード -
ダウンロードしたファイルを開く
-
出てきた
CotEditor.appを、パソコン全体の「アプリケーション」フォルダ（/Applications）ではなく、自分のホームフォルダにある「アプリケーション」フォルダ（~/Applications）にドラッグ＆ドロップ
※~/Applications フォルダがない場合は、ホームフォルダの中に「Applications」という名前のフォルダを新しく作ってください。
どれを選べばいい？
はじめての方には、Visual Studio Code がおすすめです。
使っている人が多く、困ったときに調べやすいのがポイントです。
そのままステップアップしても使い続けられます。
まとめ
プログラミングを始めるには、まずエディタを用意することが大切です。
今回紹介した3つはすべて無料で使えます。
- Visual Studio Code（ビジュアル スタジオ コード）：迷ったらこれ
- Notepad++（ノートパッドプラスプラス）：軽くて手軽（Windows専用）
- CotEditor（コットエディター）：日本語で分かりやすい（Mac専用）
まずは一つインストールして、実際にコードを書いてみてください。
やってみることが一番の近道です。
こちらがおすすめ！
中学生から JavaScript が学べる「ぐらみんこーど」にチャレンジしてみませんか？