イントロダクション で、プログラムにはイベント、入力（インプット）、加工、そして出力（アウトプット）の 4 つの動作があることを説明しました。
このうちの出力（アウトプット）は出力する場所によって次の 3 種類に分類できます。

• コンソールへのアウトプット
• ダイアログボックスへのアウトプット
• HTML や CSS へのアウトプット

ここでは JavaScript の基本文法を学習し、アウトプットを試してみましょう。

最近の主要なブラウザーには、「開発者ツール」という JavaScript や HTML/CSS をデバックするためのデバッガーがついています（以下開発者ツールとします）。
これから紹介する出力方法 3 種類すべて開発者ツールのコンソールを使うので、操作方法を覚えましょう。

まず開発者ツールを開いてみましょう。
＜開き方＞
Windows：F12
Mac：Command + Option + I

JavaScript からテキストや数字などをアウトプットする場所のひとつに、「コンソール」があります。
コンソールは、JavaScript のプログラムがうまく動いているかどうかを確認するときや、kintone の record データがどういうものかを確認するときによく使います。
それでは、実際に JavaScript を書いて、コンソールにアウトプットしてみましょう。

コンソールに直接、JavaScript でプログラムを書いてみます。
開発者ツールのコンソールを開き、> の横に次のコードを入力しましょう。

1

console.log('ようこそ！kintoneへ');

「ようこそ！kintoneへ」以外のテキストは、記号やスペースも含めすべて半角にします。
入力し終えたら、Enter（Mac は Return）キーを押します。

コンソールに次のように表示されたら成功です。

ブラウザーの開発者ツールに含まれるコンソールには、プログラムの実行結果を表示したり、エラーメッセージを表示したりする機能があります。
今回のようにコンソールに直接プログラムを書くと、Enter を押したと同時にそのプログラムが実行されます。
今回のプログラムを実行すると、次の 3 行が表示されました。
ブラウザーによって表示順序は異なります。

2 の「ようこそ！kintoneへ」がプログラムの実行結果です。
つまり console.log('ようこそ！kintoneへ'); を実行すると、コンソールに「ようこそ！kintoneへ」が表示されます。
3 については 関数 で説明します。今はそっとしておきましょう。

console.log は、()内に指定したテキストや数式の計算結果などをコンソールにアウトプットする機能です。
今回のようにテキストをそのまま表示する場合は、シングルクオート（'）で囲みます。
シングルクオート（'）の代わりにダブルクオート（"）を使うこともできますが、ここでは原則としてシングルクオートを使います。

1

console.log();

補足

プログラムの入力ミスを減らすために

先ほど書いたプログラムには、半角丸括弧やシングルクオートが出てきました。
プログラミングでは、日本語の文章で通常使われない記号が頻繁に使われます。
慣れないうちは書き間違いやすく、特に閉じ括弧やシングルクオート、セミコロンを忘れがちです。
記号を 1 つ書き忘れたり、違う場所に入力してしまうだけでプログラミングは動作しなくなってしまいます。
入力ミスを減らすために、プログラムを前から順に書くのではなく、対応する括弧や記号類を先に書くように心がけましょう。
先ほどのプログラムの例でいうと、まず () の中身は記述せず、初めに閉じ括弧まで書いてしまいましょう。セミコロン（;）も忘れずに書きます。

次に、() 内にシングルクオートを書きます。

1

console.log('');

最後に、表示したいテキストをシングルクオート内に入力し、Enter を押して実行します。

1

console.log('ようこそ！kintoneへ');

次のアウトプット方法の紹介の前に、JavaScript の基本文法をおさらいしておきましょう。
JavaScript で何かを実行したい場合、「●●● は ■■■ を ▲▲▲ しなさい」と書きます。

• 「●●● は」にあたる部分をオブジェクト
• 「▲▲▲ しなさい」にあたる部分をメソッド
• 「■■■ を」にあたる部分はパラメーター

と言いましたね。

先ほど実行した「console.log('ようこそ！kintoneへ')」は、「console は 'ようこそ！kintone へ' を log しなさい」と命令していることになります。

