ITニュース html javascript jquery Webデザイン

webサイト制作のフロントエンドエンジニアの2016年振り返りとこれから学んでおきたいこと

エンジニアのタケヨシです。
名前だけでも覚えて帰ってください。
2日連続の2本目となる今回は「2016年のWeb制作フロントエンドの振り返りとこれから」について少しお話をしてみたいと思います。
昨日の記事はこちらから。
この記事はフロントエンドエンジニア Advent Calendar 2016　13日目の記事です。
2016年の残すところあとわずかですね。
今年もWebフロントエンドは色々なものが話題に上がりました。
HTML5.1勧告、PostCSSの注目、CSS in JS、jQuery3リリース、Angular2リリース、Vue2リリース、など他にもたくさんあるかと思います。

だがしかし、移り変わりの多い状態に辟易している方もいるんじゃないでしょうか。
「フロントエンド進化早すぎ問題」的な話題も毎年繰り返されているような気がしていますね。

そんなことからか、最近ではこんなユニークな記事も話題になりました。
【翻訳】 2016年にJavaScriptを学んでどう感じたか – Endo Tech Blog

自分自身、JSフレームワークなどを今年に触ったり、勉強会など色々な話を聞いてきてこの記事にでてくる人の気持ちがすごく分かりました。

というのも、ここで話題になるものはWebアプリ開発で利用するものが多く、 Webサイトの制作では、頻繁に利用する機会がないからです。

ですが、何も学ばなくていいわけではありませんのでというわけで個人的に今年を振り返りつつ、今後Webサイト制作の人間も学んでおきたい事柄を少しだけですが、挙げてみようと思います。

最初に断っておきますが、Webサイト制作をしているいちコーダーの個人的な見解なので、 全員に当てはまるわけではないということだけでご理解くださいませ。

html編

html5.1

2016/11/01にHTML5.1が勧告されました。
つい先月の話ですね。

要素の追加に加えて、既存の要素の記述方法にも変更がありました。
有名なものだと、picture要素、srcset属性あたりでしょうか。
他にもdetails,summary,dialog要素が増えています。

変更点では、section要素ごとのh1を含めるというルールが削除されたようです。また、menuitem要素のtype属性にコンテキストが追加され、コンテキストメニューの変更がおこなえるようになったみたいです。details,summaryなどはJS,CSSなしでアコーディオンのような挙動ができたり、 srcset、pictureではcssなしで画面幅による画像の切り替えが行なえたりと、HTMLのみできる挙動が増えてきました。

参考URL

アクセシビリティとWAI-ARIA

今年、「障害者差別解消法」が施行されました。
これは一般的な業種に限らず、Web業界でもアクセシビリティという言葉で面にする機会が増えてきました。 アクセシビリティとは「製品やサービスを支障なく利用できる度合い」のことで、Webの場合では環境に左右されず、情報を閲覧できることなどが含まれます。普段から行なっているクロスブラウザ対応もアクセシビリティ対応の一つと言えます。

WAI-ARIAはページ上のインタラクティブな部分な要素を定義づけることのできる仕様です。 この定義づけを行うことで動的コンテンツなどでも適切な情報を与えることができるように指定できます。

その他、アクセシビリティについては『WEB+DB PRESS vol.95』 でも特集されていました。 自分もこの記事を読んで改めてHTMLの書き方などに注意しなければと考えされました。

しかし、現場ではアクセシビリティだけの対策に工数をかけることは少ないというのが現状ですので、 普段の制作からある程度意識して作っていくことで負担なく進められるんじゃないかと思います。

AMP (Accelerated Mobile Pages)

Googleが作成した、ページを高速で表示させる仕組みのことです。
これは読み物系コンテンツやニュース記事と相性が良いため、マスメディア系サイト、ブログメディアなどはいち早く導入されているかと思います。

