strongをそれなりに真剣に考えてみた

こんばんは、有村です。
ぼーっとすることが増えてやばいなと思ってます。春だから?

さて今日は、みんな大好きstrongタグについて考えてみます!
WEBやっててstrong使ったことない人なんていないよね!ね!
さっそく始めます。

Q. 「重要」って、どこと比べて重要なの?
A. コンテンツ中の他の文章

我々の神、W3C様はこうおっしゃっています…

The strong element represents strong importance, seriousness, or urgency for its contents.

コンテンツの〜とか言われても、よく分からなかった有村。
私が引っかかっていたのは、この重要度が「ページ全体における重要度なのではないか?」と思っていたことです。
ページ全体における重要度になる = あっちこっちで使うと、一体どれが本当に重要なのかが分からなくなるのでは?と考えていたのです。

W3Cの資料など読んで、こう考えたら理解できました。

この場合、
「黒魔道士は、他のジョブより強い。」
という一文の中で、特に強いという部分に注目して欲しい!という意図だと思います。

では、この場合はどうでしょうか。

「黒魔道士は、他のジョブより強い。
最新のゲームが欲しい。」
前者は「強い」、後者は「最新のゲーム」という点が、これらの文で重要だと示していると思います。

つまり言い換えれば、「重要度」はそのコンテンツ = 親タグの中だけで有効になるということですね。
なので、他のコンテンツのstrongと比べて「どっちがより重要か」とか、レベルを競うようなものでもない。
もしレベルという話をするのであれば、strongのネストという使い方もありますが、それも同一コンテンツの中だけでのレベルになるのだと思います!

ということでおしまい。
それでは、きょうはこのへんで。

BOMってなんだっけ?

こんばんは、有村です。
春が近づいてくる予感。ちなみに私は春が一番苦手です。

さて今日のなんだっけ?はBOM
私もこの業界に入るまでは爆弾のことだけだと思ってました!でもそれだけじゃない!

ある日、こんな相談を受けました。ページの上部に謎の隙間ができてるんだけど…と。
実際の画面を見ると、確かに微妙に隙間が空いています。そういう時って大抵、HTML側にスペースが忍び込んでいたとか、妙なスタイルが設定されていたとか、原因そういうのだったりしますよね。
と思って調査したのですが、そのどちらでもない。
結論を言うと、それはBOMのせいでした。

それから、BOMってのがつくとなんか空白できたり悪さするらしいということは覚えましたが、そういえばBOMがどんなものなのかを知らないことに気付きました。
もしかしたら、ただの悪人じゃないのかも?………というわけで調べました。

Q. BOMってなんの略?
A. byte order mark
ばいとおーだーまーく。…なんのオーダー?

Q. byte order markってなにしてるの?
A. テキストデータがUnicodeであること、またその種類を示す
まずUnicode。これは文字コードの業界規格。ちゃんとまとめるとボリュームが出そうなので割愛。
そして種類ってなんぞ、というと、これは文字データをメモリに配置する方式の種類を指します。

UTF-16で「1」を表現しようとすると、実は2通りの方法があります。
1つは「00 31」もう1つは「31 00」。それぞれの方法にはビッグエンディアン、リトルエンディアンという名前がついており、人間に理解しやすいか、コンピュータが処理しやすいかの違いがあるらしいです。
で、BOMはそのどちらのエンディアンを使っているかを示しています。

Q. てことは、BOMってつけたほうがよくない?
A. PHPやHTMLにおいてはBOM無くていいよ
W3Cでも「ファイルはUTF-8で作成することを推奨」とされている通り、WEB業界でファイルを保存する際はUTF-8がスタンダードです。(なぜか?ってところまでは今回調べられてないですが)
で、UTF-8にはBOMをつける必要がないのです。なぜなら、エンディアンが関係ないから。
じゃあUnicodeであることを明示しなくていいの?という疑問もありましたが、これはmeta情報で

と指定すればOKですね。
逆にBOMをつけてしまうと、その分が空白行として出力されてしまい、冒頭で挙げたような「ページ上部に隙間が!?」のような望まない挙動をしてしまいます。

BOMはいらない子…とだけ思っていましたが、ちゃんと役割があったのですね!
それでは、きょうはこのへんで。

