Frontend Nagoya #3
Fronted Nagoya #3に参加してきました。私が今まで知らなかった便利ツールや、考え方を知ることができました。本ブログでは、ここは抑えておきたいと感じた部分をさらっとまとめていきます。（ハッシュタグ：#frontend758）
セッション＆LT一覧
『エンジニアがUIデザインにちょっとだけ貢献する』
森田 かすみ さん
@KasumiMorita
『デザイナーでもおさえておきたいJavaScriptのあれこれ』
長谷川 広武（´°ム°`）さん
@h2ham
→ jQueryを使うと、コーディングが楽になる！jQuery使っていきましょう！というお話でした。
『UIの改善とJavaScript』
堀悟大 さん
『HTML・CMSから考えるコンポーネント化について』
関口 勇樹 さん
@redamoon
『BackstopJS + CircleCI + Docker で、HTML/CSSの自動テストをした話。(WordPressのテーマ編)』
Toro_Unit (占部 紘) さん
@toro_unit
→ 内容盛りだくさんだったので、次回記事に感想回します。
『HTML 5.2 での変更点をまるっと解説！』
大藤 幹 さん
@ofujimiki
『Chrome DevToolsで遊ぼう＼(^O^)／』
武藤桂子 さん
『デザイン通りのコーディング！～消耗しないまちがい探し～』
小林明日香 さん
→ PerfectPixel というツールを使えば、デザインと実装したWebサイトの間違い探しを楽にできる！というお話。
かなり便利そうなツールだったのでこれから使うと思います！
『WebサービスのUIをちょっぴりリッチにする小技』
今井 理紗子 さん
@i_mairy
→ 今井さんが今回伝えたかった小技が次のサイトに集約されているそうです。
PHOTOSHOPVIP-Webサイトを使いやすく！UIデザインのCSS小技テクニック21個まとめ（実例サンプルコード付）-
必見サイトです！
『EFO(入力フォーム最適化)のセオリーを詰め込みまくった汎用コーポレート用メールフォーム ozn-form を共同開発したのだが』
野村圭 さん
→ 便利なお問い合わせフォームを作った！というお話。
『エンジニアがUIデザインにちょっとだけ貢献する』
森田 かすみ さん
経験を共有しよう
Webサイトのデザインが使いやすいものなのか？親しみやすいのか？などを体験する最初のユーザーは、実装するエンジニアです。
もし、実装する際に「あれ？」っと思うようなデザインがあれば、その体験をデザイナーと共有し、使いやすいデザインをエンジニアから提案しましょう。
昨今流行っている「フラットデザイン」での例。
例えば、下記のようなコンテンツをマークアップするとします。
（森田さんのお話を聞いた上で、少しアレンジをして例を作ってみました。）
例）アボカド
エンジニアは実装する前に、aタグか、buttomタグか、spanタグなのか、どのタグで実装すべきかを考えます。しかし、一見ボタンなのかラベルなのか区別が付かないと思います。
このような場合、ボタンであれば影をつける、何をするためのボタンなのかを明示化するなどの提案が可能です。
提案例）
アボカドを購入する →
使いやすいボタンとは？
意味が位置に依存しているボタンは、要素単体で見た時にそのボタンがなんのボタンであるのか分からないため、リンクやボタンをタブキーで移動している視覚に頼れないユーザーにとって使いずらいサイトとなります。
意味が位置に依存しているようなデザインは、誰もが同じように解釈してくれるとは限りません。
また、能動的な言葉がボタンに書かれていると、ユーザーはそのボタンを押したくなるそうです。
NG：「登録」
Better：「今すぐ申し込む」
→『テキストは最高のUI』
デザイナーさんへ提案する時には
デザインについてデザイナーさんと話をするときには、（GoogleやAppleの）ガイドラインや本を元に話すと説得力がまして、よりデザイナーさんへ歩み寄った話ができます。
『UIの改善とJavaScript』
堀悟大 さん
UIをよくするためには、一人で完結させずにデザイナーや他のエンジニアにデザインや仕様について相談しましょう。
既に配布されているUIを探すなら、HOC（Higher Order Components）ライブラリがおすすめ。
また、セッションの中で品質保証ができるツールをいくつか紹介されていました。
私もこれからサイト開発に携わる中で一つずつ扱えるようになれればいいなと思います。
『HTML・CMSから考えるコンポーネント化について』
関口 勇樹 さん
関口さんのお話の半分くらいが、「静的ジェネレーター」についてだったような気がしますが、「静的ジェネレーター」という単語を今回のセッションで初めて聞いたため調べてみました。
静的ジェネレーターとは
WordpressなどのCMSと違い、データベース無しである程度動的なサイトが作成できるサービス。CMSのようにアクセス毎にHTMLを作成するわけではない為、ページの読み込み速度も上がり、セキュリティにも強い。
静的サイトジェネレーターの多くはNode.jsやReactなどの JavaScript フレームワークをベースにして動いているため、最低限の JavaScriptの知識は必要。
参考サイト
セッション終盤では、HTMLのコンポーネント化（パーツ化）についてのお話でした。
”使用頻度の高いHTMLデータ（見出し・ボタン・記事のリストなど）をコンポーネント化しておくとCMS化しやすい”
『HTML 5.2 での変更点をまるっと解説！』
大藤 幹 さん
追加された dialog タグ
＜dialog open＞＜/dialog＞でタグ内を表示し、
＜dialog＞＜/dialog＞で非表示できるタグ。
削除された属性
- inputmode属性
- dropzone属性
- contextmenu属性
追加された属性
- referrerpolicy属性
- allowpaymentrequest属性
- nonce属性
- manifest属性（5.1で削除されたが、5.0で使っていた人がエラー出ないようにするため再度追加された。使うためのものではない。）
- longdesc属性
その他の仕様変更
- 古いDOCTYPE宣言が使えなくなった。
- ＜!-- --＞内に、"--"が入れられるようになった。
- ＜body＞＜/body＞内に＜style＞＜/style＞を入れられるようになった。
- ＜dl＞要素の中に＜div＞要素が入れられるようになったことで、スライリングが可能に。
- p要素仕様が「変わった！？」と話題になったが、実は少し仕様が追記されただけで今までの機能が変わったわけではない。
- main要素（メイン要素を表すタグ）を1つのドキュメント内で複数使えるようになったが、2つ目以降は＜main hiddin＞にしてhiddin属性を追加し、非表示すること。
- adress要素の位置づけが、前はヘッダーフッターの仲間だったのに、ただのグループ化する要素になってしまった。
