イントロダクション で、プログラムにはイベント、入力（インプット）、加工、そして出力（アウトプット）の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オブジェクトなどがあり、それぞれが固有のオブジェクトやプロパティを持っています。

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

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