kintone 認定 カスタマイズスペシャリストへの道 - Episode 0 - 2 JavaScriptでアウトプット

1. 前回まで

前回は、HTMLとCSSの勉強しました。

VS CODE の環境作るのはちょっと面倒ですが、後でラクになる期待大です。

2. 本日のお話

本日勉強したのはコチラ！ JavaScriptでアウトプット（出力）してみようです。

JavaScriptでアウトプット（出力）してみよう

ここでは、Webブラウザについている開発者ツールを使って次の３つのことを学びました。

1. コンソールへのアウトプット

2. ダイアログボックスへのアウトプット

3. HTMLやCSSへのアウトプット

3. 学んだこと

3-1. コンソールへのアウトプット

開発者ツールのコンソールタブに「console.log('ようこそ！kintoneへ');」と入力し、Enterキーを押せば、「ようこそ！kintoneへ」とアウトプットされることがわかりました。

あと括弧の中をカンマで区切れば、数字や文字を横並びでアウトプットしてくれました。

たくさんアウトプットしたい時には番号振っておくと、わかりやすい！

応用編としてkintoneカスタマイズ向けに開発者ツールの便利な使い方をまとめたページがあったので、リンク載せておきますね。

開発者ツールの便利な使い方リンク

• Google Chrome 開発者ツールの Tips 集 - kintone 開発特化編

• Google Chrome 開発者ツールの Tips 集 -DOM 要素編

• Google Chrome 開発者ツールの Tips 集 -デバッグ効率化編

4. ダイアログボックスへのアウトプット

console.log('アウトプットしたい文字列');と同じような書き方で、
window.alert('アウトプットしたい文字列');と入力すれば、
ダイアログボックスを表示する事が出来ました。

同じようにwindow.confirm('アウトプットしたい文字列');と入力すれば、質問形式のダイアログボックスを表示する事も知りました。

window.confirm('今日はいい天気ですか？');

OKを押せばtrue. キャンセルを押せばfalseという値が戻ってきました。

5. Webページへのアウトプット

DOMという仕組みをつかってプログラムからHTMLを操作できるとわかりました。その一方で、kintoneでのDOM操作はあまり使われておらず、なるべくkintone独自の kintone JavaScript API を使ってHTMLを操作したほうが良いそうです。kintoneの画面の仕様がかわると想定通りに動かないかもしれないので、DOM操作はあまり使わない方が良い。。。という事ですね。

ちなみにEnterキーだけ押した場合は、その場で命令が実行されますが、
「Shift＋Enter」キーで命令文の改行が出来ます。
入力する命令分が長い場合は、何かは便利ですねー。

上は１行で、下は４行で書いてみました。どちらも全く同じように動作しました。

6. まとめ、感想

毎日使っているWebブラウザでも開発ツールを使えばいろんなことが出来るんですね。またファイルや環境を用意しなくても、コンソールに直接命令を書いて実行できるので、これからカスタマイズを進めて行くときに「こんな書き方であってるのかな？」って迷った時、簡単に試す事が出来るんで使う場面が増えそうって思いました。
何かあったらまず開発者ツールって感じでもいいかもしれないですね。

7. 次回予定

「変数／データ型／データの演算方法」について学びます。
ちょっと小難しそうですが、コツコツ進めていきまーす☆彡