PlayBackTech2017
created at:
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。
Velocity.js
- アニメーション案件で使用してみました。
- これまでCSS3アニメーションなりで無理やり動かしていたところをぬるぬるアニメーションさせたい用に検討。[jQuery]と親和性があるのでバリバリ使えました。
- 公式がドキュメント更新してなかったので知らなかったけど調べたら
pause
とresume
というのがあった。- [Velocity.js一時停止・再生機能についてhttps://qiita.com/yamanoku/items/23e56a428aaa4fad7040]
- 付随して、GPU]での処理(position要素の廃止、transformの使用)、[will-change)の存在などパフォーマンスは出来る限り高められるような設定などもしました。
ES5 => ES6対応
- マークアップ案件とかだとなかなかWebpackもバベる機会もないので個人的に変換しつつ勉強しています。
- 実際のコードをここで変換してみてどう置き換わるかなどの検証や勉強に使ってます。
- 個人リポジトリのJSもES6対応しつつあります。
- jQueryとアロー関数は最悪の組み合わせとのことで、jQueryを捨てる1つの材料となりそう。
- jQueryとアロー関数の微妙な関係 https://qiita.com/mogya/items/1d6a0eadc7e0f9d2982b)
- 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での開発がスタート。1案件+社内ツールプロジェクトなどでジョイン中。
- メリットとしては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体験
- デザインツールではあるが弊社デザイナーが取り入れてみた上記2点も体験してみました。
- CSSコード自動生成がすごい。100%希望通りのこととはならないが、画像化されているもののCSS判定の精度の高さに感動しました。
- あとSketchも案件によっては触れる機会がありました。
自分用RSSリーダーを作ろうとした
- 経緯 => https://yamanoku.github.io/LT/lt04/
- SlackのチャンネルにURLをなげたらRSSリーダーとして機能するというのを導入してみた。
- そもそもiOSアプリのはてなブックマークが使いづらくなったのでなんとかしようと試していたのですが気がついたら使いづらい部分が直ってました。
- 自作RSSのは中途半端に頓挫しました。機会があったら復帰させたい。