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