日時:2018年10月11日(木)21:00〜
名称:#2 WP ZoomUP
講師:前川昌幸
内容:『2018年のフロントエンドのトレンドから見るコーディング事情』
zoomで参加する勉強会『WP ZoomUP』第2回のセッションナイトでした。
今日もMentimeterでアンケートをとって親睦を測ってのスタートです。
今日の参加者岡山県勢強い!とか、やっぱり楽しい。
2018年のフロントエンドのトレンドから見るコーディング事情
講師はイーネットワークスの前川昌幸さんです。
ウェブサイトとウェブアプリケーションの違いは?
ウェブサイトとウェブアプリケーションに明確な差はあるのか、ないのか、というお話から入りました。
今日はウェブサイト寄りのフロントエンドのお話をしていきますよー。
アクセシビリティ
アクセシビリティとは、あらゆる人が、どのような環境においても、柔軟にWebサイトを利用できるように構築すること。
障害者差別解消法が平成28年4月1日から施行され、公的サイトではアクセシビリティは義務となりました。
民間では努力目標だそうです。
3段階の等級(A、AA、AAA)がありますが、AAAは実現可能性が低いので実質的にはAAを目標にするといいそうです。
「100点満点の1ページより、50点が100ページある方が良い」
できる範囲から取り組んでいきたいですね。
フォントのサイズの大中小やダークモードは役に立たないこともあります。
なぜかというと、OSやブラウザが提供しているので、HTMLでするとかえって邪魔になったりするそうです。
自治体のサイトなどではよく見かけると思いますが、実情を見て知って考えなければですね。
そして、アクセシビリティといえば、『リーダブルな夜』。
次回2018年11月5日(月)は、代替テキストaltについてです。
CSS
Sassの活用がデファクトスタンダード(=事実上の標準)になってきています。
Rubyでの Sassの開発は終わった(2019年4月でメンテナンス終了)のですが、Web上で出てくる情報はRuby時代のものが多いので注意しましょう。
LibSassが活用のメインとなりますよ。
Sassのおすすめ本
インタラクションとしてのCSSアニメーションの重要性
ボタンを押して次のページが表示されるまでの間の待ち時間に、「あれ、押したかな」と、ユーザーにストレスを感じさせないために、色を変えたりしてボタンを押したことがわかるようにすることが大切です。
JavaScript
「脱jQuery」について
ブラウザ・CSSの進化やAngular、React、Vueなどの普及などで脱jQueryも言われていますが、
「ホームページにはjQuery」でいいんじゃないか、カルーセルがあってトップへするする戻るくらいならjQuery便利ですよね、というお話しでした。
確かに、いろいろな話に振り回されず、状況に応じて使えばいいですよね。
ツールについて
これからはgulpがいいのか、webpackがいいのか、熱い議論が交わされました。
これから覚える人はwebpackではなくgulpがいいよ、という意見から、だんだんと
gulpはトラブルと大変だしwebpackがいいですよ、という流れになってきたように思います。
Sassだけならkoalaでやってます 、という方もいらっしゃいました。
アプリ/サイト問わず求められているもの
スピード!
遅い場合は、何が原因か?を把握できるようにしましょう
Chromeのデベロッパーツールを使ったデモがありました。
デベロッパーツールの「Network」の「Waterfall」列で
・緑が長い・・サーバーが要因
・青が長い・・ファイルサイズが要因、ネットワークが細い時も
・白い横棒が長い・・ファイルが多くて待っているケース HTTP/2になったらこれは緩和される
*遅い要因は主に3つ
感想
幅広いお話しを聞いて、勉強したいことが増えて焦ったのですが、まさに、前川さんから
「やってないからといってあまり危機感に煽られないように注意しましょう。でも、鈍感でも問題ですよ」
というお話もありました。
自分に必要なものは何か考えて、勉強していかなければと改めて思ったのでした。
このようなコミュニティがあるのは、本当にありがたいことです。
本編は60人くらいで11時くらいまで、そしてそのあとの懇親会?最後は20人くらいで1時半くらいまで続いたのでした。
別に参加している一方通行のオンラインサロン(こちらは写らない)には顔を出さない我が家の猫のくるみも、zoonにはいつも参加してきます。
一人と一匹、お世話になりました。