第 1 回 JavaScript とは

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

目次

information

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

はじめに

当連載は、IT エンジニアが本職でない方やプログラム経験のない方が、無理なく段階的に JavaScript の基本的な知識を学べるコンテンツです。

このコンテンツを読んで、コンテンツに沿って実際にプログラムを書いてみることで理解を深めることができます。
また、忙しくて時間がない方もすき間時間にモバイル端末で概要を読み、あとで PC で手を動かしてみることで、効率良く学習を進められます。

プログラミング入門としてぜひお役立てください。

JavaScript って何?

JavaScript はブラウザーを操作できる

JavaScript は Web ブラウザー上で動作させることのできる代表的なプログラミング言語です。
たとえば、次のような Web ブラウザー上に表示させることなら、たいていのことはできてしまいます。

  • あるサーバーからデータを取って表示したり計算したりする。
  • 表示されているテキストの色を変える。
  • 表示する場所を移動する。

kintone は Web ブラウザー上で動作しますし *1 、JavaScript の組込み許可しているため、JavaScript を使えば本当にいろんなことが実現可能です。

実際に、過ぎるほどにできることが多いので、 kintone コーディングガイドライン があります。
これに従わなければ kintone のアップデートのタイミングで JavaScript のコードが動かなくなる可能性もあります。

プログラミング言語といえば、他には C 言語や PHP、Ruby などがあります。
Excel のマクロを組むための VBA もプログラミング言語の 1 つといえます。
そして、JavaScript と Java は名前が似ているだけでまったくの別物です。
なので、JavaScript を「Java」と言ってしまわないようにしましょう。

JavaScript はけっして難しいプログラミング言語ではありません。
たとえば Java(JavaScript ではありません!)や C 言語でいえば、コンパイルやビルドなどの作業はもちろん、開発環境の準備から始める必要があります。 しかし、JavaScript はテキストエディタとそれを実行するための Web ブラウザーさえあればプログラムが書けます。

*1 Android や iOS アプリも Web ブラウザーをアプリ上に表示しているようなものです。これを Web View と呼びます。 ^

JavaScript でできることと使い所

JavaScript でできる範囲は、簡単にいえば「Web ブラウザーでできる範囲」といえます *1
表示されているデータの並び替え、色や大きさの変更、データの修正、追加、いろんなことができますが、サーバーのデータを直接書き換えたりなどはできません。
サーバーとのデータのやりとりについては今後の項で説明します。

*1 サーバーサイドで動作する JavaScript 実行環境も存在します。今回は kintone のカスタマイズに限った話です。 ^

JavaScriptの身近な例

身近な例では、Web サイトのボタンや画像のスライドショーなど、普段目にしている Web サイトでないところはないと言っていいほど至るところに JavaScript は使われています。

Twitter のツイートするボタン

ツイートするボタンを押すと投稿内容を入力するダイアログが表示されるような、「ボタンを押すと何かが動く」処理は、JavaScript で実装されています。

スクリーンショットは、Twitter の @kintonedevjp (External link) より引用しています。

画像のスライドショー(カルーセル表示)

スライドショーのように画像を切り替えて表示する処理も JavaScript によるものです。

kintone の JavaScript カスタマイズでできる具体的な例

kintone (External link) というクラウドサービスはとても簡単に業務アプリが作成でき、さらに柔軟でカスタマイズ性も高いです。
実際につかってみて、今まで管理に苦しんでいた Excel やその他スプレッドシート、他社製品の代わりとして社内で活用したいと思うようになった方も多いと思います。
もちろん私もその一人です。
しかも、kintone は JavaScript カスタマイズをすることも可能(スタンダードコースのみ)なので、本当に幅広くカスタマイズできます。
cybozu developer network では、1 年間無償で kintone を利用できる 開発者ライセンス も提供しています。

kintone の JavaScript カスタマイズ例としては、たとえば独自の計算したいときです。
kintone には計算フィールドがありますが、Excel のように IF 関数はありません。
JavaScript カスタマイズを用いると、チェックボックスにチェックをいれているときだけ消費税計算させる、というようなことができます。
他にも、しきい値を超えるとフォントの色や大きさを変えたり、kintone の基本機能でサポートしていないこともたくさんできます。

具体的には、次のようなカスタマイズができます。

  • 条件付き書式

  • Map の表示

  • ガントチャート

  • 独自の一覧(カスタマイズビュー)

これらのカスタマイズは cybozu developer network の kintone 開発 Tips で紹介しています。
しかし理屈がわかっていないと、細かい修正や書かれていること以上のことができないため、このシリーズを通して JavaScript カスタマイズをマスターしましょう。

kintone をきっかけに JavaScript を始める皆さんへ

上記の例を踏まえて、kintone の JavaScript カスタマイズに少しでも興味を持っていただければ幸いです。

kintone は簡単に業務アプリが作成でき、さらに柔軟でカスタマイズ性も高いです。
実際につかってみて、今まで管理に苦しんでいた Excel やその他スプレッドシート、他社製品の代わりとして社内で活用したいと思うようになった方も多いと思います。
もちろん私もその一人です。
しかも、kintone は JavaScript カスタマイズをすることも可能(スタンダードコースのみ)なので、本当に幅広くカスタマイズできます。

しかし、JavaScript を知らない方や今まで開発をしたことのない人にとって、JavaScript は少し難しく見えます。
「そもそも JavaScript って何?Java なら聞いたことはあるけど。Excel の VBA と何が違うの?JavaScript でできることは何?」と思うかもしれません。 経理や総務担当の人がいきなり kintone を触り始めたケースも少なくないでしょう。
勉強をしようと試みるも Web 上には断片的な情報しかなく、JavaScript の参考書はたくさんあるものの、ゼロから覚えるのもたいへんですし、kintone のカスタマイズを絡めたものはおそらくまだありません。

当シリーズではそういった方向けにkintoneを通じてJavaScriptの解説をしていきます。
JavaScript について学べるだけでなく、具体的にどういう風に kintone とつかいこなすか、ということについても説明していきます。
このシリーズで楽しい JavaScript カスタマイズライフを支援できればと思っています。
多少の"お勉強"は必要になりますが、「kintone をもっと使いやすくして社内の業務を効率化したい」という気持ちさえあれば、JavaScript カスタマイズはそんなに難しくありません。
学習を重ねていけば kintone をもっと楽しく柔軟に、効率よく扱えるようになるはずです。

そして、当シリーズを学び終えたら、ぜひ はじめよう kintone API にチャレンジしてみてください。
JavaScript の理解をしてから取り組むと、きっと理解の進み具合や楽しさも段違いになるでしょう。