ここの落書き備忘録について

記憶は索引で

あれは、あのプログラムのあそこという具合に覚えていたのですが、最近、索引的に覚えておく頭のメモリーが追いつかない。
そこで、使いまわし出来る小さな単位で、動く事例として書き留めはじめました。
公開しているのは、経験上、人に説明しようとすると、自らの理解度の浅はかさに気付かされるので、自らへの戒めです。と言いながら、ここの落書き人がここまで書いておけば使いまわし出来るというレベルのメモだらけという実態は否めません。
それと解説が面倒なので、しばしば「リバースエンジニアリング」してくださいと逃げています。「リバースエンジニアリング」→「リバエン」→「ハッキング」、どの言い方も同じ意味です。でも「ハッキング」は悪いイメージに採られる様になってしまいました。そこでここの落書き人は「リバースエンジニアリング」と言うことにしています。時々略して「リバエン」と書いてしまうかもしれません。

HTML5を利用しています

HTMLに限る狭義なHTML5はW3Cで廃止されていますので、WHATWGのHTML Living Standardと言うべきでしょうが、名称のわかりやすさで、ここではHTML5と言っときます。
以前は「これからはXHTML」だという風潮にのせられてXHTMLで書いていました。しかしXML互換にする必要性に疑問をもち、HTML4.01に乗り換え、今はHTML5です。
ということで時代の流れにもろ翻弄されていますね。

HTML5のかんぺ

・このCheat sheetタグの親子関係確認

CSS3を躊躇なく利用しています。

CSS3と称されるものから、CSS全体ではなくモジュール単位の進化に切り替わりました。
幸いなことに、モダンブラウザは自動更新が当たり前になり、進化がいち早く取り入れられるようになってきました。
ちなみに、ここの落書き人はHTMLタグ中にStyleを直接書いて、配置が確認できた後にCSSファイルへ書き出す手順をとっています。この手順で不都合なSASS・SCSSは使っていません。いつかは使ってみようとは思っていますが、今の所は素のCSSに不都合を感じていません。

CSSハック、いたしません

個人サイトですので仕様として確定した構文のみです。ベンダープレフィックスは利用いたしません。妙なハックもいたしません。
当サイトをIEでアクセスすると悲惨な描画になります。それがモダン構文に対応していないIEの正体です。(^_-)
それとiPhoneのWebkitが曲者です。仕様解釈の独特な部分はハックしないとこんな風になっちゃうんだぞと晒します。
参考：新たにベンダープレフィックスを行わないChromiumの方針
https://www.chromium.org/blink/developer-faq

CSSのかんぺ

このCheat sheetを一通り理解しておく事をお勧めいたします。
CSSの一括指定（ショートハンド）のチートシート

リクエスト チェーン

ここの備忘録のCSSは@importを多用しています。そしてコピペ利用を目的としていますので、バンドルは行っておりません。リバエンはご自由に。

ES6(ES2015)以降を躊躇なく利用しています

個人サイトとしてはIE対応は止めていることと、各モダンブラウザは自動更新で新しい構文が使える状況になっています。
どうしてもIE対応が求められる場合のみ、PolyfillとPonyfilで対応できる構文に絞り込みますが、もうIEが消滅(21-06)しましたので気兼ねなく新しい構文を利用します。
jQuery,React,Vue.js,AngularJS等のライブラリにも興味をそそられますが、流行り廃りに翻弄*1されたくないので、素のJavaScriptを使うことにしています。あえてライブラリを使う場合は、ライブラリに依存したUI部品群を使った方が手っ取り早い場合のみです。落書き人のサンデープログラミングの規模では、柔軟性という意味でかえって面倒になるのでライブラリは求められる場合以外は使いません。相性の問題も発生しますので混在利用*2は避けたいところです。
JavaScriptを補完しているTypeScript*3は使い始めています。TypeScriptは多分、流行り廃りに翻弄されないかなと期待しての事です。でも未来はわかりませんので、廃れて泣く日が来ないとも限りらない。
結論：Vanilla JSで効率を上げる為にパーツ(module群)を蓄積です。

JavaScriptあんちょこ的引き出しで

