はじめようJavaScript第2回 かんたんなプログラムを書いてみよう

JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
   リニューアル後のチュートリアルは次のページを参照してください。
   はじめよう JavaScript

（著者：kintone エバンジェリスト 村濱 一樹）

かんたんなプログラムを書いてみよう

さっそく、JavaScriptを使って簡単なプログラムを書いてみましょう。わからない単語はインターネットで検索するか、可能な限り注釈をいれているので参考にしてみてください。今回は、ブラウザー上でプログラミングと実行までできるJSFiddleというサービスをつかいます。
（いくつかプログラミングをこなし、慣れてきてからkintone上でプログラミングをしていきたいと思います。）

JSFiddleとは

JSFiddleはブラウザー上でJavaScriptをプログラミングから実行まででき、内容を保存してシェアすることもできます。また、外部のスクリプト(*1)やライブラリ(*2)も読み込ませることができます。

また、今回は実行結果を確認するためのコンソール（画面右下）(*3)も用意しました。下記URLを使ってプログラミングを始めましょう。
https://jsfiddle.net/kintone/x27p59nu/1/

• 使用するブラウザー
  Chromeでの使用をおすすめします。
  https://www.google.co.jp/chrome/browser/desktop/

*1）スクリプト：JavaScriptなどで書かれたプログラムをスクリプトと呼ぶことがあります。
*2）ライブラリ：よく使うコードや便利なコードがまとめられたものを指します。世の中には高機能なライブラリがたくさん公開されており、ライブラリを利用するプログラミングの手間が省けます。今後、ライブラリの使い方も説明していきます。（参考：Cybozu CDNで用意されているライブラリ ）
*3) 通常のJSFiddleではコンソール画面は表示されないのでご注意ください。

簡単なプログラム

プログラミングの説明の前に、簡単なプログラムをまずは書いてみましょう。

console出力

右下のコンソールエリアに、文字を出力しましょう。下記JavaScriptを入力して、「Run」を押してください。

コンソールに「Hello world!」と表示されたはずです。

アラートダイアログ出力

アラートダイアログへの出力もJavaScriptから行えます。

今度はアラートダイアログが表示され、「Hello world!」と表示されたはずです。

簡単な計算

次に、簡単な計算を処理させてみましょう。

コンソールに計算結果である「15」が表示されたはずです。

解説

さて、ここで上記のコードの簡単な解説をみてみましょう。

• アラートダイアログを表示するプログラム

これは、少し分解すると、alert() と 'Hello world!' の2つの構成でできています。
alert()のように、後ろに括弧がついているものは、「関数」と呼ばれるものです。alert() はアラートダイアログを出すための関数です。このようにJavaScriptにはいくつか関数が最初から用意されており、それを使って様々な処理をさせることができます。（関数は自作することもできます。これ以降の章で説明します。）
また、関数の括弧に、数値や文字などの値を指定することができます。例えば alert() は括弧の中に入れた値をアラートダイアログに表示する、という仕組みになっています。
今回は「Hello world!」と表示させるために、alert('Hello world!') と括弧の中に文字列を指定しました。
文字はシングルクォーテーション ' ' か、ダブルクオーテーション " " で囲む必要があります。

他の2つのプログラムも同様で、

上記は console.log() 関数を使用して「Hello world!」を表示していますし、

上記は計算式を console.log() 関数に指定することで「15」と表示させることができたということです。

次章からはもっとJavaScriptについて掘り下げていきます。

<<はじめようJavaScript第1回 JavaScriptとは | はじめようJavaScript第3回 JavaScriptの文法 変数といろいろな値について>>