kintone devCamp Step1 復習コンテンツ

こちらは ステップで学ぶ kintone カスタマイズ勉強会」kintone devCamp Step1 ~JavaScript と kintone~ の復習コンテンツです。

🍙 はじめに

Step1 では JavaScript 自体の用語・基本構文や kintone での JavaScript の実行の仕方を勉強しました。
この記事では、 Step1 の講義中に出てきた 用語 や 基本構文 のおさらいができるプチ用語集/問題集となっています。

🍙 目次

• 重要用語
• 理解度Check!
• 演習問題
  • 問題① (難易度:⭐)
  • 問題② (難易度:⭐⭐)
• ステップアップ情報

🍙 重要用語

JavaScript を学ぶ上でとても重要な用語になります。これらの意味・違いはきちんと抑えておきましょう！

• オブジェクト
  • イベントオブジェクト
• 関数
• パラメータ
• イベント

オブジェクト

色々なデータが入っている物
何が入っているか、何が出来るかは物によって違う。

オブジェクトの例

• window
• console
• document
• kintone ¹

イベントオブジェクト

(イベント時の)ページ内のデータが入った物
kintoneの場合、レコードの情報やイベントの情報など様々なデータが入ってる。

イベントオブジェクトの例

• kintoneのレコードの追加画面を開いた時のイベントオブジェクト

const logMessage = (event) => {
  console.log(event);
  // ↑この 「event」オブジェクトの中に "追加画面を開いた時のkintoneのデータ" が入っている
};

kintone.events.on('app.record.create.show', logMessage);

• kintoneのレコードの編集画面で提案プランフィールドを変更した時のイベントオブジェクト

const showMessage = (eventData) => {
  console.log(eventData);
  // ↑この 「eventData」オブジェクトの中に "編集画面で提案プランフィールドを変更した時のkintoneのデータ" が入っている
  // この「eventData」の部分は好きな名前に変更することも可能
  // （ex. event/resp/data） 
};

kintone.events.on('app.record.edit.change.提案プラン', showMessage);

関数

呼び出すと、様々な処理を行ってくれる
自分で関数を作ることもできる。上記のオブジェクトの中に入っているとメソッドとも呼ばれる。
関数以外に ファンクション と呼ばれることもある。

関数の例

• alert()
• log()
• on()

パラメータ

関数に渡す物
関数を実行するのに必要な情報で、渡すものは様々。
パラメータ以外に 引数 と呼ばれることもある。

パラメータの例

• alert('Hello World')
• log(event)
• on('app.record.edit.change.提案プラン', showMessage)

イベント

関数を呼び出すタイミング
「ボタンクリック時」や「ページのロード時」など、様々なイベントが存在する。

イベントの例

• （記載なし） ← JavaScriptが読み込まれた時
• click ← クリック時
• app.record.edit.change.提案プラン ← kintoneのレコード編集画面で提案プランフィールドを変更した時

🍙 理解度Check!

Step1講義の理解度を確認するための簡単な問題を用意しました。
頭の中でどんなプログラムを書けばよいかぱっと思いつくことができればOKです！

アラート表示

「Hello World!」 というアラートを表示させるプログラムは・・・

答え（ここをクリックすると表示されます）

window.alert('Hello World!');

関数の定義と実行

「Hello World!」 というアラートを表示させる関数（showMessage関数）の定義と実行するプログラムは・・・

答え（ここをクリックすると表示されます）

// 関数の定義
const showMessage = () => window.alert('Hello World!');

// 関数の実行
showMessage();

要素の取得

**「target」**というid名の要素を取得するプログラムは・・・

答え（ここをクリックすると表示されます）

document.getElementById('target');

イベントと関数を紐づける

「Hello World!」 というアラートを表示させる関数（showMessage関数）を、**「target」**というid名の要素をクリックした時に実行するプログラムは・・・

答え（ここをクリックすると表示されます）

// 関数の定義
const showMessage = () => window.alert('Hello World!');

// 関数の実行をクリックイベントに紐づける
document.getElementById('target').addEventListener('click', showMessage);

🍙 演習問題

講義中に触れた内容に近い演習問題を用意しました。
これらの問題を難なく解くことができれば、Step1の理解はもうばっちりです！

問題① (難易度:⭐)

ユーザにテキストを入力することを促すメッセージを持つダイアログを表示

考え方

• テキスト入力ができるダイアログを表示する JavaScript は何か

ヒント

ヒント(ここをクリックすると表示されます）

• テキスト入力ができるダイアログを表示する JavaScript は何か
  • window オブジェクトには .alert() や .confirm() 以外にもいろいろなメソッドがある
  • https://developer.mozilla.org/ja/docs/Web/API/Window#Methods

答え

答え(ここをクリックすると表示されます）

正解.js

window.prompt('何か入力してください');

問題② (難易度:⭐⭐)

Webサイト上で入力されたキーをコンソールに表示させる

例） devnet上で 「c y b o z u Enterキー Shiftキー Controlキー １ ２ ３ k i n t o n e」 とキーボード上で入力した場合の動き

考え方

• イベントは何か
• 対象のオブジェクトは何か
• 実行したい処理は何か

ヒント

ヒント(ここをクリックすると表示されます）

• イベントは何か
  • キーが入力された時 を受け取るイベントとして keydown イベントがある
• 対象のオブジェクトは何か
  • Webサイトのページ上を表すオブジェクトは document オブジェクト
• 実行したい処理は何か
  • 入力されたキーは、 イベントオブジェクト内のkey event.key に格納されている
    • まずはイベントの処理部分に console.log(event)と書いて、イベントオブジェクトの中身を確認してみましょう
  • それをコンソールに表示するので console.log(event.key);

答え

答え(ここをクリックすると表示されます）

正解.js

const showKey = (event) => console.log(event.key);

document.addEventListener('keydown', showKey);

🍙 ステップアップ情報

お疲れ様でした！復習はできましたでしょうか？
まだ難しいところはたくさんあると思いますが、わからないことはcybozu developer networkの記事をみたり、コミュニティを活用したりしながら引き続き頑張っていきましょう！

他にも予習・復習にお使いいただけるコンテンツがありますので、ぜひチャレンジしてみてください

cybozu developer network はじめようシリーズ

• kintone API 編（全12回）

cybozu developer network Tips

• 回答の条件によって別フィールドの表示/非表示を切り替える

• 回答の条件によってグループフィールドの開閉を切り替える

最後まで読んでいただきありがとうございました！
それではまた次回👋

1. kintone内でのみ利用できるオブジェクトです。 ↩