VPNってなんだっけ?

こんばんは、有村です。
突然ですがVPNってなんですか?

IT業界に居れば、必ず耳にはしますよね。たぶん。
今日、こんなやりとりがありました。

有村「社外で社用PC使いたいやで」
先輩「じゃあVPNの設定してもらったほうがいいね」
有村「VPN設定したら何ができるんや」
先輩「社内の共有フォルダや、社内の開発用環境にアクセスできるやで」
有村「^^^^^^?????」

今まで見て見ぬ振りをしてきたVPNとやら…なんだか知っておかないとやばそうな気配です。
というわけで調べました。

Q. VPNって何の略?
A. Virtual Private Network
バーチャルなプライベートネットワークのことなんですね!なるほど!
…ん?じゃあプライベートなネットワークって具体的にどういうことなんでしょう?
会社に当てはめてみると…
・社員用の共有フォルダ
・社内のプリンタ
なるほど、掴みとしては「外部に公開されていないネットワーク」「限られた場所でしか繋げないネットワーク」といったところでしょうか?

Q. VPNって何してくれるの?
A. プライベートネットワークに外から繋げるようにするよ!
インターネットを海だとするならば、プライベートネットワークは、言わば外界とは断絶した島でしょうか?
VPNは、その遠く離れた閉鎖島と自分の島とを繋ぐため、海上に専用の道路を通して、互いが行き来ができるようにしてくれるヤツのようです。
専用の道路なので、外界からは自分しか行き来はできないし、そこを通るときは都度暗号化が行われるので、セキュリティも担保できるよ!という仕組み。

なるほど!VPNは専用道路!ということで本日の結びとします。
それでは、きょうはこのへんで。

function ◯◯ と var ◯◯ = function って何が違うの?

こんばんは、有村です!
連日更新してると、冒頭に何を書くかが浮かばない。

さてさて今日は、function ◯◯ と var ◯◯ = function って何が違うの?について書きます。

まず前提!
function hoge() → 関数宣言
var fuga = function() → 関数式
という名前がちゃんとあります!
実行時の書き方は、どちらも hoge()、fuga() 。定義の仕方が違うだけですね。
こんな感じ。

あれ?じゃあこの2つって、一体何が違うの。
実は駆け出しエンジニアだった頃、一度先輩に質問してみたことがありました。
しかし返ってきた答えは「ノリでええんちゃう^^^^」でした。
そこで「あ〜そうなんだ〜^^」と納得した私は関数式の存在自体を忘れていたのですが、長い時を経て、再び同じ問題と邂逅することになるのです…。

ある日先輩から、コードレビューにて「なんで関数宣言で書くの?」と聞かれた私は、「………理由はない。」と答えるのが精一杯でした。
そうですよね、それって何の理由にもなっていませんよね。というわけで、覚えました。

関数宣言 … 定義の中身も含めて巻き上げが起こる。
関数式 … 変数のみが巻き上げられ、定義の中身は巻き上げられない。

巻き上げって何、という方のための簡単な解説。
関数の途中などで「私はhogeって変数です!」と宣言すると、その宣言はスコープの先頭で宣言したことと同じになるということ。「先頭に巻き上げられる」ってことです。
ただ、「hogeって変数です!」という宣言と「値はほげです!」という定義は別物なので、例をあげるとすればこういうことになります。

ちなみに、宣言自体しないで呼び出すと、「Uncaught ReferenceError」になります。

で、話を戻すと、「関数宣言」は巻き上げの対象が「中身も含めて」実行されるのがポイントです。

関数宣言が呼び出しよりも後なのに、ちゃんと「ほげ」が出力されます。
逆に関数式で書いた場合は、関数式の定義よりも後で呼び出さないと「ほげ」が出ません。

じゃあどういうことだってばよって話なのですが、先輩はこう言いました。巻き上げって、副作用だわと。
そう言われるまで特に意識していませんでしたが、確かに「定義よりも前に動作する関数」って気持ち悪いですね。。
基本的にプログラムは上から実行されるものなのに、途中で宣言したものがさも最初から存在したかのように振る舞うわけですもんね。

