エディタのインストール
エディタのインストールについてご説明いたします。
ご自分でなじみのエディタ(Dreamweaverなどウェブページ編集用ソフトも含む)をお持ちの方はあらためて別のエディタをインストールしていただく必要はありません。日頃お使いでないパソコンをお使いいただく場合は、新しい環境でHTMLファイルの編集に慣れておいてください。
Windowsの「メモ帳」やMacの「テキストエディット(TextEdit)」は非推奨です。「ワード」などのワープロソフトは使わないでください。これらのアプリは、JavaScriptなどのプログラミングには向いていません。
まだエディタを使ったことがない方は次の手順でインストールしてから問題に取り組んでください。
Windowsの場合も、Macの場合もVisual Studio Code(略してVS Code)を使っている人が多いようです。ただ、初心者の方には少しむずかしいので、いきなりだと辛いと思いますので、最初は下記のエディタをお使いになるのがよいかと思います。
Windowsの場合
-
こちらからサクラエディタをダウンロードしてご利用ください(もしリンクが切れているようでしたら「サクラエディタ」を検索してダウンロードしてください。もし見つからないようでしたら、講師までご連絡ください)。
「最新版ダウンロード」の下にある「インストーラ、パッケージダウンロード」をクリックして、「Ver2.4.0」(あるいは最新版。betaと書いてあるのはおすすめしません)の下にある ...installer.zip ファイルをクリックしてダウンロード、インストールしてご利用ください。
ダウンロードするファイルは、下記のような名前になっています。sakura-tag-v2.4.0-build2686-782347a-Win32-Release-Installer.zip
次のような名前のファイルを実行してインストールしてください。sakura_install2-4-0-2686-x86.exe
-
[設定]→[フォント設定]でフォントや文字の大きさを変更できます。
対面の講座を受講なさる方は、講師が拝見することがあるため少し大きめにしておいていただくと助かります。
なお、「MS ゴシック」などのいわゆる「等幅フォント」のほうが引用符などの全角・半角の区別が付きやすいのでおすすめです(標準では「MS ゴシック」になっていると思いますが、半角文字と全角文字の区別が付きにくいようでしたら確認してください)。 - また、[設定]→[折り返し方法]で[右端で折り返す]を選択しておいたほうがよいでしょう。
Macの場合
- CotEditorをAppStoreからダウンロードしてご利用ください。
-
[CotEditor]→[環境設定]→[表示]でフォントを選択すると文字の大きさを変更できます。「等幅フォント」を選んでおくと引用符などの全角・半角の区別がしやすいので、おすすめです(たとえば、「Osaka-等幅」)。
対面の講座を受講なさる方は、講師が拝見することがあるため少し大きめにしておいていただくと助かります。 - 画面上部の「シンタックス」から[JavaScript]を選択するとキーワードが別の色で表示されて便利です。
もし、CotEditorがうまく動かないようでしたら、miをインストールしてみてください([mi]メニューの[モード毎の設定...]→[標準]を選択すると、文字サイズを変更できます)。
ある程度慣れたら、少し高機能のエディタを使われると能率が上がります。JavaScriptプログラムの編集には、Visual Studio Code などがおすすめです(ただし少し取っつきにくい所がありますので、最初はCotEditorなど単純なエディタを使われるほうがよいかと思われます)。
各募集サイトのページに書いてありますように、HTMLの基本をご存じの方が対象の講座です。もし、ご存じでない方は、前もって講師が書いた次のコラムの第1章と第2章をお読みいただくことをおすすめします(所要時間30分程度) —— JavaScriptで学ぶ 文系の人にもわかるプログラミング入門。
なお、「入門編」はHTMLの知識がない方にも(ある程度)おわかりいただけるように進めますので、ご安心ください。
やむを得ず「メモ帳」や「テキストエディット」を使う場合
新たにアプリをインストールできないパソコンしか使えないなど、やむを得ない場合は「メモ帳」や「テキストエディット」をご利用ください。
Windowsの「メモ帳」を使う場合
- Windowsで「メモ帳」を使う場合は、画面左下の[スタート]メニューから[Windows アクセサリ]→[メモ帳]の順に選ぶことで起動できます
- 既にあるファイル(たとえば function.html)を開く場合は、そのファイルを右クリックして、[プログラムから開く]で「メモ帳」が表示されればそれを選択。「メモ帳」が表示されなければ[別のプログラムを選択]を選んで表示される選択肢から「メモ帳」を選択してください
-
ファイルに名前を付けて保存する場合は次のようにします
- [ファイル]→[名前を付けて保存...]を選択してダイアログボックスを表示します
- [ファイルの種類]を[すべてのファイル(*.*)]に指定します
- その上の「ファイル名」に xxx.html といったように、必ず .html を付けてください
- 右下の[保存]ボタンをクリックします
macOSの「テキストエディット」を使う場合
- macOSで「テキストエディット」を使う場合は、「アプリケーション」フォルダの中にある「テキストエディット」をダブルクリックしてください
- 既にあるファイル(たとえば function.html)を開く場合は、そのファイルをcontrol+クリックして、[このアプリケーションで開く]で[テキストエディット]を選択してください
-
ファイルに名前を付けて保存する場合は次のようにするのがおすすめです(いつもやっている方法がある場合はその方法でかまいません。ただし必ずファイル名の最後に .html を付けて保存してください)
- optionキーを押しながら[ファイル]メニューを選択して[別名で保存...]を選択してダイアログボックスを表示します
- 必ずファイル名の最後に .html を付けて保存してください。そうしないと、HTMLファイルとして扱われません。エンコーディングは[Unicode(UTF-8)]を指定します