「はじめようJavaScript」シリーズは、プログラミングが初めての方向けのJavaScriptの基本を学ぶためのコンテンツです。
このシリーズでは、kintoneやGaroonをカスタマイズするための必要な基礎知識に焦点を絞って説明しています。
JavaScriptを網羅的に学習したい方には、外部のサイトや書籍等での学習をおすすめします。

なお、JavaScriptを実行する環境には Google Chrome の開発者ツールを使用しています。

このシリーズを学習し終えると、次のことが理解できるようになります。

• JavaScriptでできること、HTMLやCSSとの関係性
• HTMLやCSSの「要素」「属性」「セレクタ」の意味
• JavaScriptにおける、変数や関数の宣言、条件分岐や繰り返し処理の書き方
• JavaScriptライブラリとそのメリット
• 同期処理と非同期処理の違いや、非同期処理の書き方
• Web APIを利用するための用語の意味や、curlやJavaScriptからWeb APIを実行する方法

JavaScriptとはブラウザーを操作するためのプログラミング言語です。
WebページやWebシステムを構築する際、必須の知識となります。

kintoneやGaroonは、JavaScriptでカスタマイズできるようになっています。
JavaScriptに触れたことがない方は、製品カスタマイズの前にJavaScriptを学んでおく必要があります。

JavaScriptを理解するためには、同じくブラウザー上で扱われるHTMLとCSSについての理解も必要です。
HTMLは、「どこに見出しを書くか」「どこに写真を入れるか」「どこに注釈を入れるか」などを決めます。
CSSは、「見出しのフォントサイズはいくつにするか」「写真の向きはどうするか」「注釈の余白はどうするか」などを決めます。

HTMLとCSSだけでもWebページは作成可能ですが、次のような処理はできません。

• 外部からデータを取得して表示する。
• ログインするユーザーによって表示する内容を切り替える。
• ログイン機能をつける。

これらの処理を行うのがJavaScriptの役割です。
HTMLやCSSを勉強したい方は、はじめようJavaScriptの HTML／CSSをやってみましょう。

プログラムには動作の流れがあり、基本的には次の図のように動きます。

この流れはプログラミング中においても非常に重要になります。
「イベントに処理を紐付けていく」 ことで、プログラムを作成していきます。

プログラムが動作するきっかけです。

例

• 画面を開いたとき
• ボタンをクリックしたとき
• 値を変更したとき

プログラムで操作する対象です。

例

• 画面の要素
• 入力された値
• 現在時刻

プログラムのメイン処理です。

例

• 条件分岐をする。
• ループ処理をする。
• APIを実行する。

加工した結果です。

例

• 画面に表示する。
• アラートを表示する。
• 値を送信する。

JavaScriptでは、決まった書き方（＝基本文法）が存在します。
長いコードでも基本文法を理解していれば、何をしているコードかを理解しやすくなります。

オブジェクト

いろいろなデータが入っているもの。
何が入っているか、何ができるかはオブジェクトによって異なる。

関数（メソッド）

呼び出すと、さまざまな処理を行ってくれる。
自分で関数を作ることもできる。オブジェクトの中に入っているとメソッドとも呼ばれる。

パラメーター

関数に渡すもの。
関数を実行するのに必要な情報で、引数とも呼ばれる。渡すものは、さまざま。

「●●●は■■■を、▲▲▲しなさい」をJavaScriptでは「●●● . ▲▲▲ ( ■■■ );」と表します。

それぞれ、●●●がオブジェクト、■■■がパラメーター、▲▲▲が関数（メソッド）です。

たとえば、画面に「test」という文字をアラートで表示したい場合、「windowはtestをアラートしなさい」という命令を書きます。

具体的には、window.alert('test')というコードを書きます。

windowがオブジェクトで、alert()は関数（メソッド）です。
括弧内に渡したtestがパラメーターとなります。

JavaScriptで利用できるオブジェクトや関数、関数に渡せるパラメーターについては、 JavaScriptリファレンス に詳しい情報が記載されています。
こちらを参考にしながら学習を進めていくといいでしょう。

みなさん、JavaScriptの世界へようこそ。
JavaScriptはWebエンジニアとして必須の知識で、世界一、使われているプログラミング言語ともいわれています。
Programming, scripting, and markup languages

ぜひJavaScriptの基礎を学んで、製品カスタマイズを楽しんでください！
次回は HTML／CSSについて学習しましょう。

補足

JavaとJavaScriptの違い

プログラミング言語の中にはJavaと呼ばれる言語があります。
Javaは、基幹システムやサーバー側で利用されていることが多い言語です。
このJavaとJavaScriptはまったくの別物なので注意してください！

• インドとインドネシアくらい違う。
• パンとフライパンくらい違う。

のようにたとえられたりします。
JavaScriptを省略するときは「JS」とすることが多いです！
「これをJavaで作成してください」といわれたら、本当にJava言語で作成してしまいますよ？

補足

ECMAScript

JavaScriptに限らずですが、プログラミング言語は「言語」というだけあり、新しい書き方や表現方法が毎年のようにでてきています。
JavaScriptではECMAScriptという標準化手続きされた規格があり、毎年改定されています。
2015年に改定された規格を「ECMAScript 2015」、通称「ES2015」と呼びます。
以前はES2015のことを「ES6」と呼び、それ以前を「ES5」と表現していましたが、最近の規格は「ES + 西暦4桁」で呼ぶことが多いです。

この規格はとても重要で、ブラウザーの対応状況によって、使える規格が異なります。
たとえばGoogleのChromeやMicrosoftのEdgeは、比較的最新のECMAScriptに対応しています。 しかし、MicrosoftのInternet Explorer 11は、ES2015（ES6）以降の規格に対応していません。
つまり、ES2015の書き方でJavaScriptを書くと、「Internet Explorer 11では動かない」なんてことになります。