はじめようJavaScript第1回 JavaScriptとは

フォローする


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

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

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

しかし、JavaScriptを知らない方や今まで開発をしたことのない人にとって、JavaScriptは少し難しく見えます。「そもそもJavaScriptってなに?Javaなら聞いたことはあるけど...ExcelのVBAと何がちがうの?何が出来て何が出来ないの?」。経理や総務担当の人がいきなりkintoneを触り始めたケースも少なくないでしょう。勉強をしようと試みるも、Web上には断片的な情報がなく、JavaScriptの参考書はたくさんあるものの、ゼロから覚えるのも大変ですし、kintoneのカスタマイズを絡めたものはおそらくまだありません。
当シリーズではそういった方向けにkintoneを通じてJavaScriptの解説をしていきます。 JavaScriptについて学べるだけでなく、具体的にどういう風にkintoneとつかいこなすか、ということについても説明していきます。このシリーズで楽しいJavaScriptカスタマイズライフを支援できればと思っています。多少の"お勉強"は必要になりますが、「kintoneをもっと使いやすくして社内の業務を効率化したい」という気持ちさえあれば、JavaScriptカスタマイズはそんなに難しくはありません。学習を重ねていけばkintoneをもっと楽しく柔軟に、効率よく扱えるようになるはずです。

JavaScriptってなに?

JavaScriptはブラウザーを操作することができる

まずはJavaScriptについて明らかにしましょう。JavaScriptはWebブラウザー上で動作させることのできる代表的なプログラミング言語です。例えば、あるサーバーからデータを取ってブラウザに表示したり、計算させたり、あるいは表示されているテキストの色を変えたり場所を移動させたり、ブラウザ上に表示されることなら大抵のことはできてしまいます。kintoneはWebブラウザー上で動作しますし(*1)、JavaScriptの組み込みも許可していますので、JavaScriptを使えば本当に色んなことが実現可能です(*2)。

プログラミング言語と言えば、他にはC言語やPHP、Rubyなどがあります。Excelのマクロを組むためのVBAもプログラミング言語の1つと言えます。そして、JavaScriptとJavaは名前が似ているだけで 全くの別物 です。なので、JavaScriptを「Java」と言ってしまわないようにしましょう。
また、JavaScriptは決して難しいプログラミング言語ではありません。例えばJava(JavaScriptではありません!)やC言語で言えばコンパイルやビルドなどの作業が必要になりますし、開発環境から用意しないといけませんがJavaScriptはテキストエディタとそれを実行するためのWebブラウザーさえあればプログラムが書けます。JSEdit for kintoneというプラグインを使えばテキストエディタすら必要ないので手軽なプログラミング言語であることは間違いありません。

JavaScriptでできることと使い所

JavaScriptで出来る範囲は、簡単に言えば「Webブラウザーで出来る範囲」といえます(*3)。表示されているデータの並び替え、色や大きさの変更、データの修正、追加、いろんな事が出来ますが、サーバーのデータを直接書き換えたりなどはできません。サーバーとのデータのやり取りについては今後のkintone APIの項で説明します。
kintone上での例としては、例えば独自の計算を行いたい時です。kintoneには計算フィールドがありますが、ExcelのようにIF関数はありません。JavaScriptカスタマイズを用いると、チェックボックスにチェックをいれているときだけ消費税計算させる、というようなことができるようになります。他にも、しきい値を超えるとフォントの色や大きさを変えたり、kintoneの基本機能でサポートしていないこともたくさんできるようになります。

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

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

  • 条件付き書式を設定する
    _____.PNG
  • kintone上でMapを表示する
    map.png
  • ガントチャートを表示する
    img_150106135833-00.png
  • 独自のビューを設定する(カスタマイズビュー)
    kintone2.png

    上記のカスタマイズはcybozu developer networkに掲載されていますが、理屈がわかっていないと細かい修正や書かれていること以上のことができませんので、このシリーズを通して、JavaScriptカスタマイズをマスターしましょう。

*1) Android/iOSアプリもWebブラウザーをアプリ上に表示しているようなものです(Web Viewといいます)
*2) 実際に、過ぎる程にできることが多いので、コーディングガイドラインがあります。これに従わなければkintoneのアップデートのタイミングでJavaScriptのコードが動かなくなる可能性もあります。
*3) サーバーサイドで動作するJavaScript実行環境も存在します。今回はkintoneのカスタマイズに限った話です。

 

はじめようJavaScript第2回 かんたんなプログラムを書いてみよう>>

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk