ウェブページ作成備忘録

見出し右端の記号は?

Web Page
Booskanium's Tips.
忘れっぽい落書き人のメモ

ここの備忘録について

ここの落書き人が忘れないためのメモですので、
タイトルだけで中身なし/乱筆乱文/誤字脱字/てにをはがメチャクチャ/敬体と常体が混在/用語が古臭い等で極めて文章がいい加減な走り書きです。子供の頃に国語の先生に「悪文の見本」と評された落書き人が解ればそれで善しとしています。正しい日本語文法原理主義な人は、ここの備忘録に立ち入ってはなりませぬ。^_^
備忘録でSNSやブログ等の便利サイトを使わないのは、自らがHTML,css,JavaScriptに慣れるためです。
そして、ここの落書き人は何が基準になっているのかな↓↓↓

小さなモジュールを使いまわし

記憶は索引で

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

HTML5

HTML5を利用しています

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

HTML5のかんぺ

このCheat sheetを机の前の壁にど~ん
このCheat sheetでタグの親子関係確認

CSS3

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

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

CSSハック、いたしません

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

CSSのかんぺ

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

Bootstrapの甘い誘惑

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

JavaScript

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

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

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

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

Browser

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

デバックに使うブラウザ

パソコン環境とAndroid環境のGoogle Chromeで動作確認してOKなら、他のブラウザで確認しています。
Firefoxで開発ツールが好みでしたので、デバックはFirefoxを使っていました。しかしデバックを続けていると突如更新されなくなり、意味が解らずに時間を費やすことが何度かありました。Firefoxはガベージコレクションの動作が怪しい様です。時々再起動を強いられますので、今はデバックには利用していません。

Web Components