プレイバック・テック・2017

この記事はGEEK Inc. Advent Calendar 2017の1日目の記事となります。

マークアップエンジニアと1歳8ヶ月の父親をやってます大山です。

アドベントカレンダーの季節ですね皆さん。いかがお過ごしでしょうか。今年、弊社もアドベントカレンダーをやってみるか、ということでやってみることとなりました。よろしくお願いします。

発起人なので初日を担当して何を書こうかと思った時に、2017年で個人的にやったこととかチャレンジにしたことなどを順不同にざっくばらんに振り返ろうと思います。

Velocity.js

ES5 => ES6対応

docker + WordPress

Flexbox

Intersection Observerがもたらすスクロールイベントにおける革命

  • いままでスクロールをさせてイベントを発火させていたところを、ウィンドウやエレメント・コンポーネント同士が交差するときを監視してイベント発火させるようなものに変更してみた感じです。
  • inview.jsほかscrollイベント動作といった負荷がかかったり、管理が煩わしかった部分を解消してくれた気がします。
  • polyfillでなんとかなってるので今後も積極的に対応していきたいです。

きれいなマークアップ、WAI-ARIA、アクセシビリティについて

  • 今年、個人的にはマークアップエンジニアとして、意識的に取り組んでみた内容かもしれない。
  • div要素で作ったパンくずやナビゲーションには、aria属性付与するようにしてみた。(ページのカレント状態など)
  • 注釈ほかrole要素、フォーカスのあたらないdiv要素へのtabindexの設定など、少しずつではありますがユーザビリティを蔑ろにせず、アクセシビリティもじんわりと改善しています。
  • 結局のところ、WAI-ARIAに頼らずともちゃんとしたマークアップが出来ていればだいぶ機能的にかつアクセシビリティ面でも評価されるとのことなのでちゃんと書こうとなってます。
  • HTMLもデザイン通りの組みとしてよりかは「マシンリーダブル」らへんを意識して順番を変えるなどしてみました(ここらへんは後日参加のアドベントカレンダーにて言及してみます)。

TypeScript, Storybook

  • 業務でやってみたいというエンジニアに合わせて体験してみた感じ。
  • 正直な所「すごく便利」という認識まで個人的においつけなかったのが反省点。とはいえ型定義しておくことのメリット・重要性みたいなのは理解した。
    • とりあえず覚えたのはanyで宣言しとけばなんとかなるということです(雑)
  • Storybookも活かしきれるまでには至らず、また、React 16にて互換性がなかったため見送り。
  • 関係ないですけど、React16.2からのFragment用の新しいシンタックスが出てdivでやらなくなったのすごくいいですね

render() {
  return (
    <>
       <h1>React v16.2 has been released!</h1>
       <h2>Introduces a new syntax for fragments!</h2>
       Thanks to all our collaborators!
    </>
  );
}

PostCSS

  • 社内的にはStylusをこれまで使用していたが、更新があまりない(2~4年前の)CSSプリプロセッサだったので、改めて一体どういうオプションだけが必要なのか・PostCSS自体も業務に導入すべきかなどあった上で自分の方で試してみた感じです。
    • 感想としてはcss単体で使うよりもsassやlessなどに付随させて必要なものを動かすのがてっとり早いという感じ。
    • プリプロセッサのオプションじゃまかない切れないものを継ぎ足すイメージ。
  • https://github.com/luisrudge/postcss-flexbugs-fixes
    • これはすごくて感動しました。

GitHub開発・CircleCI・CodeClimate

  • 社内でGitHubでの開発がスタート。1案件+社内ツールプロジェクトなどでジョイン中。
  • 自動化ツールのCircleCIほかCodeClimateについても体験。やはり間違いを減らす・機械的に判定してもらうというのは良い。
    • ただ一時期開発中にエラーばかり吐いてバツマークが付きすぎてたので [ci skip] を多用していた時期がありました。

stylelint, csscomb-config

Vue.js、Nuxt.js