console がオブジェクト、log() がメソッド、'ようこそkintoneへ' がパラメーターですね。

1
2

// console は 'ようこそ！kintoneへ' を log しなさい
console.log('ようこそ！kintoneへ');

2 つ目のアウトプットは、ダイアログボックスへのアウトプットです。
使い方は console.log とほとんど変わらないので簡単です。
ダイアログボックスは、エラーをブラウザーを操作しているユーザーへ知らせるときなどに使います。

このような、OK ボタンのあるダイアログボックスを表示することを、アラートと呼びます。
それでは、実際に JavaScript を書いて、ダイアログボックスにアウトプットしてみましょう。

先ほどと同じように、コンソールに直接 JavaScript でプログラムを書いてみます。
開発者のコンソールを開き、> の横に次のコードを入力しましょう。

1

window.alert('今日はいい天気ですね');

入力し終えたら Enter（Mac は return）キーを押します。
次のようなダイアログボックスが表示されたら成功です。

JavaScript にできるアウトプット 3 つ目は、表示されている Web ページの書き換えです。
JavaScript で HTML や CSS を参照／操作して、テキストの書き換えや新しい要素の追加ができます。
このように JavaScript を使って、HTML や CSS を参照したり、書き換えたりすることを DOM 操作と言います。

DOM とは「Document Object Model」の略称で、プログラムから HTML を自由に操作するためのしくみです。
ブラウザーに表示されるテキストの色や大きさ、内容の変更など、Web ページの見た目をプログラムで処理したい場合に、JavaScript で HTML で書かれた要素を取得する必要があります。
そこで、ファイルの特定の部分に目印を付けて、「この部分」に「こういうことをしたい」という処理を可能にするための取り決めが DOM です。

DOM 操作と kintone

DOM 操作は kintone ではあまり使われません。
kintone のレコードに表示されているフィールドの値を書き換えたい場合は、kintone 独自の kintone JavaScript API を使うことで書き換えられるため、原則そちらを利用します。

kintone のクラス名を使って DOM 操作すると、kintone の機能追加の影響を受けて、カスタマイズが動かなくなるリスクがあります。

HTML に書かれた要素を JavaScript で取得するには、いくつかの方法があります。 今回は、特定の id 属性をもつ要素を取得する方法を使います。

お知らせアプリでレコードの既読チェックカスタマイズをしてみよう の記事の「概要」を使います。

上記の記事を開いた状態で、今までと同じようにコンソールに直接 JavaScript でプログラムを書いてみます。
開発者のコンソールを開き、> の横に次のコードを入力しましょう。

1

console.log(document.getElementById('overview'));

プログラムが少し長いので、途中で間違えないために、対応する括弧や半角などに気を付けて順番に書きましょう。
入力し終えたら、Enter（Mac は return）キーを押します。
コンソールに表示されているのが、取得できた要素です。

1

<h3 id="overview">概要</h3>

console オブジェクト、window オブジェクトに続き、新たに document オブジェクトを使いました。
document オブジェクトにはブラウザーに表示されている HTML や、それに関連する CSS を操作するための機能が多数用意されています。
今回使用した getElementById メソッドは、() 内に指定された id 名をもつ要素を丸ごと取得します。
id 名は文字列で指定する必要があるので、シングルクオート（'）で囲みましょう。

JavaScript のプログラムを書いたりソースコードを読んだりするには、「オブジェクト」「メソッド」がどういうものかを理解しておくことが重要です。
ブラウザーを構成するパーツや表示している HTML ドキュメントなどは、JavaScript では「オブジェクト」として扱われます。
オブジェクトには、console オブジェクト、window オブジェクト、document オブジェクトなどがあり、それぞれが固有のオブジェクトやプロパティを持っています。

• メソッド：オブジェクトに ▲▲▲ しなさいと指示する。
• プロパティ：オブジェクトの状態

そしてメソッドの後には必ず () がつき、メソッドによってはその () 内にパラメーターを含むことができます。
あらためて「オブジェクト」「メソッド」「パラメーター」について確認しておきましょう。
次回は 変数／データ型／データの演算 について学習しましょう。