…となると、関数宣言と関数式、どちらが実装する上でより適しているかを考えると、副作用が少ない関数式で書くほうがよいと思います。
宣言自体は巻き上げられているので、完全に副作用がないわけではないのですが…それでも関数宣言よりはマシですね!

ずーーーーーっと関数宣言で書いてきたJavaScriptの関数。すぐfunctionって書きたくなる衝動を抑えて、varから書きはじめる癖をつけてみます!
それでは、きょうはこのへんで。

fieldsetとlegendタグ!

こんばんは、有村です。
トイレの芳香剤って、なんで設置からしばらくすると匂いしなくなるんでしょうね?鼻が慣れるんですかね?

さてトイレの話はどうでもよくて、今日のテーマは「fieldsetとlegendタグ」です。
legendって聞いたことなくて、「伝説のタグ…?昔話とかを囲むタグなんだろうか、なんて限定的な…」と思っていたのですが、全然違った。

論より証拠ということで、用法。

こんな感じ。
上の例だと、formの中に大きく分けて「アンケート」と「ユーザ情報」の2つの入力欄があります。
その2つの入力グループを「fieldset」はグルーピングしていて、「legend 」はそのグルーピングが何であるかを説明しています。dl、dt、ddのform版みたいなものでしょうか?

「おっ!じゃあinput系のまとまりはfieldsetで囲んでlegendつけとけばええんやな!」と思ったところ、ひとつ落とし穴が。
それは、「legendは、fieldsetの一番最初の子要素でなければいけない」という点です。
まぁ、グルーピングされた入力欄の途中に説明が出てくるデザインはそうそう無いとは思うのですが、場合によっては引っかかるポイントかも知れません。
が、fieldsetにおいてlegendは必須項目というわけではないので、もしそのようなデザインが出てきた場合は、div等で適宜対応は可能だと思います。

それにしてもlegendタグって名前かっこいいな。
それでは、きょうはこのへんで。

Apacheってなんだっけ?

こんばんは、有村です。
空調ってなんでこう暑かったり寒かったり気まぐれなんですかね?自分専用エアコンが欲しいですね。

さて、今日も分かったつもりのおまじないを潰していく記録を残します。
テーマはApacheってなんだっけ?です。

かつて業務でローカル環境を作ったとき(ちなみにWindowsだった)、Apache入れたりしましたねぇ…。でも、それは手順としてそうなっていたからで、「あぁ、これを入れないとサイトって動かないんだな」くらいにしか思っていませんでした。
でも改めて考えると、Apacheって何をしてくれてるんでしょう?こいつがいないと何ができないのでしょうか?
というわけで、調べました。

Q. Apacheちゃんは何してるの?
A. A◯azonの中の人のような働き。
例えば。

リクエスト送る人 … 私たち。お客さん。
リクエスト … 商品の注文。
レスポンス … 商品。
Apache … A◯azonの中の人。
サーバ … A◯azonの倉庫。
レンダリング … 開封。(ちょっと違うけどニュアンスとして)

お客さんが「これが欲しい!」ってネットで注文をする。
A◯azonの中の人は、A◯azonの倉庫から注文された品を引っ張ってくる。
A◯azonの中の人は、注文された品を発送する。
お客さんは注文した品を受け取り、開封する。

なんかこんな感じ。
Apacheがいなかったらサーバはただの倉庫なだけで、ユーザがリクエストをしてもそれを処理してくれる人がいない…ってなるわけですね。

Q. なるほど、じゃあサイト作りたかったらApacheを入れればいいんですね!
A. Apacheだけじゃないよ!
なんと、その仕組みを提供できるのは、IISとか、Nginxとか、他にも存在するのです!
有償、無償も含めてそれぞれ特徴があるようなので、サイトの性質に応じて都度選択すればよいのでしょうか。
それぞれの差異を調べるのは踏み込んだ領域になりそうなので、今回は「他にもあるんだ〜」程度でとどめました。

とりあえず、ApacheはA◯azonの中の人。おぼえた。
それでは、きょうはこのへんで。

mixinで事故った話

こんばんは、有村です。
月曜はみんなのテンションが低めですね。どこもそうなのかな。

で、今日はmixinで事故った件について書きます。
成功したコードなんて書いたことない気がしますが、今回は特に盛大に滑ったので、みんなに笑ってもらおうと思います!

