プログラマーへなるべく勉強を始めるにあたり、いきなりJavaはちょっと扱いづらいなという印象を受けたので手始めにWebサイトでよく使われているJavascriptの勉強を始めました。
(JavaとJavascriptは別ものです。)
ちなみに私のレベルはもともとブログが趣味だったこともありWeb制作で使われるHTMLとCSSという言語が少しわかる程度です。その時にJavascriptというものの存在を知り個人的には馴染みがJavaよりあります。けれどソースコードを読んでも少しも解読できないという程度です。
(その際に間違ってJavaの参考書を購入しJavaの存在もしりました笑)
前置きはこの辺にして、今回は「about:blank」というものについて勉強したので書いていきます。
※環境はMacでブラウザはChromeとFireFoxです。
about:blankとは
about:blankを使うとブラウザ上で空白のページを表示することができます。
about:blankを開く
「about:blank」はブラウザの機能の一つです。
説明が難しいのでまずはブラウザ(ChromeやFirefox,Internet Explorerなど)のURLに「about:blank」と打ち込んでみると表示されると思います。(ちなみにPC上で新しいタブを表示する場合はMacの場合は⌘ + T, Windowsの場合はCtrl + Tです。)
表示の仕方がわからない場合は下記リンクから飛んでみてください。
真っ白なページが表示されると思います。
見かけたことがある方も多いのではないでしょうか。
リンクをクリックした際に別のウィンドウで開く際にたまに「about:blank」のページを中継したりしているのを見かけます。
こんな真っ白いページ何に使うんだと思うかもしれませんが、自分でJavascriptのコードを書いて結果を得るのに便利です。
Javascriptのコードをせっかく書いてもそれだけでは実行しなければ動作しません。そのためブラウザ上でJavascriptを処理して結果を確認する必要があります。そこで余計なコードの書かれていないまっさらな空白ページが便利なのです。
また「about:blank」はインターネットを経由しなくても開くことができます。
まれにパソコンやブラウザはネットワークに繋がっていないといろいろなことができないと思っている方もいますがそんなことはありません。
これから練習する上で、ローカル環境(手持ちのパソコンと思ってください)でも十分練習できます。参考書とパソコンさえあれば、ネットがなくてもどこでも勉強できてしまいます。
Javascriptの勉強を始めるかたはこれからよく使うと思うので、ブックマークやトップページに設定しておくと便利です。
about:blankを利用する
あれこれ言っても実際にやってみると分かりやすいと思うので、せっかくなので試しにコードを打ち込んでみたいと思います。
デベロッパーツールを使う
ブラウザのデベロッパーツール（検証モード）を開きます。
デベロッパーツールの機能についてはまたいつか書きたいと思いますが、Web系のチェックをするのによく使われると思っておくと良いかなと思います。
今回はとりあえずショートカットキーで開いて見てください。(MacはCommand + Option + I、WindowsはCtrl + Shift + IまたはF12）
デベロッパーツールが表示されたと思います。
表示されたらデベロッパーツールのタブの「コンソール(console)」を選択し下記のコードを打ち込んでエンター(Enter)キーを押してみてください。
Hello Worldと打ち込んだコードの下に表示されたら成功です。
少し分かりづらかったかもしれないので、もう少しわかりやすく下記コードもお試しください。
chrome利用者で返答が返ってこない場合は左側のアイコンのビックリマーク(info)を選ぶと表示されると思います。
Hello Worldという文字のポップアップ(alert)が表示されると思います。
このように「about:blank」は書いたコードをテストするのにとても便利です。
いろいろ書いてコンソールがごちゃごちゃしてきてまた真っ白に戻したいなと思ったらリロード(再読み込み)してください。
Macなら「command + R」Winなら「ctrl + RまたはF5キー」。ちなみにRはリロード(Reload)のRです。
about:blankを使ってもっと勉強したいなと思った方は下記も読んでみてください。
