ウェブページ作成備忘録

記憶は索引で

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

HTML5を利用しています

今現在はW3CのHTML5が廃止されていますので、WHATWGのHTML Living Standardと言うべきでしょうが、名称のわかりやすさで、ここではHTML5と言っときます。
以前は「これからはXHTML」だという風潮にのせられてXHTMLで書いていました。しかしXML互換にする必要性に疑問をもち、HTML4.01に乗り換え、今はHTML5です。
とはいっても、多少ラフでもブラウザが善きに解釈してくれるようですので、厳格なHTML5ではありません。
そういうことで時代の流れにもろ翻弄されていますね。

HTML5のかんぺ

・このCheat sheetを机の前の壁にど～ん
・この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の一括指定（ショートハンド）のチートシート

Bootstrapの甘い誘惑

CSSとは違いますが外見を整えるBootstrap V5+の誘惑に負けそう。
でもjQuery UIと同じく流行り廃りに翻弄されそうな予感がしています。
ここの落書き人は素の機能でフロントエンドを触るのが好きなので、その誘惑には乗りません。
と云いながら安直にBootstrap V5+をこっそり使っちゃう・・・こともあります。
なおBootstrap V5より前はiQuery依存ですので、ちょっと抵抗がありました。

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

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

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

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とは