イントロダクション

固定リンクがコピーされました

「はじめよう JavaScript」とは

固定リンクがコピーされました

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

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

このシリーズで学べること

固定リンクがコピーされました

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

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

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 をやってみましょう。

プログラムの流れ

固定リンクがコピーされました

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

固定リンクがコピーされました

オブジェクト

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

関数（メソッド）

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

パラメーター

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

基本文法

固定リンクがコピーされました

「●●● は ■■■ を、 ▲▲▲ しなさい」を 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 を書くと、「Chrome や Edge では動くけど Internet Explorer 11 では動かない」なんてことになります。

はじめよう JavaScript