ブラウザについて

今回はブラウザについてです。

本講座では、Google Chromeを利用します。検索エンジンで「Google Chrome」と入力して検索を行い、Google Chromeをダウンロードしてインストールしてください。すでにGoogle Chromeを利用している方はこの操作は不要です。

Google Chrome

こちらがGoogle Chromeを開いたところです。

「F12」キーを押すことで、開発者ツールを開くことができます。実際に開いてみましょう。

F12

他のショートカットとしては、Windowsでは「Ctrl + Shift + i」、Macでは「command + option + i」で開けます。Macでは、この方法で開いて下さい。

Win : Ctrl + Shift + i

Mac : command + option + i

この右側の部分が開発者ツールです。開発者ツールの上部には、各種機能がタブで並んでいます。このタブの中で「Console」を開くと、JavaScriptのプログラムから出力した内容が表示されます。この場所を、以後「コンソール」と呼びます。

また、表示を行ったファイルとそのファイルの行数も表示されます。

プログラムにエラーが発生した際も、こちらに赤字でエラー内容とファイルと行数が表示されますので、開発中はこのコンソールを開いておくとよいでしょう。

コンソールに文字列を表示させたい場合には、JavaScriptのプログラム中で、「console.log(文字列);」と書くことで出力を行います。

console.log(文字列);

こちらの文字列のところは、「文字列 , 文字列 ,」のようにカンマ区切りで情報を並べると、それらがすべてこちらの出力されます。

また、console.logの丸括弧の中に文字列の代わりにオブジェクトを指定した場合は、そのオブジェクトの内容が出力されます。

console.log(オブジェクト);

開発者ツールでもう1つよく使うのは、こちらの「Elements」タブです。HTMLの内容がツリー状に表示されます。

このリバーシゲームはシンプルなHTMLの構造になっており、「body」タグの中に「div」があり、「canvas」が入っているといったシンプルなものになっています。

というわけで、今回はブラウザについて紹介しました。