お久しぶりです。本日は私がJavaScriptの勉強をするのに使う練習サイトを自作したので紹介したいと思います。
Javascriptをご存じない方のために説明いたしますと、JavaScriptとは主にWEBページを作成するときに使うプログラミング言語で、WEBページに動きをつけるのに使われます。
その他にも、WEBページを作成するにはウェブページの構造を決めるのにHTML、デザインやレイアウトを指定するのにCSSというものが使われます。

しかし、JavaScriptはHTMLやCSSと違い、コードを書く際により厳密な表記が要求され、大文字と小文字の区別があり、スペルミスがあったりすると完全に止まってしまって機能しなくなるという特徴もあります。

そんなJavaScriputの勉強をする際は、WEBブラウザー（google chromeやMicrosoft Edge）に標準搭載されている開発者ツールというものをこまめに確認し、記述が間違っていないかチェックするやり方が一般的です。

JavaScriptを練習する際によく登場するコードにconsole.log()というものがあります。これはこちらが指定した内容を記述しなさいと命令するようなものですが、自分が書いたコードがあっているか確認するには、開発者ツールでコンソールという項目をクリックして、その欄に指示した内容が正しく記述されているかで判断するしかありません。この工程をもっと楽しくできないかと考えて作ったのが今回のWEBページです。内容としてはconsole.log()で指示した内容がWEBページ上の吹き出しに直接記述される仕組みにしています。

デザインはこんな感じです。

コードはそれぞれ以下のような感じです。

JavaScriptはWEBページを機能させる用のmain.jsと、実際にJavaScriptを勉強しているときに出力をさせて、コードがあっているか確認する用のtest.jsを読み込ませています。
テスト用コードを入力する方はこちらで、mainと分けることでシンプルで見栄えが良く使えます。

難点を挙げるとすると。console.log()の内容は常に上書きされて連続して出力はできないです。
全ての出力内容を確認するときは今まで通り開発者ツールを使うしかないです。

実際に使っている時の手順としては、コードを記述後、Ctrl + S　→　Alt + Tab → F5 という流れで、瞬時に作成したWEBページの吹き出し欄に結果が表示されます。

これを見て同じようなの作ってみたいと感じた方は、ぜひ挑戦してみてください。