【JavaScript】JavaScriptで表示はconsole.log()【基本講座】

JavaScriptは、近年WEB開発においてなくてはならないものになりました。
JavaScriptは、サイトを動的に見せるのに最も適したプログラム言語です。これは、スクリプト言語と呼ばれていて、C言語のようにコンパイルをしなくてもいい言語です。覚えることも他の言語に比べて少な目なので、基本を理解すればすぐに実践で使えるようになるでしょう。

出典：http://www.photo-ac.com/

JavaScriptで表示してみよう！

JavaScriptの組み込み方

JavaScriptの練習をしたい時、統合環境は？って思うかもしれませんが、実はテキストエディタのサクラエディタあたりで十分できたりします。
というのも、HTMLを組むときテキストエディタ使っていませんか？
実はそこにちょっと組み込むことで出来るんです。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sample</title>
    <script src="test/test.js"></script>
</head>

<body>
</body>

<!DOCTYPE html>

<head>

<title>Sample</title>

</head>

<body>

</body>

こんな感じでヘッダータグの中に記入します。
例では、ファイルを読んでいますが、 <script ></script> の中に処理を書いていくことで、WEBでHTMLを立ち上げたとき、動作します。

テキストエディタでは、ちょっと、、、な方は、VSCodeを使うという選択肢もあります。VSCodeの導入方法は、【Python】統合開発環境(IDE)って何を使ったらいいの？【有名どころでOKです】　で解説していますので参考にしてみてください。記事はPython用ですが導入方法として変わるものではありません。

基本はconsoleへの表示から

paizaやprogateなんかで、表示するといったらconsole.log()を使っています。
JavaScriptの基本表示は、console.log()です。しかし、先ほど述べたようにヘッダータグ内でこれを書いてもサイトに何も表示されません。
これを表示させるには、デベロッパーツールを使います。
Google Chromeなどブラウザに標準装備されている開発者モードです。

Google Chromeでは右上の「↑」メニューから「その他のツール」→「デベロッパーツール」を選択すると開けます。ショートカットは、「Ctrl」+「Shift」+「I」で開くことができます。

開くと右半分が何やらプログラミング言語のような画面が3つくらいに分割されたものが出てきます。それの一番下に「console」という項目があるので、そこをクリックするとconsole.log(“【任意の文字列】”)の【任意の文字列】が表示されています。

console.log()だけでなく、デベロッパーツールは、デバッグ環境としても優秀なものなので今後頻繁に使うと思われますので、いろいろ触って見てみると良いでしょう。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sample</title>
    <script type="text/javascript">colsole.log("さんぷる")</script>
</head>

<body>
</body>

<!DOCTYPE html>

<head>

<title>Sample</title>

</head>

<body>

</body>

簡単に表示させたいんだけど？

実務に直結した記述で解説してきましたが、勉強目的でJavaScriptを慣れ親しみたい初学者もおられると思います。VSCodeでもいいのですが、最近は、いろいろ便利になっていて、paiza.io というサイトでサンプルを実行できます。

簡単な演習などは、ここで習熟しても良いのではないでしょうか？

JavaScriptおすすめ書籍

JavaScriptの入門書は、「これから学ぶ～」が分かりやすいです。その次に「Good Parts」をやることをおススメします。これは、JavaScriptのテクニック的な参考書で実践に使えます。他、有名なサイの本もありますが、これは、そこまで必須ではないかもしれません。「The Good Parts」で良いかなと思える感じです。主に初学者用にチョイスしました。良かったら読んで見てください。