ウェブページ作成備忘録

見出し右端の記号は？

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

ここの備忘録について

ここの落書き人が忘れないためのメモですので、
タイトルだけで中身なし／乱筆乱文／誤字脱字／てにをはがメチャクチャ／用語がモダンではない。
落書き人が解ればそれで善し的な走り書きメモです。
備忘録でSNSやブログ等の便利サイトを使わないのは、自らがHTML,css,JavaScriptに慣れるためです。
そして、ここの落書き人は何が基準になっているのかな↓↓↓ ここの落書き人のメモリー容量はこれらを諳んじられるほどありませんの。そこでざっと索引として理解しているだけです。目的応じて索引から詳細が引っ張り出せればOKだと考えています。

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

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

HTML5

個人サイトですのでHTML5を躊躇なく利用しています。
以前は「これからはXHTML」だという風潮にのせられてXHTMLで書いていました。
しかしXML互換にする必要性に疑問をもち、HTML4.01に乗り換え、今はHTML5です。
とはいっても、多少ラフでもブラウザが善きに解釈してくれるようですので、厳格なHTML5ではありません。
そういうことで時代の流れにもろ翻弄されていますね。HTML5の次ってあるのかな？

HTML5のかんぺ

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

CSS3

CSS3を躊躇なく利用しています。
CSS3と称されるものから、CSS全体ではなくモジュール単位の進化に切り替わりました。
幸いなことに、モダンブラウザは自動更新が当たり前になり、進化がいち早く取り入れられるようになってきました。
そして、動作テストで問題なければ「-webkit-」「-moz-」等のベンダーサフィックス記述も行わない方針です。IE対応ハックは完全に捨てました。
仕事で作成するときは「後ろ向きなIE対応予算を将来の為に使いましょう」とアピールしまくり (^_^;)
ちなみに、ここの落書き人はHTMLタグ中に直接書いて、配置が確認できた後にCSSファイルへ書き出す手順をとっています。この手順では不都合なSASS・SCSSは使っていません。いつかは使ってみようとは思っていますが、今の所は素のCSSに不都合を感じていません。

CSSハック、いたしません

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

CSSのかんぺ

このCheat sheetを一通り理解しておく事をお勧めいたします。


JavaScript

ES6(ES2015)以降を躊躇なく利用しています。
個人サイトとしてはIE対応は止めていることと、各モダンブラウザは自動更新で新しい構文が使える状況になっています。
jQuery等のライブラリにも興味をそそられますが、流行り廃りに翻弄*1されたくないので、素のJavaScriptを使うことにしています。あえてライブラリを使う場合は、ライブラリに依存したUI部品群を使った方が手っ取り早い場合のみです。
React,Vue.js,AngularJSなどのフレームワークは、目的にあった物をプロジェクト毎に吟味して使うのが良いかと思います。落書き人のサンデープログラミングの規模では、柔軟性という意味でかえって面倒になるので使いません。
プリプロセッサー的にJavaScriptを補完しているTypeScriptは使い始めています。TypeScriptは多分、流行り廃りに翻弄されないかなと期待しての事です。
PolyfillとPonyfillは、なんか後ろ向きな様な気がして、どうしても古いブラウザ対応*2が求められる時以外は使いません。

JavaScripはあんちょこ的引き出しで

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

Browser

Bilnk(Chromium)系とGecko,Servo(Mozilla)系の２つの最新版で動作確認を行っています。なおブラウザによってレンダリングエンジンのバージョンアップタイミングが違いますので、同じレンダリングエンジンだからといって表示が同じとは限りません。
主に動作確認を行っているブラウザは下記のとおりです。
・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)での動作確認は止めました。理由はシェアが低く、且つバグの多さに振り回されたく無いからです。^^;
落書き人がお勧めするモダンブラウザ

Web Components