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

著者名:村濱一樹(kintone エバンジェリスト)

目次

information

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

簡単なプログラムを書いてみよう

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

まずはいくつかプログラミングをこなし、慣れてきてから kintone 上でプログラミングをしていきたいと思います。

JSFiddle とは

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

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

Web ブラウザーは Chrome を使用することをおすすめします。
Google Chrome (External link)

*1 JavaScript などで書かれたプログラムをスクリプトと呼ぶことがあります。 ^

*2 よく使うコードや便利なコードがまとめられたものを指します。
世の中には高機能なライブラリがたくさん公開されており、ライブラリを利用するプログラミングの手間が省けます。
今後、ライブラリの使い方も説明していきます。
参考: Cybozu CDN で用意されているライブラリ ^

*3 通常の JSFiddle にコンソール画面は表示されません。 ^

簡単なプログラム

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

console 出力

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

1
console.log('Hello world!');

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

アラートダイアログ出力

アラートダイアログへの出力も JavaScript を使って行えます。

1
alert('Hello world!');

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

簡単な計算

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

1
console.log(1 + 2 + 3 + 4 + 5);

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

プログラムの解説

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

アラートダイアログを表示するプログラム
1
alert('Hello world!');

これは、少し分解すると、alert()'Hello world!' の 2 つの構成でできています。
alert() のように、後ろに括弧がついているものは、「関数」と呼ばれるものです。
alert() はアラートダイアログを出すための関数です。
このように JavaScript にはいくつか関数が最初から用意されており、それを使ってさまざまな処理をさせることができます。
関数の自作もできます。
これはこれ以降の章で説明します。

また、関数の括弧に、数値や文字などの値を指定できます。
たとえば alert() は括弧内の値をアラートダイアログに表示する、というしくみになっています。
今回は「Hello world!」と表示させるために、alert('Hello world!') と括弧の中に文字列を指定しました。
文字はシングルクオート ' か、ダブルクオート " で囲む必要があります。

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

console 出力
1
console.log('Hello world!');

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

簡単な計算
1
console.log(1 + 2 + 3 + 4 + 5);

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

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