師匠と私-Season1_ch.10☆怒涛のレビュー（あるいはツッコミ）
ー前回までのあらすじー
ここまででJavaScriptのコードができました。
師匠に見てもらった時のコメントなどをメモしておこうと思います。
いったん、JavaScriptファイルが完成！
ver.1.0（あるいはβ版）（あるいはプロトタイプ）（あるいは練習）…
constなどの表記も直して一からつくりました。
そして、コードできましたと、師匠に見てもらうことに。
✨初めてのコードレビュー✨
師匠からのコメントチャット！
文字が、コードが、すごい勢いで流れ込んできます～
レビューというより、ツッコミどころ満載といわんばかり、凄腕漫才師のように小ボケに対しても一つ一つ丁寧なツッコミ。
こんなにもか！というくらい色んな指摘を受けました。
うすうす聞いてはいました…。
師匠のレビューはディテールまで容赦がないと。
はじめはその量に圧倒されましたが…
やはりそこは私の師匠！いろんなことが伝わってきます。
言い終えたら私の理解を待ってまた補足といったように、双方が同時にコメントしてチャットがわけわからなくなる、ということにも気を使ってます。
なによりお遊びにこんなに真剣にコメントしてくれることに感謝！
（師匠はすぐ調子に乗るので直接は言いませんが）
以下、レビューで得たことと備忘をメモしておきます。
✅strictモード
なんども説明をみたけどすぐに忘れるストリクトモード。
モダーンなJavaScriptをきちんと使えるようにするモードと理解。
kintoneでも推奨。
モダンなモード, "use strict"
https://ja.javascript.info/strict-mode
✅Chrome デベロッパーツール
「これでエラーが出てるぞ」といきなり見せられたもの。
なんの前触れもなく…急にこれを見ろと…？
とりあえずツールの基本だけでも学習することに。
今回もテキトーに投げすぎ💦と思いました、が…。
「実際は開発者が使用する基本中の基本ツールなので、知っておくべきだし、ツールの使い方くらい自分で調べられないのなら、この先なにをやってもダメじゃ※」という親心だと理解しました。※言ってない。
Chrome DevTool
Chrome デベロッパーツールの使い方まとめ👈初心者向け
https://qiita.com/d-dai/items/0b580b26bb1d1622eb46
✅HTMLのアトリビュート
「HTMLの属性(attribute)の指定は、イコールの前後にスペース入れないで、クォーテーション禁止のダブルクォーテーションじゃ！」
attribute…新しい名前が出てきました。
HTMLはかじった程度。テキトーにやってました、すみません…。
✅全角半角がまざっている～
気づかなかったです。もしかしたらテキストエディタでエラーみたいな数字でてたかも…
構文を見てほしかったのに間違い探しみたいなことさせてすみません。
でも、スペルミスとかこういう細かい指摘、意外でした。
師匠はときどきkintoneをKintoneと大文字混在で書いてたので※
（※ところが最近は直ってるようす、キントーン警察が来たのでしょうか）
✅””（ダブルクォーテーション）と’’（シングルクォーテーション）
JavaScriptはどっちでもいい？この際聞いてみたところ。
「どっちでも可！でもシングルクォーテーション推奨！ HTMLのアトリビュートはダブルクォーテーション！じゃ。」
推奨な理由も何となくわかりました。
■Element.innnerHTML = "HTMLのなかみです"
JavaScriptは”ダブルクォーテーション”でもいいが
■Element.innnerHTML = "<input type="text" id="confirmtext"～"
こういう場合"<input type="これでひとかたまりだと思われてしまう
■Element.innnerHTML = '<input type="text" id="confirmtext"～’
だからこの場合’シングルクォーテーション’にしておけば解決！
✅定数変数のなまえのつけ方
以前「JavaScriptはキャメルケースじゃっ」と教えてもらった変数名
正解はありませんし、詳細なルールもありません。
師匠には名前のこだわりがあるらしく、考えを教えてもらいました。
「何がしたいのか名前だけでわかるようになってる名前は優秀！じゃ！！」
「名前考えるのが一番難しいのじゃ！！」
「ひとつなのか、いくつかのアイテムが入ってるかどうかは重要！」
いままで内心（師匠のつける名前は長い～）と考えてましたが、話を聞いてみると理解できました。なにより今回、パッと見て何をしたいのかわかる名前がＧＯＯＤと褒められたのがうれしい。
これからも師匠の及第点を取れる名前を心がけます。
そして弟子好感度UPを✨
✅console.logを使うべし
実はここまで、あっさり完成できたわけではなく、書いたコードがちゃんと動かずにだいぶ苦戦してました。
バグ（間違い）を見つける方法について。
「console.logするとchromeのdevloperToolのconsoleに出力されるぞ。
エレメントの状態を表示してくれるのじゃ」
言われたときは、ちょっと使い勝手がわからなかったのですが、console.logは、意図したとおりに動かないコードを検証するときに役立つということ。
たとえばログに指定したものが表示されたら生きていること
ログが現れなかったら何らかの原因でコードが生きていない
✅方法はいろいろある
kintoneアプリIDを取得する件で、あとでもっと簡単にID取得できることを知りました。（今回は”Splitを使ってURLから取得する”というちょっと回りくどい方法を使用）
「同じ機能を実装するにしても、方法はいろいろとあるのじゃ。
なにが最適なのかはわからんし、正解はないのじゃ。
ただ、お主が思うままに作ったコードは、無駄ではないぞ。
kintoneではREST APIでカンタンに取得できても、他環境ではそれは無効になる。画像もkintoneにUPしてリンクを取得すると他の環境では使えん。
今回は、広く他の環境に対応した汎用性のあるいい選択だと思っておる」
ああ、その言葉に救われました。
✅エディタと仲良くなろう
VSCodeを使っていますが、まだエラーの見方やサジェスト機能を使いこなせてません。
「エディタは優れた機能がたくさんあるのじゃ、うまく設定して使えるようになればもっとはかどるぞ」
たとえばながーい変数もキャメルの大文字で入力すれば候補に出てくれる
ikaruVanishMessageElement⇐iVMEででてきた。お～すごい！
まだまだ便利機能はありそうです。
師匠から
「ここまでわしが助けた部分もあるが、お主が自分で調べたところもある。
立派じゃ。」
定数の名前も、ちゃんと書き変えたところ「なにをしたいかわかる名前」
と褒めてくれました。
そして動いたのをみたときは一緒に喜んでくれました！！
褒められて一番弟子としては鼻が高い！
できあがったファイルを師匠にホイっと渡します。
「・・・ファイル名。まさかバージョン６４！？」
ああ、画像をいれたものを”～ver1.0.64”にしたんですよ。Base64だから☆彡
「ぶわっかもーん。バージョンは1.0.1じゃ！そういうつけ方はしないんじゃ！」
ああ。最後にもう。。。
ひとまずver1.0.1が完成です。
次のバージョンではさらに機構を追加していく予定です。
「そういえば、本家Excelカイルは、画面にずっとでておったの～。マウスでドラッグしても消えないのじゃ」
（なんか実装がものすごーく大変そう…）
「”お前を消す方法”を、”おまえ”でも2語で入力しても有効になるようにしたいの～…これはっ、正規表現じゃ！」
（あ、あの正規表現ですか！？…わからん）
ひとまずこれを見ておくのじゃ
夏休みの宿題が片付いたと思ったら、冬休みの宿題が。
でも
JavaScriptってなんだか楽しい…
ここまで来てそう思えるようになりました！
そして次回はいよいよプラグインを作ります！（予定）
…ch.11へ続く
この記事が気に入ったらサポートをしてみませんか？