リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript
（著者：kintone エバンジェリスト 村濱 一樹）
はじめに
当連載は、プログラム経験が初めての方や、本職がITエンジニアでない方が、無理なく段階的にJavaScriptの基本的な知識を学んでいただけるコンテンツです。
このコンテンツを読んで、コンテンツに沿って実際にプログラムを書いてみることで理解を深めることができます。
また、忙しくて時間がない方も、スマートフォンですき間時間に概要を読み、後でPCで手を動かしてみることで、効率良く学習を進められます。
プログラミング入門としてぜひお役立てください。
JavaScriptってなに？
JavaScriptはブラウザーを操作することができる
JavaScriptはWebブラウザー上で動作させることのできる代表的なプログラミング言語です。例えば、あるサーバーからデータを取ってブラウザに表示したり、計算させたり、あるいは表示されているテキストの色を変えたり場所を移動させたり、ブラウザ上に表示されることなら大抵のことはできてしまいます。kintoneはWebブラウザー上で動作しますし(*1)、JavaScriptの組み込みも許可していますので、JavaScriptを使えば本当に色んなことが実現可能です。
実際に、過ぎるほどにできることが多いので、コーディングガイドラインがあります。これに従わなければkintoneのアップデートのタイミングでJavaScriptのコードが動かなくなる可能性もあります。
プログラミング言語と言えば、他にはC言語やPHP、Rubyなどがあります。Excelのマクロを組むためのVBAもプログラミング言語の１つと言えます。そして、JavaScriptとJavaは名前が似ているだけで 全くの別物 です。なので、JavaScriptを「Java」と言ってしまわないようにしましょう。
また、JavaScriptは決して難しいプログラミング言語ではありません。例えばJava(JavaScriptではありません！)やC言語で言えばコンパイルやビルドなどの作業が必要になりますし、開発環境から用意しないといけませんがJavaScriptはテキストエディタとそれを実行するためのWebブラウザーさえあればプログラムが書けます。
JavaScriptでできることと使い所
JavaScriptで出来る範囲は、簡単に言えば「Webブラウザーで出来る範囲」といえます(*2)。表示されているデータの並び替え、色や大きさの変更、データの修正、追加、いろんな事が出来ますが、サーバーのデータを直接書き換えたりなどはできません。サーバーとのデータのやり取りについては今後の項で説明します。
JavaScriptの身近な例
身近な例では、Webサイトのボタンや、画像のスライドショーなど、普段目にしているWebサイトでないところはないと言っていい、至るところにJavaScriptは使われています。
- Twitterのツイートするボタン(Twitterの@kintonedevjp https://twitter.com/kintonedevjp より引用)
- 当サイトの画像のスライドショー(https://developer.cybozu.io/hc/ja より引用)
kintoneのJavaScriptカスタマイズでできる具体的な例
kintoneというクラウドサービスは非常に簡単に業務アプリが作成でき、さらに柔軟でカスタマイズ性も高いです。実際につかってみて、今まで管理に苦しんでいたExcelやその他スプレッドシート、他社製品の代わりとして社内で活用したいと思うようになった方も多いと思います。もちろん私もその一人です。しかも、kintoneはJavaScriptカスタマイズをすることも可能(スタンダードコースのみ)なので、本当に幅広くカスタマイズすることができます。
kintoneの開発者ライセンスはこちらのページでご案内しています。無償です。
kintoneのJavaScriptカスタマイズ例としては、例えば独自の計算を行いたい時です。kintoneには計算フィールドがありますが、ExcelのようにIF関数はありません。JavaScriptカスタマイズを用いると、チェックボックスにチェックをいれているときだけ消費税計算させる、というようなことができるようになります。他にも、しきい値を超えるとフォントの色や大きさを変えたり、kintoneの基本機能でサポートしていないこともたくさんできるようになります。
具体的には、下記のようなカスタマイズができます。
- 条件付き書式を設定する
- kintone上でMapを表示する
- ガントチャートを表示する
- 独自のビューを設定する（カスタマイズビュー）
上記のカスタマイズはcybozu developer networkに掲載されていますが、理屈がわかっていないと細かい修正や書かれていること以上のことができませんので、このシリーズを通して、JavaScriptカスタマイズをマスターしましょう。
*1) Android/iOSアプリもWebブラウザーをアプリ上に表示しているようなものです（Web Viewといいます）
*2) サーバーサイドで動作するJavaScript実行環境も存在します。今回はkintoneのカスタマイズに限った話です。
kintoneをきっかけにJavaScriptを始める皆さんへ
上記の例を踏まえて、kintoneのJavaScriptカスタマイズに少しでも興味を持っていただければ幸いです。
kintoneは非常に簡単に業務アプリが作成でき、さらに柔軟でカスタマイズ性も高いです。実際につかってみて、今まで管理に苦しんでいたExcelやその他スプレッドシート、他社製品の代わりとして社内で活用したいと思うようになった方も多いと思います。もちろん私もその一人です。しかも、kintoneはJavaScriptカスタマイズをすることも可能(スタンダードコースのみ)なので、本当に幅広くカスタマイズすることができます。
しかし、JavaScriptを知らない方や今まで開発をしたことのない人にとって、JavaScriptは少し難しく見えます。「そもそもJavaScriptってなに？Javaなら聞いたことはあるけど...ExcelのVBAと何がちがうの？何が出来て何が出来ないの？」。経理や総務担当の人がいきなりkintoneを触り始めたケースも少なくないでしょう。勉強をしようと試みるも、Web上には断片的な情報しかなく、JavaScriptの参考書はたくさんあるものの、ゼロから覚えるのも大変ですし、kintoneのカスタマイズを絡めたものはおそらくまだありません。
当シリーズではそういった方向けにkintoneを通じてJavaScriptの解説をしていきます。 JavaScriptについて学べるだけでなく、具体的にどういう風にkintoneとつかいこなすか、ということについても説明していきます。このシリーズで楽しいJavaScriptカスタマイズライフを支援できればと思っています。多少の"お勉強"は必要になりますが、「kintoneをもっと使いやすくして社内の業務を効率化したい」という気持ちさえあれば、JavaScriptカスタマイズはそんなに難しくはありません。学習を重ねていけばkintoneをもっと楽しく柔軟に、効率よく扱えるようになるはずです。
そして、当シリーズを学び終えたら、ぜひ「はじめよう kintone API」にチャレンジしてみてください。JavaScriptの理解をしてから取り組むと、きっと理解の進み具合も楽しさも段違いになるでしょう。
つまらない事で、すみません。
栗田様
お世話になっております。cybozu developer network 運営局です。
記事の誤記、ご指摘くださりありがとうございます。
修正させていただきました。
これからもよろしくお願いいたします。
とても分かりやすくて楽しいチュートリアルですね。
勉強とは思えません。
gold_brend 様
お世話になっております。cybozu developer network 運営局です。
ありがたいお言葉を頂きまして、誠にありがとうございます。
引き続き cybozu.com developer network をよろしくお願いいたします。
社内のExcelファイルがバラバラになっているため、これをKintoneで連携したい、と契約しました。
Kintoneのhpから、検索キーワードを工夫しないと、cybozu developer networkまで来られません。
これからのユーザーのため、今まで以上にcybozu developer networkを前面に押し出してアピールしてください。
お手数ですが、よろしくお願いします。
gold_brend 様
お世話になっております。cybozu developer network 運営局です。
cybozu developer networkの運営にあたり、
至らない点をご指摘頂き、誠にありがとうございます。
今後はより多くのユーザー様にご活用いただけるよう、運営してまいります。
今後とも、何卒よろしくお願いいたします。