イントロダクション
本シリーズについて
このシリーズは kintone や Garoon をカスタマイズする上で必須の知識となっている JavaScript の基本が学べるコンテンツです。
あくまで サイボウズ製品をカスタマイズする上での基礎 となるため、「kintone や Garoon をカスタマイズしたいけど JavaScript 自体もあまりわかっていない」という方向けのコンテンツになります。
JavaScript 自体の学習は外部のサイトや書籍等でもたくさん扱われているため、網羅的に学習したい方はそちらをおすすめします。
なお、本シリーズは
Chrome
ブラウザーの利用を前提として講義を進めます。
JavaScriptとは
JavaScript とはブラウザーを操作するためのプログラミング言語です。
Web ページや Web システムを構築する際、必須の知識となります。
なぜJavaScriptから学ぶのか
kintone や Garoon は、JavaScript でカスタマイズできるようになっています。
JavaScript に触れたことがない方は、製品カスタマイズの前に JavaScript を学んでおく必要があります。
HTML／CSSとの関係性
JavaScript を理解するためには、同じくブラウザー上で扱われる HTML と CSS についての理解も必要です。
HTML は、「どこに見出しを書くか」「どこに写真を入れるか」「どこに注釈を入れるか」などを決めます。
CSS は、「見出しのフォントサイズはいくつにするか」「写真の向きはどうするか」「注釈の余白はどうするか」などを決めます。
HTML と CSS だけでも Web ページは作成可能ですが、次のような処理はできません。
- 外部からデータを取得して表示する。
- ログインするユーザーによって表示する内容を切り替える。
- ログイン機能をつける。
これらの処理を行うのが JavaScript の役割です。
HTML や CSS を勉強したい方は、はじめよう JavaScript の
HTML／CSS をやってみましょう。
プログラムの流れ
プログラムには動作の流れがあり、基本的には次の図のように動きます。
この流れはプログラミング中においても非常に重要になります。
「イベントに処理を紐付けていく」 ことで、プログラムを作成していきます。
イベント
プログラムが動作するきっかけです。
例
- 画面を開いたとき
- ボタンをクリックしたとき
- 値を変更したとき
入力（インプット）
プログラムで操作する対象です。
例
- 画面の要素
- 入力された値
- 現在時刻
加工
プログラムのメイン処理です。
例
- 条件分岐をする。
- ループ処理をする。
- API を実行する。
出力（アウトプット）
加工した結果です。
例
- 画面に表示する。
- アラートを表示する。
- 値を送信する。
書き方
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 を書くと、「Chrome や Edge では動くけど Internet Explorer 11 では動かない」なんてことになります。