yamanoku.net アーカイブ

PlayBackTech2017

created at:
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。

Image from Gyazo

Velocity.js

  • アニメーション案件で使用してみました。
  • これまでCSS3アニメーションなりで無理やり動かしていたところをぬるぬるアニメーションさせたい用に検討。[jQuery]と親和性があるのでバリバリ使えました。
  • 公式がドキュメント更新してなかったので知らなかったけど調べたらpauseとresumeというのがあった。
    • [Velocity.js一時停止・再生機能についてhttps://qiita.com/yamanoku/items/23e56a428aaa4fad7040]
  • 付随して、GPU]での処理（position要素の廃止、transformの使用）、[will-change)の存在などパフォーマンスは出来る限り高められるような設定などもしました。

ES5 => ES6対応

Docker + WordPress

Image from Gyazo Image from Gyazo

Flexbox

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

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

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

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

TypeScript、Storybook

  • 業務でやってみたいというエンジニアに合わせて体験してみた感じ。
  • 正直な所「すごく便利」という認識まで個人的においつけなかったのが反省点。
  • とはいえ型定義しておくことのメリット・重要性みたいなのは理解した。
    • とりあえず覚えたのはanyで宣言しとけばなんとかなるということです（雑）
  • Storybookも活かしきれるまでには至らず、また、React.js) v16にて互換性がなかったため見送り。
  • 関係ないですけど、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

Image from Gyazo

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

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

Image from Gyazo Image from Gyazo

vw,vh

  • Viewport unitsという概念を取り入れてみました。
  • calc()とは相性が悪いみたいです。

Qiita Organization始動

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

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

Zeppelin、Avocode体験

  • デザインツールではあるが弊社デザイナーが取り入れてみた上記２点も体験してみました。
  • CSSコード自動生成がすごい。100％希望通りのこととはならないが、画像化されているもののCSS判定の精度の高さに感動しました。
    • Image from Gyazo
    • と当時書いてみたがどうやら微妙にpxが違う問題があるらしい
  • あとSketchも案件によっては触れる機会がありました。

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

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

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
アーカイブ一覧へ戻る