まずは、実際のコードから少し略してはいますが、事故ったコード。
やりたかったことは、
・普通のボタン
・矢印付きのボタン
・アイコン付きのボタン
・アイコンと矢印付きのボタン
の4つがデザインとして頻繁に出てくるので、そのmixinを作ろうとしてたんです。

なんていうか…「引数、引き回しの刑」って感じですね。書いてて自分で訳が分からなくなっちゃったんです。
mixinをネストして、呼び出すときに引数を指定して、またその親に渡すために引数を受け渡して…ってやっていますが、もはや何が何だかです。

そこで、CSS設計が得意な先輩にお願いして、このコードをぼっこぼこにしてもらいました。
そこでいくつか問題が見えてきました。

もっとシンプルに考える
上のソースでは、アイコン付きのボタンや矢印付きのボタンで、毎回btnをincludeしています。が、本当にはそれは必要なincludeでしょうか?
ざっくり分けると、これらは「ボタン」と「ボタン装飾(矢印とアイコン)」の2つに分かれるはずです。ボタン装飾は装飾に必要なプロパティのみが書かれていれば良くて、「ボタン」そのもののプロパティは持っている必要がありません。
そして、実際にボタンのclassを作るときに、必要なパーツ(mixin)を必要に応じて呼び出して組み合わせればいいのです。includeはひとつじゃなきゃいけない、なんて決まりはないですもんね。
全部まとめなきゃいけない、なんてことはなかったんや!!

引数の名前が分かりにくい
$fo_sizeとか、勘がいい人なら「あぁ…フォントサイズね…」って気付いてくれるかも知れませんが、そうと明記してない以上、それはあくまで推測でしかありません。アノテーションもないし。
$font_sizeとか、分かりやすい名前を付けましょう!

引数が多い割に限定的
例えばborder。色は設定できるようになっていますが、もし2pxのborderが出てきたら…solidではなくdottedが出てきたら…またmixinを更新しなければなりません。
引数は文字列も入れられるので、もちろん「1px solid #000」という値そのものを引数として受け渡すこともできるのです!
なんか勝手に、ショートハンドの値はダメ!と思い込んでたんですよね。失敗。

SASSではmixinとかincludeとか略せるよ
mixinは「=」、includeは「+」で置き換え可能。

アイコンボタンのアイコンってどこで設定してるの?
はい!ボタン内にhtml側で直に指定してました!
具体的には、

みたいな感じで、メールのアイコンフォントを呼び出していたのですが。
これだと「メールアイコンの装飾が付いたボタン」を複数呼び出そうとしたとき、html側にも都度メールアイコン用の記述を書かないといけないのですよね。なんのためにモジュール化するんだろう…ってなります。
それであれば、「メールアイコン装飾のボタン」というclassを作って、それにcontentとしてアイコンフォントを設定する方が汎用性は高いです。
mixin側は、contentを引数として設定できるようにしておく。
CSSとhtmlの住み分けもできていい感じです!

それで最終的にこうなりました。

呼び出すときはこう!

超すっきりしました!!!!
それぞれの役割を明確に、余計なことはしない!という実装って、なんだかJSの設計と同じですね。
CSSとJS、世界は離れているようで実は繋がっています。きっと他の言語もそうなのでしょう…オブジェクト指向の勉強、ちゃんとしよう。

それでは、長くなったので今日はこのへんで!

mixinとextendの違いって?

こんにちは、有村です。
SASSを業務でも使うようになりましたが、使いこなすのは難しいですね!
というわけで、早速今日のテーマ。mixinとextendの違いって?です。

最終的な目的はどちらも同じだと思います。それは、「同じ記述を何度も書きたくない」ということです。以前の原田さんの記事にもありましたが、これもDRYの法則なのでしょうか?
で、その手段として用いられるのがmixinとextendです。両者の違いについて学んだことを残します。

書き方

mixinで目を引くのは、やはり引数ではないでしょうか。基本形は同じだけれど、たとえば文字色だったり背景色だったりが変動する場合、呼び出す側(今回は .fuga)が引数でその値をコントロールすることができます。
実例を挙げると、色違い&サイズ違いのボタンを作る際に重宝しました。