ここの落書き人は広義な意味のJavaScriptを自分なりに以下の様に分類して、それらをチートシート的に頭の中に収めて、その詳細は必要に応じてMDN等から引き出す手順にしています。
・基本構文はこのCheat sheetがざっと理解しておく。
・標準組み込みオブジェクトを一通りざっと理解しておく。
・プログラムを組み立てるには関数・非同期処理等を理解しておく。
・フロントエンドのプログラミングにはDOMとJavaScriptの関係を理解しておく。
・各種JavaScript API群を目的に応じて引き出せる。
上述のとおり広義なJavaScriptはかなり奥が深い言語です。必要に応じて取り出せることに学習の重点に置くと頓挫することが無いと思います。

UI系ライブラリのBootstrapの甘い誘惑

フロントエンドのUI系は先人たちのライブラリを利用させてもらって手早くサイトを作るのが主流です。
そこでjQuery依存を脱却したBootstrap V5+が魅力的に見えている落書き人です。
個人サイトは作り込むのが好きなのでバニラで作成しますが、依頼されたときには素早く作る必要がある為に、臨機応変にライブラリを使わせてもらっています。
UI系の利用優先順位は バニラ ＞ Bootstrap ＞ jQuery*1 です。
*1:仮想DOM系ワークフレームとの混在に要注意、data属性利用はバニラとも相性が悪い。

リクエスト チェーン

ここの備忘録のJavaScriptはexportとinportを多用しています。そしてコピペ利用を目的としていますので、バンドルは行っておりませんのでリバエンはご自由に。

Bilnk(Chromium)系とGecko,Servo(Mozilla)系の２つの最新版で動作確認を行っています。なおブラウザによってレンダリングエンジンのバージョンアップタイミングが違いますので、同じレンダリングエンジンだからといって表示が同じとは限りません。
主に動作確認を行っているブラウザは下記のとおりです。
・Google Chrome by blink（シェアが高いことで外せない）
・Firefox by Servo（bookmark資産があるのでメイン利用しています）
・Waterfox by Gecko（Firefox Ver.56以前の互換を保持しています）
・Vivaldi by blink（ブラウザとしての見せ方が好き）
・Kiwi Browser by blink（Android環境でメイン利用しています）
・Microsoft Edge by blink（普段使いはしませんが仕事で時々）
Webkit(Apple)系のSafariでも確認したいのですがAppleのデバイスを保有していません。^^;
GeckoView(AndroidのFirefox)での動作確認はGeckoViewのバグに振り回されたく無いので止めました。^^;
落書き人がお勧めするモダンブラウザ

デバックに使うブラウザ

Google Chromeで動作確認してから、他のブラウザで確認を行っています。
以前はFirefoxの開発ツールが好みでしたが、今は最初のデバックに使うことはありません。理由は使い続けていると突如更新されなくなり、意味が解らずに時間を費やすことが有るからです。

各種コードの共有は、各備忘録のページに落書きしています。その扱い方法が書いていない場合はコピーレフトです。
それ以外にもCodePenとCodeSandboxで書いています。

ソースコードに色をつけて表示

各備忘録のページに落書きした場合にはcode-prettifyを使う場合があります。
code-prettifyの解説はこちらが解りやすいです。

CodePen

HTMLとCSS及び簡易なJavaScriptを試すのに適しています。
CSSで吹き出しを表示した例

CodeSandbox

各種JavaScriptのライブラリや、npm上のある豊富なモジュールを試すのに向いています。
らじる★らじるの受信を試した事例

GitHUB

プロジェクトをそのまま共有するのに向いています。
コードが稚拙で恥ずかしい、だから公開する気になるまで保留。(^_^;)
booskaのGitHUBは一応存在している
gistもあるけれど放置中

コード共有サイトは永遠と思うと痛い目に

コード共有サイトは、けっこう浮き沈みがあり閉鎖もありえます。
大事なコードはローカルに保存しておく方が無難です。

思案中(*^^*)

例によってSafariが未だに中途半端な対応状況です。^^;
https://developer.mozilla.org/ja/docs/Web/Web_Components
あなたの知らない超絶便利なWeb開発を叶える仕様Web Componentsとは