自力で開発の勉強を出来る人が参考になる情報源や考え方(主にJavaScript実行環境)

TOMA ITコンサル部

はじめに

kintoneのカスタマイズjsのサンプルと開発の流れについてで環境の準備からリリースまでの手順を説明しましたので、TypeScriptによりkintone上で動作するプログラムを書きさえすれば、kintoneで動作する開発が一通り出来る事になります。
ここで更に詳細な技術等の解説も予定しているのですが、中には"面倒な環境の準備"を飛び越えられれば、後は自力でそこそこコーディングを出来る人もいると思います。
更にkintoneのカスタマイズjsのサンプルと開発の流れについてで参照しているサンプルコードは、node.js用のJavaScriptにトランスパイルする準備も出来ています。
そこで本エントリーでは自力で調べながら開発出来る人向けに、開発のコツや情報源をお伝えしようと思います。

補足：JavaScript・TypeScript・トランスパイルについて

本ブログをお読みの方の中には多分JavaScriptとTypeScriptとトランスパイルが何か分からない人もいると思うので、簡単に説明します。
JavaScriptもTypeScriptもプログラム言語ですが、TypeScriptをJavaScriptに変換する事をトランスパイルと呼びます。(コンパイルみたいなものです。)
JavaScriptによる開発は型のチェックが曖昧になりがちで、大規模な開発では不具合を含みやすい特徴があり、それを克服するためにMicrosoftがTypeScriptを開発しました。
よってTypeScriptを直接実行出来る環境(ブラウザやnode.js、Excelのアドイン)はありません。(厳密には裏でトランスパイルしながらTypeScriptをそのまま実行できるモジュールもありますが。)
全ての実行環境ではJavaScriptにトランスパイルしないと実行出来ません。

TypeScriptの文法について

まずTypeScriptの文法についてです。Webで勉強したいのであれば以下が参考になります。書籍はオライリーの本が個人的には分かりやすかったです。

参考リンク
TypeScript
TypeScript 日本語ハンドブック
TypeScript Deep Dive 日本語版

参考書籍
プログラミングTypeScript スケールするJavaScriptアプリケーション開発

kintoneのAPIについて

次にkintoneのAPIです。kintoneでカスタマイズしたプログラムを動かそうとすると、レコードの一覧画面や詳細画面、編集画面でイベントをキャッチしてプログラムを動かす事になります。例えばkintoneのカスタマイズjsのサンプルと開発の流れについてのサンプルコードでも次のように実装しています。

import * as kintoneLib from '../lib/kintoneLib';
(function () {
	"use strict";
	kintone.events.on(['app.record.create.submit', 'app.record.edit.submit', 'app.record.index.edit.submit'], async function(event: kintoneLib.KintoneEvent<kintone.types.SavedSampleApp>) {
		let record = event.record;
		// 対象のkintoneの項目が「undefined」「null」「空文字」で無い事を確認する。
		if (record.元の数値.value != undefined && record.元の数値.value != null && record.元の数値.value && record.元の数値.value != '') {
			// 項目「元の数値」を5倍にして、項目「カスタマイズで5倍にした数値」に格納する。
			record.カスタマイズで5倍にした数値.value = String(Number(record.元の数値.value) * 5);
		}
		return event;
	})
})();

これは以下のイベントを取得して、必要な処理を行っています。
app.record.create.submit：新規レコードの編集画面における保存ボタン押下時のイベント
app.record.edit.submit：既存レコードの編集画面における保存ボタン押下時のイベント
app.record.index.edit.submit：既存レコードのレコード一覧画面における保存ボタン押下時のイベント

これらの他にもある様々なイベントの説明や、更にはkintoneに対してどのような事が出来るかが記載されているのが、先に挙げたkintoneのAPIのサイトです。
開発者コミュニティによる質問やその回答もあくさんあるので、開発を行いたい人は参考にすると良いと思います。

その他の必要な情報

kintoneで簡単なプログラムを動かすだけであれば、上に挙げたkintoneのAPIのサイトだけでもそこそこ困らないのですが、色々な事を行おうとすると以下の情報が必要になります。ただそれぞれ細かく説明すると長くなるので、概要と参考になる情報源のリンクのみを載せておきます。(リンク先は、本エントリーを執筆している高橋のブックマークの中で上の方にあるものを選びました。あまり深い意図はありません。)

