フロントエンド専門制作会社が教える速く正確なWeb制作のための実践的メソッド
著
『フロントエンド専門制作会社が教える速く正確なWeb制作のための実践的メソッド』を読みました。コーディングファクトリーという、Web制作の中でもコーディングに特化したサービスというのは以前から聞き知っていたので、そのスタッフの皆さんが書かれた本という点で興味が湧いたので。他社さんがどのように制作物、納品物の品質管理を行なっているかがうかがい知れたのは良かったけれど、鵜呑みにしてはいけないな......という内容もあり、以下気になったところなど:
- いきなり「はじめに」の末尾で、「同じではないですはずなので」という誤記。おそらく正しくは「同じではないはずなので」。
- p.023にも誤記。「手間をに削減する」は、おそらく「に」が不要。
- p.029で知ったのですが、JadeってPugという名前に変わってたんですね。これは知りませんでした(というか使っていない)。
- p.031で、viewport metaにminimum-scale=1.0を指定しているとの記述があるけれど、理由が「等倍よりも小さくならないように」としかなくて、よく分かりません。ニーズは少ないにせよ、ユーザーの閲覧行為における自由度を減らすべきではないと思います。
- p.032で、img要素のwidth/height属性について「画像のサイズ属性を指定することによって、ページ全体のレンダリングを高速化できるメリットがあります」とあるけれど、本当でしょうか。古い話だけれど、強調,引用,グループ化,画像などの要素 -- ごく簡単なHTMLの説明には、
ほとんどのブラウザで属性を"指定しない"方が1〜2割速いという結果
が紹介のうえすでに神話と言っていいかも知れません
とあります。 - p.036で「まだまだInternet Explorer 8以下への対応が求められるケースも少なくない」とあるけれど、比較的最近発売された本の記述としては、ちょっと信じがたいです。というか、仮にそう求められたとして、ベンダーサポートの提供されないブラウザーに対する手厚いサポートは止めることを積極的に提案すべきでしょう。
- p.038で「ハイフンを使うと、「[class|=XXX]」といった複雑な属性セレクタを利用できるようになる」とあるけれど、接続子がハイフンであるべき理由が読み取れませんでした。
- p.041に複数回「Mac OS」という表記が出てきますが「macOS」にアップデートされるべき。
- p.043でCSSのショートハンドプロパティの使用を推奨していますが、ショートハンドプロパティを使うことのリスクに触れることなく、使わない記述を「誤った記述」としているのは如何なものか。
- p.048の見出し「命名ルール策定の3つのメリット」、数字の3の直後に不自然なスペースが。
- p.052にあるHTMLの記述例で「widthとheightに実際に表示したいサイズを指定する」とあるけれど、これは指定しないことを推奨したp.032の記述と矛盾して聞こえます。
- p.069に「JQuery」という表記が出てきますがおそらく正しくは「jQuery」。
- p.080でEJS - JavaScript Templatesを知りました。これは知らなかった、機会があれば試してみたいと思います。
- p.090の「ボタンもリンクがある要素なので」という記述に違和感。そもそも文脈的にbutton要素なのかそうではないのか、が分からないですし。
- p.106でPopup ALT Attributesが紹介されていますが、見出しも注釈のところも「Attribute」になっています(複数形が正しいはず)。同じく、単数形にしている誤記がp.175に2箇所あります。
- p.110で紹介されているChromeの拡張、The QR Code Extensionも初めて知って参考になりました。
- p.144で、JSを使いUA文字列によって異なるCSSを適用する例が出てくるのですが......今時、UA文字列中に「iPhone」「iPad」「Android」という文字列があるかどうかを頼りにスマホか否か判別するのってアリなのでしょうか。さすがにもうそういう時代ではないと思います。
- p.157の「納品日が一体どこ(いつ0)を指しているのか」のところ、誤記があります。
- p.170でWeb Developerの注釈の中で「Google Charome」という誤記を発見。
- p.174で「画像のwidthやheightの指定を誤っているためにぼやけたり」とあるけれど、やっぱりp.032の記述と矛盾して聞こえます。そもそもwidth/height属性を指定しなければ起こり得ない問題なので。
- p.178のコラムで「文字サイズの大・中・小の3段階それぞれについて、各ブラウザで崩れが発生していないかをチェックすると、工数は倍近くになることもあります」とありますが、そもそもそういうUIは不必要、って話はされていないのでしょうか......。
- p.183のコラム「もしクレームが来てしまったら、まずやるべきこと」は、とても良い内容だと思いました。
- p.186の注釈で、JIS X 8341-3:2016 解説のURLが紹介されているのですが、であればラベルは「JIS X 8341-3:2016」ではなく「JIS X 8341-3:2016 解説」とすべきかと思います。
- p.188で、現在地表示のためにem要素を使うことを推奨していますが、なぜそれがアクセシビリティ的に必要なのかが分かりませんでした。
- p.189で、table要素のsummary属性がHTML5で廃止になったからと、「○○の表」という文字列をfigure/figcaption要素を使って実装している例が紹介されていますが、内容的にそれは表の概要ではなくタイトルであって、caption要素の使用が妥当と思います。加えて、それ(figcaption要素)にheight:0;なんていうスタイルを当てて表示させないのは、Webアクセシビリティを扱ったページの内容としては、どうなのでしょうね。それがタイトルであり、ユーザーに伝えるべき文言という前提であれば、視覚的にも表示されて然るべきと考えます。
- p.202で、レスポンシブWebデザインにおける表の取り扱いを紹介していますが、スマホの狭い画面でも内容が
見切れ途切れないようにする目的のためだけにth/td要素にdisplay:block;を指定するやり方、個人的には反対です。これなら絶対問題ないっていう代案が提示できないのが申し訳ないけれど、ちょっと複雑な表になった途端にうまくいかなくなるし。
他に設計思想の面で思うところがいくつかあったけど、そこは宗教上の理由(謎)なんかも絡むので割愛。
[ 2017-07-03 追記 ] 「見切れる」の使い方は意味が逆
とのご指摘をいただき修正しました。ありがとうございます。