糸口①では「WebブラウザをGUIとしたアプリケーション」って何、という話をしました。まずHTML・CSS・JavaScriptを使ったツール作りという営みの意味を明らかにしておく必要があろうかと思ったので、その話からスタートしたわけです。
今度は、具体的にどういうアプリケーションを使ってプログラムを作れば良いかという話が必要だと思うので、ちょっとだけ書いておきます。
と言っても、自分が実際に使っているものしか知りませんので、網羅的でもなければ最善の保証もありません。でもより良いものを探すために検索する取っ掛かりにはなるでしょう。
前回同様、記事内で解説しようというのではなく、何を調べればいいかのガイドとなるものを目指しています。
メモ帳とWebブラウザがあればコードは動く
JavaScriptを書いて動かすために必要なものとして本当に最低限のものは、「メモ帳」と「Webブラウザ」だけです。誰のPCでも最初から備わっていますね。要するに、Webブラウザが読んで動かせる形式で書いた文字列があればいいだけなので、メモ帳で書いてもいいのです。
メモ帳でもいいのですが、実際にコーディングするには、入力の補助がないと大変やりづらいです。メモ帳はコードが間違っていても指摘してくれませんし、色分けもしてくれないですし、サジェストもしてくれません。コーディングに特化したテキストエディタならそういうことをやってくれるので、とても入力が楽になります。
コードエディタをインストールしよう
では、コーディングに特化したテキストエディタとは何でしょうか。
有名なものはいくつかあるようですが、私が使っているのは「VSCode（Visual Studio Code）」です。他のコードエディタは使ったことがないので比較して良さを言うことはできませんが、とりあえず困ることは何もなく、「VSCodeを使っとけば間違いない」という記事もひとつふたつではなく見かけたので、ひとまずVSCodeをインストールしておいて損はないかと思います。
他のものが気になるようなら、適当に「コードエディタ おすすめ」とかで検索するだけで候補は把握できます。
ちなみに、VSCode（というかMicrosoft製品）の入力支援・自動補完システムのことは「インテリセンス IntelliSense」と言います。使っていて何か気になることがあれば調べてみると理解が深まると思います。
ファイルはどう作る？
コードを書くツールについてはそれで良いとして、次は具体的にどう書いてどう保存すればいいかについて整理してみます。
ここではあくまでHTML・CSS・JavaScriptのセットでのプログラミングの話をしますので、他の言語については各々お調べになってください。大抵は実行環境（コードを書いて作ったファイルをプログラムとして実際に動かすための環境）の構築が必要になると思います。WindowsではPythonも自分でインストールしなければなりません。その点JavaScriptはWebブラウザがあればいいので、プログラミング脳が全く育っていなくても手探りで始めることが容易かと思います。
さて、先程からHTML・CSS・JavaScriptの三点セットで話をしていますが、「.html」「.css」「.js」の三種類のファイルを用意する方法と、CSSとJavaScriptの両方または一方をhtmlファイルの中で埋め込む形で書いてしまう方法とがあります。スタイル情報とスクリプトはそれぞれHTMLのstyleタグとscriptタグで記述することになりますが、外部ファイルのインポートもできますし、直にタグ内に書くこともできるわけです。
直に書くとインデントが余計に深くなり、記述が長くなると把握も難しくなるので、最終的には外部ファイルに書くのが基本になるでしょうが、ちょっとしたプログラムを作るだけならhtmlファイルひとつだけにまとめてしまうのもよいでしょう。
糸口①に載せたコードはstyleタグとscriptタグに直に書いている例になります。それぞれ別途「style.css」「main.js」というファイルに書いてインポートする形にするとすれば、htmlファイルの記述は以下のようになります。（cssファイルはlinkタグでインポートすることになります。）
ちょっとしたコードを試したい時
HTMLとは関係ないようなコードを試してみたいこともあるでしょう。例えば数字の計算をしてみたいとか、乱数を作ってみたいとか、メソッドを試して意味を確認したいとか、そういうものです。
その試行結果を、例えばHTMLのspanタグの中に表示して確認するというようなことも可能ですが、ただ足し算してみたいだけでそんなトリッキーなことをするとなったらちょっと面倒です（練習のために敢えてやるのもありですが）。console.log()を使うにしても、エディタで書いたものをWebブラウザで開いてコンソールで確認する、というのは若干手間が多い感じがします。VSCodeのデバッグ機能を使う……とかいうことができる人は今これを読んではいないでしょう。
もうちょっとこう、さっと書いてさっと試したいという感じがします。
そういう時には「Webブラウザのデベロッパーツールのコンソールに直に書いて実行する（Enterを押す）」とか「Web上のプレイグラウンドサービスを使う」という手があります。VSCodeなどのエディタは脇に置いておいて、Webブラウザだけで事足ります。
デベロッパーツールは、Chromeなら右上の設定アイコン→「その他のツール」→「デベロッパーツール」、Firefoxなら多分右上のアイコン→「開発者ツール」→「開発者ツールを表示」という手順で開くことができます。デベロッパーツールでやれることは多岐にわたるので、詳しくは検索なさってみてください。
コンソールというのは、現在開いているページで走っているスクリプトによる情報が表示される場で、コードの挙動を確かめることができます。「console.log（hoge）」などのConsoleオブジェクトのメソッドを用いることによって処理中の情報を書き出しておくほか、エラーが発生した時には自動でエラー箇所と理由が表示されるなどします。しかしコンソールというのは「情報を確認できる」だけではなく、そこにコードを書いて実行してしまうことも可能なのです。
ありがちなうっかりミスとしては、入力してEnterキーでコードを実行してしまうので、サジェストされた候補を選択しようとしたり改行しようとしたりした時に意図せず途中で実行してエラーを出してしまうことが多々発生します。私は多々発生させました。直に打ち込まないでコードエディタで書いたコードをコピペしてEnterの方が安全ではあります。
もうひとつの選択肢のプレイグラウンドとは、オンラインでコードを試して遊ぶことができるサービスのことです（文脈によって他の概念を指す場合もあると思います）。様々な言語についてそういう場が作られており、JavaScriptについては「JavaScript playground」で検索すると色々と出てきます。
JavaScriptの場合はどのサービスでもHTMLとCSSもセットで試すことができるようになっています。コードを書いて、左上などにある「Run」をクリックすればすぐに結果が出ます。Runを押すまでもなくリアルタイムに反映してくれるものもあります。基本的に全て英語ですが、コードの挙動を確認するだけならメニューの意味などを全て理解しなくとも支障はないと思いますので、身構えなくて大丈夫です。
Playgroundで試行する
JavaScriptのプレイグラウンドには色々あるようですが、それぞれちょっとだけ触ってみた限りでは、PlayCodeというサービスが使いやすいかなと思いました。入力補助があり、コードの実行結果がリアルタイムに更新されます。
いずれのサイトも、そのサイトにコードを保存するとなるとユーザー登録が必要ですが、ただ試すだけなら登録は要りません。試したコードをコピペして他に保管しておいて、挙動を試したい時だけ貼り付けて確認するというのもよいでしょう。
最終的にはローカルファイルにコードを書き、htmlファイルを開いて実行することになりますが、ツールの体を成す前の試行錯誤はWeb上のPlaygroundでやってもいいと思います。htmlとcssとjsを並べて表示でき、手早く結果を確認できるので、挙動を知るのにはとても効率が良いです。
メソッドはどこで調べる？
環境が整ったはいいですが、何を入力すればいいのかと戸惑うかもしれません。JavaScriptにどんなメソッドが実装されているのか、初心者にはわからないからです。
ごく基本的な文法は適宜初学者向けのサイトなりアプリケーションなり本なりで勉強してもらうとしても、JavaScriptが備えているオブジェクトとそのメソッドというのはそれだけでは到底カバーされません。網羅的に解説している何かの力を借りる必要があります。辞書が要るのです。
私がいつも参照しているのはMDN Web DocsというMozillaの公式ウェブサイトです。メソッド名で検索すればこのサイトの記事が上位に出てくるので、わざわざトップページから探していかなくても記事にアクセスすることは簡単です。
しかし本当の初学者の段階ではちょっと記述が難しすぎるので、その場合には日本のプログラマーが書いた記事を頼りにするとよいでしょう。というか、自分のやりたいことがどんなメソッドで解決できるのかがわからないだろうと思うので、最初は「JavaScript ○○するには」みたいな検索をせざるを得ないと思います。
情報量の乏しいしょうもないようなサイトもしばしば検索結果の上位に出てきたりしますが、逆にそのくらい薄い方が最初の最初は読みやすかったりもします。内容としては同じことを言っていても言葉遣いの違いでわかったりわからなかったりするのが初学者なので、ネットを利用して色々見てみるのがよいと思います。もちろん、評判の良い書籍を探すのが一番かと思います。
いずれにしても、たまたま出会った記述にその都度こだわって格闘しすぎるよりは、切り口の異なる記述をあれこれ見た方が早いと個人的には思います。書き手は各々全力を尽くしていたとしても、自分と相性がマッチしなければ読解は難しくなりますし、そもそも内容が絶対正しいとも限らないのです。
登場したキーワードを並べておきます。
- コードエディタ
- VSCode
- インテリセンス
- 実行環境
- デベロッパーツール
- コンソール
- console.log()
- プレイグラウンド
- PlayCode
- MDN Web Docs
今回は以上です。
このシリーズ記事の概要はこちら→ノートテイキングアプリDIY体験記