extendはまさに継承で、.hoge の中身がそっくりそのまま .fuga に引き継がれます。以上。

あれ?じゃあこの2つってやっぱり同じじゃん?と私も思っていたのですが、実際にコンパイルされた後のソースがそれぞれ異なります。

はい、見ての通り、mixinは「includeした要素が .fuga のプロパティとして挿入されている」のに対し、extendは「extendした要素と .fuga が同じプロパティを持つclassとしてグルーピングされ、併せて .fuga 独自の記述のみが書かれた定義も生成される」のです。

それぞれ長所と短所があると考えています。
mixinは、引数でプロパティの値を変更できることから、拡張性に優れていると思います。
しかし、呼び出す度に全てのプロパティが呼び出し元のclassに挿入されるので、場合によってはコンパイル後のCSSの肥大化に繋がります。

content以外全部おなじじゃんね、っていう。
DRYが嫌でmixinを使ったのに、結局DRYになっている。

対してextendは、同じプロパティを共有するものとしてグルーピングをしてくれるので、mixinのように同じ内容が2度3度と繰り返されることはありません。
が、その分、継承元のプロパティを1つでも変更すると、それが全てのextendを用いた要素にも反映されてしまいます。
プロパティの変更ってmixinもそうやんけ!と思ったりもしましたが、mixinの場合は変更されることが前提となるプロパティの値を引数で持たせることができ、なおかつデフォルト値の設定もできるので、mixinの方が拡張性や保守性は優れています。

じゃあどっちを使えばいいのよー!となった私に、先輩はヒントをくれました。
・絶対恒久的に何があっても変わらないと断言できるまとまりを使いまわしたければ、extend。
・ベースは変わらないけど場合によって値を変えていきたかったり、将来的にプロパティや値が変わるかもしれなければ、mixin。

一回extend使って失敗してみるのもいいんじゃない?とのアドバイスも貰ったので、それもいい経験になるかもしれません!「あ〜〜〜」ってなったらまた書きます!

それでは、今日はこのへんで。

metaタグってなんだっけ?

こんばんは。有村です。
ここ最近仕事で心がけていることは、「全てを疑え」です。でも全てを疑うって実は難しいんですよね。

で、そんな中で、疑ってみたら実のところよく分かってなかったものがあったのですが。
そのモノの名は…metaタグ!
htmlやってたら絶対お世話になるタグなはずなんですけど、head内のフォーマットが決まった実装をしていると、気にする機会も少ないかもしれません。

Q.まずmetaタグってなに?
A.メタデータを指定するタグ。
そもそもメタとは…という話からなのですが(そっからかよ)
メタ = 情報についての情報を示すものです。
で、htmlにおけるメタの対象というと、情報 = htmlデータ(文書)を指すようです。つまり、一言で言うと「ページについての情報を指定するタグ」でいいのでしょうか?

Q.metaってどんなものがあるの?
A.ググれカス
というわけでMDNのmetaタグ説明ページから抜粋。
【viewport】
viewportの初期値を設定する。でviewportって何さと調べると、文書(html)の表示領域のことらしい。
表示領域?そんなんデバイス幅のことやんけ!と思ったけれどそうではなく、デバイスの中にキャンバスが1つ入っているイメージ。
そのキャンバスのサイズをwidthで設定したり、キャンバスとデバイスウィンドウとの比率をinitial-scaleで設定したりする。

【robots】
クローラがページを訪問時に行う操作を指定する。
noindex、noarchiveあたりが、刺さる人には刺さる設定かもと個人的に思います。
ポイントは、「協力的なrobotのみが指定に従う」という点ではないでしょうか。いくらこの設定をしても、必ずしもそれが実現できるとは限らない、ということですね。

【charset】
THEおまじないだと思います。知らないけれどとりあえず書いてる。しかしやっていることは単純明快で、ページで使用している文字エンコードを指定しています。
ポイントは、「ページの始めから1024バイト以内に記載しなければならない」という決まりがあることです。ページの文字集合を確認するまでに、最初の1024バイトしか確認をしないブラウザがあるからだそうで。

他にも、BOMとか文字エンコーディングとか、知ってそうでよく分かっていない項目がありますので、それも調べて記録を残したいです〜。

それでは、今日はこのへんで。