トーク

ユーザー画像
2021/11/21 02:37

カスマイズビューの制作過程をブログに書いていきます!

最近、ジュリドンさんのQiitaを読んで、制作過程が書かれた記事はとても勉強になるなぁと思っていました。
kintoneでレコード全件について関連レコードの項目を集計して更新する機能を泥臭くカスタマイズする【その1】

そこへきて、昨日、西村さんから、僕のやってみたシリーズ用スペースをつくってくださったとコメントいただきまして、やる気がみなぎってきまして、さっそく制作過程をブログに起こすことにしました!

シリーズ化してやっていこうと思います!

kintone カスマイズビューを練習してみよう その1



この投稿を共有する
閉じる
URLをコピー URLをコピー
3件のコメント (新着順)
ユーザー画像
ユーザー画像
ジュリドン
2021/11/22 14:32

紹介くださってありがとうございます~👀✨✨
制作過程ってなかなか書くの大変ですが、自分の頭も整理されて?楽しいですよね(´ω`)✨✨

カスタマイズビューのいじり方、めっちゃ勉強になります👀✨✨



ユーザー画像
ユーザー画像
Hazime
2021/11/22 21:18

ジュリドンさん

こちらこそありがとうございます♪
制作過程書いてると、今までなんとなくスルーしてたことが整理できたり、反対に深みにハマったり…ほんと楽しいです!

ジュリドンさんの続編も楽しみにしてます♪


ユーザー画像
ユーザー画像
きったん
2021/11/22 11:15

Hazimeさんこんにちは!

Twitterの方にも投稿しましたが、
Hazimeさんのブログを見ながら、何とかしてカスタマイズビューの第1歩を踏み出すことができました。
ほぼ写経するだけなのにうまくレコードを表示することができず・・・

何が違うんだ?どこを間違ってるんだ?と考えたり、ググったり。
一回でうまくいかないことが逆にいろんなことを調べるきっかけにもなれたのでメチャクチャいい経験になりますね!!!

まだテーブルを表示できたレベルでしかないのですが「やりたいこと」に向けて、
いっぱい勉強していきます。たくさん参考にさせてください!

ありがとうございました!



ユーザー画像
ユーザー画像
Hazime
2021/11/22 12:57

きったんさん

こんにちは!ありがとうございます♪

きったんさんが以前Twitterで、VBAで配列覚えたときの投稿された時、『ドラクエのレベルアップの音』という表現されたことに凄く共感したのを思い出しました!

kintoneカスタマイズでもレベルアップの音をたくさん聞けるように僕も日々勉強してブログに投稿していきますので引き続きよろしくお願いします!


ユーザー画像
ユーザー画像
西村 志郎
2021/11/22 08:05

Hazimeさん

ステップ・バイ・ステップでJSカスタマイズが理解できてすごくわかりやすいです!

「テンプレート文字列」はじめて知りました!
コード内の変数を含む文字結合は他の言語でも面倒な処理のひとつ。コレ見た目もすっきりして改行もできていいですね。

また、コードの書き方も、records[0].$id.value でも records[0]['$id']['value'] でも同じ処理ができて、「どの書き方すればいいの?」って戸惑うかもしれません。

これすごく大事で、初心者にとって「エラーが出て動かない」のも問題ですが、「どちらでも動いてしまう」や「エラー(ワーニング)は出るけど動いてしまう」などもハマリポイントです。

熟練者はその意味や影響度がわかるのでよいですが、初心者はそのどちらもわからないので迷いますよね。
私は逆にエラーが出て明示的に動かないのはまだラッキーという感覚です。^^;

今回はHajimeさんの記述方針まで記載されてて大変参考になりました。正直ココに触れてる情報はあまりなくて貴重です。ある意味正解はひとつではないキンコミ的な部分を感じました。

ちなみにおっしゃってるエラーとは添付の「~is bettre written in dot notation」との理解でよいでしょうか。

あとひとつわからないことがあったので質問です。
trタグの</tr?>の?はなぜ必要なのでしょうか?先ほどの話ではないですが、ココ?を消しても動くようです。

基本的なことかもしれませんがよろしければ教えてください。

kintoneの利用についてJSカスタマイズは必須ではないですが「できる・できない」で言えば「できる」方がよいわけで、それを実業務で使うかはまた別の話。何よりJSカスタマイズはkintoneの色々な可能性を感じることができてワクワクします。

ひきつづき楽しみにしています。^^



ユーザー画像
ユーザー画像
Hazime
2021/11/22 08:50

西村さん

ありがとうございます♪
帰宅したらじっくり内容確認しますね!

取り急ぎ確認した点ですが、/tr?は単純なタイプミスです。失礼しました。
それではなぜ、そのままでも行が正しく表示されたかを調べてみました。

HTML5からtrの閉じタグは省略可能になっているようです。
参考記事↓
https://agohack.com/html-closetags/

したがって閉じタグが間違っていてたけど次の行の開始のtrタグを認識して狙った表示になっていたと考えられます。

僕も一つ勉強になりました!ありがとうございます♪

またあらためて返信します!


ユーザー画像
ユーザー画像
Hazime
2021/11/23 15:44

西村さん

おまたせしました!
「~is better written in dot notation」についてですが、いいところに質問いただけたと思っています!

まず、is betterについては、僕がブログで書いたエラーのこととは違うのですが、非常に興味深い内容なので僕の考えを書きますね。

この注意表示なのですが、おそらくkintoneカスマイズの特有のものと僕は推察しています。(あくまで僕の推察です。)
というのは、今回の記事を作成する際、僕は主にPCにインストールしてあるコードエディタのVS Codeを使っています。VS Codeではこの注意表示はでてきません(VS Codeにkintone用の拡張機能とかいれるとでるのかな?折り見て試してみますね!)。西村さんの投稿してくださった画像は、プラグイン「JSEdit for kintone」のものですので、kintoneでJSカスマイズする際の特有の注意表示だと思いました。

こちらですが、僕もJSEdit for kintoneで少しコードいじってみたのですが、[]の中が$id、valueだと「~is better written in dot notation」の注意表示がでますが、[]をフィールド名の'お名前'などにしてみるとこの表示はでません。
わかりやすくまとめると以下のようになります。
注意表示の意味は、「$id、valueのキーの指定についてはドットで書いた方がベターですよ〜」って意味ですね!

records[0]['$id']['value']   //注意表示['$id'] is better written in dot notation
                                            //注意表示['value'] is better written in dot notation

records[0].$id.value            //注意表示なし

records[0]['お名前']['value']  //注意表示['value'] is better written in dot notation

records[0]['お名前'].value      //注意表示なし

僕の考察としては…
配列のキーやインデックスを記述する[]は数字(インデックス)や変数にも対応しています。一方、ドットでキー指定する場合は、キーそのものを記述しないといけません。
kintoneのレコードの構成を考えると$idやvalueは、kintoneであらかじめ定められたフォーマットですので、あまり変数を使って指定するような場面はありません。
それと比べて、上記の'お名前'のようなフィールドコードは、ユーザーが設定する項目になりますので、どんな名称がくるか決まっていませんし、フィールドが多くなった場合に少ないコードで効率的に処理しようとすると配列と変数を使って指定するような場面がたくさん考えられます。
したがって、フィールドコードのキーではドットでの記述をすすめてこないのかなと推察しています。

ブログ書いているときの裏話になりますが、このブログ記事を書いてて投稿した瞬間は、records[0]['お名前'].value で書いていました。
理由についても、「valueは変数で使う場面なんまりないからこうしてます。」って注意書きもつけてました。でも、投稿した直後に次回のネタを思いついて、次回につなげやすいように今の形に変更したんです。これを聞いてから、次の記事を読んでいただくと、「あ〜、そういう経緯ね〜」っていうのがわかるかなと思います。

コードエディタのis betterについては、「僕はこう書いたほうが筋がとおるとおもうのだけど、コードエディタにこっちのほうが良いいよって言われちゃうんですよね〜」っていうことが、ちょっと前にありまして、現役エンジニアの方に質問してみたんですね。そしたら、一緒に考えてくださりまして…プログラミング言語は常に進化していて、推奨される書き方がどんどん変わるし、見やすさや保守性、拡張性、エラーリスクなどの面から、あえてそれを選択した理由をちゃんと説明できるなら、無理にエディターに従うことはないし、なんなら最初からしっかり考えて書く習慣つけとかないと、推奨が変わったときに対応できないよね。という考えに落ち着きました。

ブログで触れているエラーについては、JSファイルの実行時のエラーになります。
エラーにならないパターンとエラーになるパターンを整理すると以下のようになります。

records[0]['お名前'][’value']  //エラーでない

records[0]['お名前’].[value]      //valueは変数として認識されるため、変数定義していないのでエラーになる
                                                  // value is not defined (値が定義されていない)というエラーが返ってくる

const value = 'value'               //先に変数を定義しておく
records[0]['お名前’].[value]      //変数valueにキーである’value’が入っているので正しく実行される

ブログに投稿できるくらいの返信になっちゃいましたね!またしても、僕自身の勉強になりました!ありがとうございます!!