PlayBackTech2018
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。
- feat. 平成ドロー生成
- 2017 年 => PlayBackTech2017
CSS Grid Layout
- 今年様々な案件で利用できた
- レスポンシブにおける複雑なレイアウトに対応するのに向いている気がする
- PC と SP とでレイアウトが異なる時
- PC のときだけ親に wrapper などを挟んで妥協するなどしていたが
- 不必要な DOM を書かずに済むようになった
- 例：複雑なフッター階層の配置
- PC と SP とでレイアウトが異なる時
- autoprefixer のおかげで IE 対応もおおよそできるようになったと思う
アクセシビリティ活動
- 去年からやっていくぞみたいなことをやってたので個人的に色々やってみてます。
- WAI-ARIA の導入・実施
- 去年より引き続き
- パンくず、ハンバーガーボタン、タブ切り替え、アラート表示などに導入
- タブキーなどのキーボード移動への意識
- A11YJ_Slack への参加
- 質問してみたり色々とながめてみたり
- アクセシビリティおじさんたちは非常に頼もしい
- 入門書を書いてみた
- 後述する技術書典#5 参加において発表
- WCAG の翻訳をされているもんどさんに FB をもらえた（対応遅れてすみません…）
- 社内アクセシビリティ勉強会を開けた
- 誰がためにアクセシビリティ対応をするのか？
- プログラマーだけではなく、職務に関わらず誰もが取り組めることを強調
- プロダクトにどう取り組むか？
altどうするか？ などが議論できた - 株式会社インフォアクシア様が運用している WebA11y.jp に取り上げてもらえた！（嬉しい）
- 外部勉強会でも啓蒙してきた
- 来年もやっていくぞ！ ！！！！！！！！！！！！！！！
Sublime Text から Visual Code Studio の乗り換え
- Sublime Text のアップデートにより使えないパッケージがでてきたので物は試しで乗り換えてみた
- するといろいろ便利機能があることが判明して無事乗り換え成功した
- Visual_Studio_Code に移行してよかったこと
- 統合ターミナル
- ESLint / prettier の自動整形
- TypeScript 関連の強さ
Git clone機能（拡張）- 最近まで会社のエディタに editorconfig 入ってなくて戦慄した（修正済み）
ホスティングサービスがアツい
- Netlify
- 個人的一押しサービス
- プライベートリポジトリも無料でホスティングできる
- Firebase
- 最近人気がある？ GCP よりかは名前をよく聞く
- 年収 1000 万いけるらしい
- 11. フロントエンドエンジニアのキャリアパス
- now
- ビルドがめちゃくちゃ簡単
- アプデが頻発
- 昔は Heroku、AWS_S3 だけだった気がするけど、だいぶ競合が増えた気がする
- reInvent で新しいのが出たっぽいです
Renovate
- サイボウズフロントエンド MeetUp のTeppeisさんのスライドで知った
- npm パッケージのアップデート自動化をより用意にしてくれた
- Pull_Request で通知
- Greenkeeper の上位互換？
- パッケージ管理が多い場合はマージを自動化するなどがよさそう
- メジャーバージョン以外をマージするので OK？
- 特定のパッケージは管理しないなどもできる
脱 jQuery の機運を高める
- 個人的な目標として jQuery の使用をやめようとしてみた
- 今年 GitHub も実施していた
- 何故やめようとしたか
- 単純なセレクタ取得は
querySelectorがやってくれる - ライブラリを読み込まなくてもよい（容量）
- よしなにしてくれたのを廃止してロジックを理解する
- 依存しないコードでほかモダンフレームワークなどに派生できる
- 最近のバージョン更新頻度から見て、進化を感じられなくなった
- 単純なセレクタ取得は
- しかし頼るべきところがあればそこは頼る
offset().top周りの挙動- プラグインを使用したデザイン・仕様
- 結果として
- ES6 でモリモリ書けるようになった
- 頼っていたことは大したレベルのことではなかったとわかった
- 社内の新規開発案件では今後目にすることは無いと思う
- リニューアル案件やビジュアル重視とか納期重視だとまだ残るとは思う
- なんだかんだで楽なので
- レガシーなものを書き換えていきたい欲が出た
Scrapbox の社内活用
- もともと自分で使ってみていた
- 会社内でもやってみようとのことでクリエイティブチーム内で実施
- Scrapbox Drinkup #4 Tokyo Editionに参加してみて改めてその凄さを実感
- 社内啓蒙で悩んでたら[Nota Inc.]Nota_Inc.)さんに来てもらって勉強会をやってもらった
- 有料使用して現在 680 ページ超え
- プロジェクトの Wiki として
- 自己紹介ページ
- 知見の共有
- 勉強会のメモ残し
- 会議の議事録
- デザインレビュー
- 社内での意見を募る場として
- などなど様々な活用をしてもらっています
- スタータープランなども出て、ビジネス利用も今後増えそう？
- Nota Inc.様から Scrapbox 情報整理術を献本いただきました。感謝
パフォーマンス・チューニング
- とあるパフォーマンス・チューニング結果の紹介
- lighthouse Performance 評価
- Before
- First Contentful Paint を除き赤点。全体評価として 25 点
- After
- First Meaningful Paint, Speed Index が合格判定、ほか赤点箇所も秒数をほぼ減らせて合計 53 点
- Before
- 初回ロード時のリクエスト比較
- Before
- 主に画像や動画などの読み込みが多重化しており、20000ms かかっていた
- After
- 遅延読み込みを活用し、初回のリクエストを減らした結果 2000ms という 1/10 の短縮に成功！
- Before
- lighthouse と少し仲良くなれた
- コンテンツの遅延取得で Intersection_Observer 無双した
- HTTP/2 が大事だなと感じた
- ただ使い所をきちんと理解しないといけない
- HTTP/2 が速いという幻想 - Web パフォーマンスについて
- 劇的によくなったというわけではない。パフォーマンス改善とは計測・検証してわずかながらでも数値をあげていこうとする地道な戦いである
- 超速本にはお世話になりました。
stylelint
- 社内 config のものに sass ルールも追加
- 要望により depth 周りを設定しようと画策中
Nuxt.js で爆速開発体験
- 1 月に 1 系がリリース
- 9 月に 2 系がついにリリース
- Nuxt.js 2.0: Webpack 4, ESM Modules, create-nuxt-app and more! 💫
- 2 系が出て最速で vue-cli で作った Nuxt スターターキットで Nuxt1 => 2 に上げるやり方というのを書いた
- その後、公式が vue-cli で作成するのはdeprecated と発表
- とにかく爆速で開発できるメリットがある
- モダン開発環境を一瞬で用意してもらえる
- webpack などのバンドル処理周りを気にしなくていい
- ディレクトリが決まっている＝ルール・規約を制定しやすい
- 公式配布のプラグイン周りが豊富
- コンポーネント単位で再利用した設計ができる
- scoped css が書ける。CSS 設計思想など死んだ
- 爆速静的サイト作成ツールとして認識してもいい
- 今年の Adobe MAX Japan のサイトも Nuxt.js 製
- Nuxt.js による Adobe MAX Japan 2018 公式 Web サイト制作の舞台裏 – Speaker Deck
- もちろん Vue.js 記法で書かないといけないが大きいデメリットでもないと思う
- 社内勉強会を実施
- 開発のみならず制作会社としても今後使っていく層はどんどん広がっていきそう
PWA
- Progressive Web App
- Progressive = 漸進的
- Web をアプリのものに徐々に近づけていく思想
- 以下の条件で構成されている
- レスポンシブ
- ネットワーク接続に依存しない
- [Service Worker]Service_Worker)
- 常に最新
- https 通信必須
- [Web Push 通知]Web_Push％E9%80%9A%E7%9F%A5)
- manifest.json
- ホーム画面へのインストール可能
- HTML5 Conference 2018 でも amp 同様話題にあがってた
- つくったやつ
- https://yamanoku.net
- ポートフォリオ
- Nuxt.js で作成
- Reading…
- 去年の RSS 作成の流れを受けてやってみた
- 自分用 rss リーダーを作ろうとした
- 詳しくは PWA Advent Calendar 2018 - Qiita ６日目にて
- https://yamanoku.net
勉強会・MeetUp・ワークショップ・カンファレンスへの参加、登壇
気がついたら結構参加していた
- 参加した勉強会、MeetUp、カンファレンス、ハンズオン
- UIT#5 わたしたちにとっての Vue.js
- UX Cafe: チームで取り組む！ サイボウズのアクセシビリティ
- HTML5 Conference 2018
- We Are JavaScripters! @26th
- Vue Fes Japan 2018 Reject Conference]
- Meguro.css#4
- CI/CD Test Night#1
- Vue Fes Japan 2018
- DIST.23「マークアップを止めるな！」
- NuxtMeetup#5
- すくすく！ 子育てエンジニア Meetup#3
- STUDIO Workshop#3 @ OHAKO
- Netlify Meetup Tokyo#2
- Roppongi.js#6
- Vue.js Tokyo v-meetup#8
- Roppongi.js#5
- Meguro.css#2
- We Are JavaScripters! @22nd
- DXEL.1 エンジニアとデザイナーが「いい関係」を築くために
- HTML5 APP CONFERENCE 2018
- さくらの勉強会フロントエンドナイト
- Cybozu Meetup フロントエンド#2
- 第 69 回 HTML5 とか勉強会「UI フレームワーク最前線」
- Scrapbox Drinkup#4 Tokyo Edition
- Nuxt Meetup#2
- Roppongi.js#2
- 技術書典#4
- すくすく！ 子育てエンジニア MeetUp#2
- すくすく！ 子育てエンジニア MeetUp#1
- 地味に登壇もしていました
- すくすく！ 子育てエンジニア Meetup#3 発表資料 📄scroll handler を捨てよ、Intersection Observer へ出よう
- Meguro.css#4 発表資料 📄outline: none;
- We Are JavaScripters! @26th 発表資料 📄家庭内に Scrapbox を導入してみる提案
- 来年も引き続き色々参加していきたい
技術書典#5 参加
- サークル詳細 | こんのいぬ | 技術書典
- これからはじめる Web アクセシビリティ - こんのいぬ - BOOTH
- [技術書典#4]％E6%8A%80%E8%A1%93%E6%9B%B8%E5%85%B8%234)に参加してみて「本を作って発信する」ことに久々に熱を感じた
- 昔同人活動をやっていたのも影響あったかも（もう絵も描かなくなりましたが）
- なんとなく応募してみたら受かってしまったので何かやってみるかとなった
- アクセシビリティの入門書みたいなものを書いたらどうかと思った
- 自分の知識を深めるきっかけになる
- 啓蒙もできる
- アクセシビリティに何かしら貢献できそう
- 色々と反省箇所・準備不足な部分があったが、やってみてよかったと思うことが多かった
- ただ個人参加すると、欲しいものが入手できないというつらさがあった
- この活動を通して、ようやくアクセシビリティ活動の輪に入れたのかなと感じた
2018 年もいろいろありましたね（順不同）
- Vtuber ラッシュ
- 漫画村閉鎖
- WCAG 2.1 の勧告
- Hagex さん
- Osushi
- メルカリ エンジニア大量雇用
- はてなブログ、SSL 化
- Yahoo!ジオシティーズ終了のお知らせ
- はてなダイアリー、はてなハイクサービス終了のお知らせ
- 五反田バレー、シブヤ・ビットバレー
- mineo 通信の最適化実施
- Twitter User Streams API 廃止
- Pixel3 日本上陸
- Internet Explorer の今後について – Japan IE Support Team Blog
- 国際信州学院大学
- Node.js 10 系リリース
- GDPR
- サイトブロッキング騒動
- GitHub、Microsoft 買収
- ニコニコ動画、SSL 対応
- Mac OS Mojave
- Chrome アドレス欄からサブドメイン削除
- React Hook の衝撃
- 東京オリンピックボランティア申し込みフォーム
- ZOZO タウン社長、月へ行く宣言
- リニューアル国税庁 URL リダイレクト無効
- DX: Developer Experience（開発体験）
- 侍エンジニア塾
- azu さん転職活動開始
- WordPress 5.0 リリース（まもなく）