第 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の理解をしてから取り組むと、きっと理解の進み具合や楽しさも段違いになるでしょう。