しかし現在ではJSが使えない、ファイル制限などがあるということから全てのコンテンツと相性が良いわけではありません。
お客様にはその点を注意して進めていければ効果が得られると思います。

CSS

Flexbox

2016年はFlexboxがとても話題になりました。
Flexboxはレイアウトに関するプロパティでカラムレイアウト、左右中央揃えなど、 今までの少し手間を加えていたレイアウトがこのプロパティでできるようになります。

bootstrap4などのCSSフレームワークのベースレイアウトもfloatからFlexboxベースのレイアウトになっていきました。

Flexboxに関する説明だとICSさんの記事がとってもわかりやすかったです。MDNのページもとても参考になります。

Flexboxに関する注意点として、仕様が頻繁に変わっていったということに加え、まだ最終勧告されていないプロパティですので、調べるときは情報が古くないか注意して調べた方がいいかもしれません。

PostCSS

PostCSSは現在注目を浴びているCSSの開発ツールの一つです。
PostCSSはPostCSSのツール本体を指す場合とプラグインを含めたエコシステム全般を指すことがあるようです。

PostCSSはプラグインを自分で組み合わせて使っていく仕組みになっており、柔軟性、拡張性が高いのが特徴です。利用できる機能としては、使用策定中のCSSを利用したり、最適化、後方互換などがあります。 有名なものだとautoprefixerでしょうか。autoprefixerはオプションで指定したバージョンまででベンダープレフィックスが必要なプロパティがあれば、ベンダープレフィックスを追加してCSSを再生成します。 Flexboxは特にプレフィックスの量が多く、手動で書くには骨が折れますので、Flexbox使うときには必須となってます。

autoprefixer以外にも変数や、入れ子などプラグイン次第で様々な機能を利用することができます。 加えて、CSSに対して、変更を加えるという仕組みなので、Sassやそのほかのプリプロセッサと合わせて利用することも可能です。

JS

jQuery3

2016/6/9にjQuery3がリリースされました。
アニメーションの部分をsetIntervalからRequestAnimationFrameが利用されるようになったり、非同期処理のjQuery.DefferedがPromises/A+との互換性を持ったりなど、モダンな仕様に変更されています。（RequestAnimationFrameにブラウザが対応していなければ、SetIntervalが使われます） 1系、2系から大きな変更があり、1.7系などを利用している人はそのまま入れ替えると、 動かない挙動、非推奨な記述などがあるので注意しましょう。 古いバージョンをから移行したい場合はmigrationプラグインを利用するようにして安全に移行をしていきましょう。

ES2015,ES2016とBabel

JavaScriptは特に変化が多いジャンルですが、Webサイト制作の場合、React,Angularなどの導入機会は少ないと思います。
しかしES2015,ES2016はライブラリやフレームワークではなく、言語の仕様なのでJSをやるなら基礎として覚えていけるものだと思います。
ただし、利用する時にはIE9~11などの対応していないブラウザのためにES5に変換できるBabelというトランスパイラツールをを利用しましょう。

またES2015のリリースは昨年の話で、現在の最新版はES2016となっております。
まずはtower-of-babel でES2015を触ってみましょう!

まとめ

Webサイト制作におけるフロントエンドの環境はWebアプリに比べ、焦って追いかける必要はないと思います。 ただ、知っておくことでより保守性が上がったり、制作スピードが上がることがあります。
保守性や、制作スピードが上がれば、品質の方にも力を注ぎやすくなるので、結果的にお客様への満足度に繋がりやすくなると思います。

話題になっているものがあった場合、ライブラリ・ツールなのか、言語仕様なのかにも気を配ると、現在必要なものかどうか見極める判断材料になると思います。

自分も色々とあげてはみたものの知らないものもまだだあります。
業務と直接関係ないものでも学ぶといつか役立つ日がくるかもしれません。
あせらず必要なものを見極め、これからも頑張っていきたいと思います。

関連サービス
LPO(ランディングページ最適化)

関連記事