非プログラマ的人間がUserScriptを調整するための知識
ふだんプログラミングしないけど、ScrapboxのUserScriptはちょっといじってみたい……という人はいると思う。私もそのうちのひとりである。 そこで、UserScriptをいじるための最低限の知識みたいなものを書いてゆけば有益かなと思った。
ちなみに書き手も非プログラマである。
ここでの「非プログラマ」というのは、「職種としてのプログラマではない人」という意味ではなく、「日常的にコードを書かない人」を指すこととする。 まえがき
どうすればUserScriptを実行できるか
UserScriptを実行するには、自分のページにコードブロック記法でコードを書く必要がある。 しかも、コードブロック記法をするときに、「script.js」というファイル名を付けねばならない。
実践
code:script.js
// 上は「code:script.js」と書いています
別なページにコードを書いて、それをimportするという手もあるが、あまり気にしなくていい。
いや、気にするかしないかは私が決められることではない。
ちなみに、jQueryは普通に使える。その他は知らない。jQueryのことはよく分からない JavaScriptのことを知らないのに、どうすればコードを書けるか？
ググる！
したいこと+JavaScriptでググりながら調べてゆく。
「developer.mozilla.org」で調べると公式っぽいことが分かるが、非プログラマからすればこれを見てもよく分からない。（が、これで順序だって学んでゆくのが近道かもしれない）
とりあえず私がよく使う情報を書いてゆこうと思う。
（すなわち、みなさんがほしい情報を書くのではなく）
情報
私は最近までこれを知らなかった。
知らないので、Google検索で出てくる限りでのクラス名しか知らなかったし、デバッグはアラートでやっていた。どういうことかというと、きわめて非効率的なことをしていたということだ。
デベロッパーツールはGoogle Chromeの右上のメニューを開いて、「その他のツール」というメニューのなかにある。それを押すと、画面の右側がなんかプログラミングっぽくなる。
https://gyazo.com/934f23bf7c6dae4e855163d9e1a54929
Elementsというのも沢山使うのだが、いま紹介したいのはConsoleという部分だ。
ここにJavaScriptを書くと、何かが起こる。
https://gyazo.com/1a4de3be0fc25ade838b6e1a977b63fb
（非プログラマが）ふつうに生きていても、こんなことを教えてはもらえない。
とりあえず、ここに「scrapbox.」と入力すると、色々でてくる
https://gyazo.com/93a37759a568c7ebc078706489195e52
ここで一行ずつコードを試せる感じかな？
次に、「console.log()」というものを知っておきたい。
これをなんと説明すればいいのか分からないが、
「いま自分がやっていることを確認するためのもの」である。
UserScriptに
code:js
"こんにちは";
こういうのは、「定数値」であって、"こんにちは"はどう頑張ってもいつまでも"こんにちは"だ。
いっぽう、「変数」というのもある。数学で使う$ xとか$ yとか。
定数とか変数とかが「オペランド」と呼ばれるんだと思う。 まちがってたらツッコミしてくれ〜🙏
1とかは数値リテラルかな。trueはbooleanリテラルなど。いろいろある。
関数リテラルもあるらしい(function(arg1){console.log(arg1)})みたいなやつ
この文章をConsoleに表示させる方法がある。
それが、console.log()である。
code:script.js
console.log("こんにちは");
これは、Consoleに「こんにちは」と表示させるコード。
自分のページにこれを書いてから、デベロッパーツールを表示させたうえで、Ctrl+Rを押すと、（たぶん上に緑色のUserScriptしますか？みたいなボタンが出てきて、それを押すと）consoleに"こんにちは"と表示されるはずだ。
いや、表示されないけど？……となる人もいると思う。
https://gyazo.com/0baf7a14181cc99424497e99aa8c8f50
データには型がある
「型」じゃ分からない
オブジェクトとは何か？
Pythonで言うところの辞書
↑ますます分からない（久住哲.iconも分かってない）
連想配列
そもそも「配列」ってなに？
変数
変数に入ったものは何なのか？
文字か？
数値か？
オブジェクトか？
関数リテラルか？
↑これらを理解するために、その前に、データ型を紹介する必要がある
今日の日付の獲得
code:js
new Date();
ページメニューの設定
addItem
画像あってもなくても
addButton
画像必須
ポップアップメニューの設定
code:js
scrapbox.PopupMenu.addButton({title: "string", onClick: function})
// ScrapboxのPop-up Menuにbottonを加える．その時の表示名は"string"で，clickしたときに動作する．
今開いているページの情報の取得
scrapbox.Page
ウィンドウを開く動作
code:js
const url = "任意のURL"
別窓でURLを開く
window.open(url)
ページを移動する
code:js
const url = "任意のURL";
window.location = url;
ウィンドウの位置を、URLのファイルに変更するって感じかな？
nishio.iconプログラマからのフィードバック
まずChromeのデベロッパーツールを開く
1+1と入力すると2が表示される
console.log
ここで必要性がわからないと言われそう
alertで説明したほうがいいか？
ScrapboxのUserScriptにconsole.logを書く
リロードしたらデベロッパーツールに出力があるはず
ここまでが「最初の一歩」だと思う
次にこのコードを一部間違えた時にどうなるのかを観察すると良いと思う
引用符が足りないとか、括弧の数が合わないとか
オブジェクト(辞書)とか型とかはアドバンストな内容
https://gyazo.com/a7b2d13a4bd821a6e93890dc336c84b1
コーディングを支える技術 p.143