第 2 回 かんたんなプログラムを書いてみよう
JavaScript初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript
簡単なプログラムを書いてみよう
さっそく、JavaScriptを使って簡単なプログラムを書いてみましょう。
わからない単語はインターネットで検索するか、可能な限り注釈をいれているので参考にしてみてください。
今回は、ブラウザー上でプログラミングと実行までできるJSFiddleというサービスをつかいます。
まずはいくつかプログラミングをこなし、慣れてきてからkintone上でプログラミングをしていきたいと思います。
JSFiddle とは
JSFiddleは、JavaScriptのプログラミングから実行するまでをブラウザー上で行うことが可能で、その内容を保存してシェアすることももできます。
また、外部のスクリプト
*1
やライブラリ
*2
も読み込ませることができます。
また、今回は実行結果を確認するためのコンソール(画面右下)
*3
も用意しました。
次のURLにアクセスしてプログラミングを始めましょう。
https://jsfiddle.net/kintone/x27p59nu/1/
WebブラウザーはChromeを使用することをおすすめします。
Google Chrome
*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 出力
|
|
上記はconsole.log()
関数を使用して「Hello world!」を表示しています。
簡単な計算
|
|
上記は計算式をconsole.log()
関数に指定することで「15」と表示させることができたということです。
次章からはもっとJavaScriptについて掘り下げていきます。