PlayBackTech2017
出典元: blog.geek.co.jp
この記事は公開から7年以上が経過しています。内容が一部古い箇所があります。
Velocity.js
- アニメーション案件で使用してみました。
- これまで CSS3 アニメーションなりで無理やり動かしていたところをぬるぬるアニメーションさせたい用に検討。[jQuery]と親和性があるのでバリバリ使えました。
- 公式がドキュメント更新してなかったので知らなかったけど調べたら
pauseとresumeというのがあった。 - 付随して、GPUでの処理（position 要素の廃止、transform の使用）、will-changeの存在などパフォーマンスは出来る限り高められるような設定などもしました。
ES5 => ES6 対応
- マークアップ案件とかだとなかなか Webpack もバベる機会もないので個人的に変換しつつ勉強しています。
- 実際のコードをここで変換してみてどう置き換わるかなどの検証や勉強に使ってます。
- 個人リポジトリの JS も ES6 対応しつつあります。
- jQuery とアロー関数は最悪の組み合わせとのことで、jQuery を捨てる１つの材料となりそう。
Docker + WordPress
- 社内案件で Docker を使っていたので個人的にもなんか使えないかと画策。
- WordPress を動かすのがちょうどチュートリアルとして良さそうでした。
- docker-compose を覚えた。以下自作 WP テーマを公開してるリポジトリで使えます。
- 内製アプリで使えるようになるだろうか、色々試作してみたい（機会があるのか？）。
Flexbox
- 去年よりもレイアウトのためにバリバリ使うようになりました。
clearfixはそろそろ卒業。 - むしろ
clearfixといった疑似要素があるとjustify-contentのときに邪魔になる場合も…- 均等割付した折り返し Flexbox の最後の行
orderやflex-growとかflex-shrinkには地味にお世話になったかも。- あと
column-reverseとか。 - 来年はGrid Layoutも考えていきたい。
Intersection Observer がもたらすスクロールイベントにおける革命
- いままでスクロールをさせてイベントを発火させていたところを、ウィンドウや要素・コンポーネント同士が交差するときを監視してイベント発火させるようなものに変更してみた感じです。
- inview.js ほか scroll イベント動作といった負荷がかかったり、管理が煩わしかった部分を解消してくれた気がします。
- polyfill でなんとかなってるので今後も積極的に対応していきたいです。
<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
きれいなマークアップ、WAI-ARIA、アクセシビリティについて
- 今年、個人的にはマークアップエンジニアとして、意識的に取り組んでみた内容かもしれない。
div要素で作ったパンくずやナビゲーションには、aria-*属性付与するようにしてみた（ページのカレント状態など）<div aria-label="current page">カレントページ</div>- https://www.w3.org/TR/wai-aria/
- 注釈ほか
role要素、フォーカスのあたらない div 要素へのtabindexの設定など、少しずつではありますがユーザビリティを蔑ろにせず、アクセシビリティもじんわりと改善しています。 - Japan Accessibility Conferenceにも参加してきました。
- 結局のところ、WAI-ARIA に頼らずともちゃんとしたマークアップが出来ていればだいぶ機能的にかつアクセシビリティ面でも評価されるとのことなのでちゃんと書こうとなってます。
- HTML もデザイン通りの組みとしてよりかは「マシンリーダブル」らへんを意識して順番を変えるなどしてみました。
TypeScript、Storybook
- 業務でやってみたいというエンジニアに合わせて体験してみた感じ。
- 正直な所「すごく便利」という認識まで個人的においつけなかったのが反省点。
- とはいえ型定義しておくことのメリット・重要性みたいなのは理解した。
- とりあえず覚えたのは
anyで宣言しとけばなんとかなるということです（雑）
- とりあえず覚えたのは
- Storybook も活かしきれるまでには至らず、また、React.js v16 にて互換性がなかったため見送り。
- 企業別 Storybook 集 => https://storybook.js.org/examples/
- 関係ないですけど、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 での開発がスタート。１案件＋社内ツールプロジェクトなどでジョイン中。
- メリットとしては GitHub 用のツールとの連携とかで、いままで backlogのリポジトリ内管理だったので、いろんなことが出来ることが知れてよかった。
- 自動化ツールの CircleCI ほか CodeClimate についても体験。やはり間違いを減らす・機械的に判定してもらうというのは良い。
- ただ一時期開発中にエラーばかり吐いてバツマークが付きすぎてたので
ci skipを多用していた時期がありました。
- ただ一時期開発中にエラーばかり吐いてバツマークが付きすぎてたので
stylelint、csscomb
- CSS 周りの設定で stylelint を使用してみてます。
- ターミナルでエラーがでるようになってそれを直す矯正マシーンみたいな感じですが、逐一ルールも確認せずとも教えてくれるので便利。
- 弊社は ECSS の設計思想で CSS 書いてますが、それに付随した stylelint もドキュメント内にあったので、内容を少し更新してそれを派生させて動かすようにやってます。
- あと csscomb もコンフィグ化してみた。以下自分用ですが。
- 共通で使えるパッケージ、モジュールを作ってパブリックでいつか公開します。
- もちろん TSLint や ESLint とかも使ってます。
- htmllint や textlint も今後導入しようとかいう感じです。
Vue.js、Nuxt.js
- 去年、個人的に動かしてみて理解につなげてみてましたが、実は社内案件でこっそり使い始めています。
- Nuxt.js は興味湧いたので個人的に触ってみてます。SPA、SSR ほか静的ジェネレータとしても使えるようなのでマークアップ案件で活かせないかと検討中。
- やっぱり素として使うにはそれなりにコストがでてくる（モジュールやプラグインを使いたい時とか）ので、やっぱりwebpackとかでビルドできるような動かした方が必要に感じました。
- https://www.slideshare.net/ShoheiOkada/1-vuejs
- この辺見たんですけど 1000 行の
new Vue()が気になってしょうがない。
- さくらインターネット株式会社様も Vue.js バリバリ使ってる or 使おうとしているようです
vw,vh
- Viewport units という概念を取り入れてみました。
calc()とは相性が悪いみたいです。
Qiita Organization 始動
- 社内の Qiita Organization をやろうかと MTG で検討していたのをついに始動しました。
- 株式会社 GEEK の Qiita Organization はじめました！
ECSS ドキュメント見直し・翻訳作業
- 個人の Scrapbox にて個人的にコツコツやってる（スローペースですが）。
- ほかにも公式でまとめられている抽象的表現が多いドキュメントとかもまとめて分かりやすくしたのを社内で配布するなどしてみたいです。
- なんか今更みたいなのもあるかもしれませんが、誰もやっていないところで生まれる価値や仕事というものを見出していくようなことをしていきたいです。
Zeppelin、Avocode 体験
- デザインツールではあるが弊社デザイナーが取り入れてみた上記２点も体験してみました。
- CSS コード自動生成がすごい。100％希望通りのこととはならないが、画像化されているものの CSS 判定の精度の高さに感動しました。
- と当時書いてみたがどうやら微妙に px が違う問題があるらしい
- あと Sketch も案件によっては触れる機会がありました。
自分用 RSS リーダーを作ろうとした
- 経緯 => https://yamanoku.github.io/LT/lt04/
- Slack のチャンネルに URL をなげたら RSS リーダーとして機能するというのを導入してみた。
- そもそも iOS アプリのはてなブックマークが使いづらくなったのでなんとかしようと試していたのですが気がついたら使いづらい部分が直ってました。
- 自作 RSS のは中途半端に頓挫しました。機会があったら復帰させたい。