vw,vh

  • Viewport unitsという概念を取り入れてみました。
  • ビューポートに合わせて幅や高さが可変=レスポンシブできるもの。画像の100%表示みたいな使い方はできるので、ビジュアル寄りな案件がいいのかなと思います。
  • Chromeでのフォントサイズは10pxで大きさ打ち止めになったりするので注意です。
  • ただし、これがレスポンシブの銀の弾丸となるわけではないので注意。(デザインもそれに合わせたものにしなきゃいけないので)
  • あと calc() とは相性が悪いみたいです。

Qiita Organization始動

ECSSドキュメント見直し・翻訳作業

  • 個人のScrapboxにて個人的にコツコツやってる(スローペースですが)。
  • ほかにも公式でまとめられている抽象的表現が多いドキュメントとかもまとめて分かりやすくしたのを社内で配布するなどしてみたいです。
  • なんか今更みたいなのもあるかもしれませんが、誰もやっていないところで生まれる価値や仕事というものを見出していくようなことをしていきたいです。

Zeppelin、Avocode体験

  • デザインツールではあるが弊社デザイナーが取り入れてみた上記2点も体験してみました。
  • CSSコード自動生成がすごい。100%希望通りのこととはならないが、画像化されているもののCSS判定の精度の高さに感動しました。
  • あとSketchも案件によっては触れる機会がありました。

自分用RSSリーダーを作ろうとした

  • 経緯 => https://yamanoku.github.io/LT/lt04/#/
  • SlackのチャンネルにURLをなげたらRSSリーダーとして機能するというのを導入してみた。
  • そもそもiOSアプリのはてなブックマークが使いづらくなったのでなんとかしようと試していたのですが気がついたら使いづらい部分が直ってました。
  • 自作RSSのは中途半端に頓挫しました。機会があったら復帰させたい。

 

という感じで細かいことも上げてみたら色々あるかもですがこんなことやってたりしました。節操がないといったらアレですが、とりあえずやってみてどういうものかを理解してみて使えるものは使っていく・取り入れていく感じにしています。

そして、こうして1年やったことを振り返るとどういうことをしてきたのか・どう学んできたのかを可視化できるので、そこからどう派生するかを考えるいいきっかけにもなります。来年はマークアップもきちんと取り組みつつ、今年あまり手がつけられなかったVue.jsで何か成果物が作れればいいなと思っています。

 

あとは今年も色々とニュースが賑やかでしたがこちらも気になったのをピックアップしてみました。

まだ一ヶ月ありますが、皆さんの気になった2017年ニュースはどんな感じでしょうか?

  • DeNAキュレーション事業問題
  • Reactライセンス問題
  • Sublime Textバージョン3 正式リリース
  • SoundCloud 閉鎖問題
  • iPhoneX
  • WannaCryマルウェア
  • Ustream消滅 => IBM Cloud Video
  • フェイクニュース
  • ダークウェブ
  • 人為的ミスでAWS S3クラウドストレージが落ちる
  • nomodule 属性、.mjs
  • LDR終了
  • Mastodon
  • ビットコイン
  • Coinhive
  • ヘッドレス Chrome
  • position: sticky
  • DMCA削除問題
  • Twitter社員、勤務最終日にトランプ大統領のアカウント消した事件
  • React Native
  • CASH
  • Adobe Sensei
  • https://shattered.it/
  • https://www.krackattacks.com/
  • dev.to VS 阿部寛HP
  • Firefox Quantum誕生
  • Tumblr創業者兼CEO、デビット・カープ辞任 <= NEW!

 

そんな感じで、GEEKのアドベントカレンダー始まりました。改めてよろしくどうぞです。

次回(12/4)はディレクターの佐々木さんになります。

投稿者プロフィール

ooyama
ooyama
const JOB = ["Markup_engineer", "Front_end_desiner", "Father_of_one_child"]
このエントリーをはてなブックマークに追加
はてなブックマーク - プレイバック・テック・2017
Facebook にシェア
[`evernote` not found]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です