npmについて

npmはnode.jsをインストールすると付随してインストールされるnode.jsのモジュールのパッケージマネージャーです。

参考リンク
便利なnpmコマンド

弊社のサンプルコードのpackage.jsonには、npmで実行出来るコマンドをscripts項目にてまとめているので、例えばnode.jsで実行出来るようにトランスパイルしたい場合などは、参考にしてください。

VS Codeについて

Microsoftが開発した高性能なエディタです。(リンク)
(ただWebで調べるとここにもありどんな違いがあるのかは把握していません。Googleで検索すると後者の方が検索順位が高いです。)
今どきの開発者の殆どはVS Codeを用いて開発していると思います。機能拡張も容易で、学ぼうとするとショートカットキーの把握や、画面構成、拡張機能の把握など多岐に渡ります。

検索すると大量に情報が探せるのと、私自身なかなかVS Codeの詳しい勉強は出来ていないためあえてリンクは貼らないでおきます。(正直あまり自信がありません。。。)

GitやGitHubについて

Gitはバージョン管理用のソフトウェアです。GitHubはそれをクラウドで提供するサービスです。

参考リンク
基本コマンド
Git - Book

参考書籍
やりたいことが今すぐわかる 逆引きGit入門 : 執筆者である高橋が読んだ中ではこの本が分かりやすかったです。Gitは重要な技術なので、一度しっかり勉強した方が良いと思います。

Gitに限らずバージョン管理ソフトの目的はソフトウェアの品質管理になると思いますが、こちらは長くなるので別エントリーで述べようと思います。

webpackについて

webpackはJavaScriptにおけるバンドラーソフトです。JavaScriptやTypeScriptの文法上で取り込めるファイルは基本このソフトウェアで1つのJavaScriptのファイルに出来、実行可能となります。
これはkintone開発においても重要で、kintoneのカスタマイズにおいて登録出来るファイルはjsファイルかcssファイルに限ります。よってkintoneに登録できないjsonファイルや画像ファイルなどをJavaScriptで扱いたく、しかし諸々の事情でkintone外のネットワークには通信させたく無いような場合でも、webpackを用いれば、これらのファイルを扱う事が出来ます。

参考リンク
最新版で学ぶwebpack 5入門 JavaScriptのモジュールバンドラ

webpackも様々な事が出来るのですが、今回は説明を省略します。

tscについて

TypeScriptの開発が主になりwebpackを使っているとあまり使わなくなるのがMicrosoftが開発したトランスパイラーであるtscコマンドですが、これも未だに使います。(使う状況は、話が長くなるので省きます。)

ただtscコマンドは、私もテンプレート的な設定情報以外はあまり使わないので、あえてリンク等は省きます。

その他諸々

上に挙げたもの以外でもJavaScriptのライブラリや技術はたくさんあるので、弊社が主に使っているものを簡単に紹介します。

wijmo : グレープシティ社が販売しているWeb上でExcelのような表やグラフを簡単に表現できるライブラリです。とても便利です。
React : 以前のエントリーでも紹介したhtmlを容易に表現するフレームワークです。
Express : node.jsで動作するWebアプリケーションサーバのデファクトスタンダードです。
AWS : あえて書くまでも無いかもしれませんが、クラウドサービスです。Web APIを通して様々な事が出来るので、JavaScriptからの操作可能なため挙げました。
Excelのアドイン : 最近はExcelのアドインもJavaScriptで記述・実行出来るようです。作り方もこちらに書いてあるようです。(ExcelのアドインのJavaScriptによる開発は、他の項目と異なりまだ弊社では行っておりません。)

まとめ

以上のようにJavaScriptは今ではウェブブラウザ・サーバサイド(node.js)・Excel等のOffice製品で動作し、ブラウザ・サーバ・クラウドをコントロール出来ますので、大抵の環境でやりたい事を実現出来ます。最近ではスマートフォンやWindows上でも動作出来るReact Nativeもあります。
もし本エントリーを読まれている皆様がこのようなどこでも実行できる言語を習得し使いこなせるようになれば、仕事・趣味などに限らず様々な恩恵を被る事が出来ますので、参考になれば幸いです。

この記事が気に入ったらサポートをしてみませんか？