PlayBackTech2018
https://gyazo.com/48d84dac71d8c0ece8e16379ede834ba
feat. 平成ドロー生成
2017年 => PlayBackTech2017
CSS Grid Layout
https://gyazo.com/6f82a1382d08fee4cca8e04dea5c4536
今年様々な案件で利用できた
レスポンシブにおける複雑なレイアウトに対応するのに向いている気がする
PCとSPとでレイアウトが異なる時
PCのときだけ親にwrapperなどを挟んで妥協するなどしていたが
不必要なDOMを書かずに済むようになった
例：複雑なフッター階層の配置
autoprefixerのおかげでIE対応もおおよそできるようになったと思う
CSS Gridのgap（grid-gap）が遂にIE 11でも再現できるように。Autoprefixerが待望のアップデート - Qiita
アクセシビリティ活動
https://gyazo.com/9e358448e053d1f1998bd045d413562b
去年からやっていくぞみたいなことをやってたので個人的に色々やってみてます。
WAI-ARIAの導入・実施
去年より引き続き
パンくず、ハンバーガーボタン、タブ切り替え、アラート表示などに導入
タブキーなどのキーボード移動への意識
A11YJ Slackへの参加
質問してみたり色々とながめてみたり
アクセシビリティおじさんたちは非常に頼もしい
入門書を書いてみた
後述する技術書典#5参加において発表
WCAGの翻訳をされているもんどさんにFBをもらえた（対応遅れてすみません…）
もんどさんからのFB対応 – 第4章 · Issue #2 · yamanoku/accessibility_book-issues
もんどさんからのFB対応 – 第6章 · Issue #3 · yamanoku/accessibility_book-issues
社内アクセシビリティ勉強会を開けた
誰がためにアクセシビリティ対応をするのか？
プログラマーだけではなく、職務に関わらず誰もが取り組めることを強調
プロダクトにどう取り組むか？altどうするか？などが議論できた
株式会社インフォアクシア様が運用しているWebA11y.jpに取り上げてもらえた！（嬉しい）
https://twitter.com/weba11y/status/1065428929165455360
外部勉強会でも啓蒙してきた
outline: none;
来年もやっていくぞ！！！！！！！！！！！！！！！！
Sublime TextからVS Codeの乗り換え
https://gyazo.com/9a84874ffd2020a35f33fae6e5abe305
Sublime Textのアップデートにより使えないパッケージがでてきたので物は試しで乗り換えてみた
するといろいろ便利機能があることが判明して無事乗り換え成功した
Visual_Studio_Codeに移行してよかったこと
統合ターミナル
ESLint / prettierの自動整形
TypeScript関連の強さ
Git clone機能（拡張）
最近まで会社のエディタにeditorconfig入ってなくて戦慄した（修正済み）
ホスティングサービスがアツい
Netlify
https://gyazo.com/9f86f8a1f474ab9eb6f3ccbe109795eb
個人的一押しサービス
プライベートリポジトリも無料でホスティングできる
Firebase
https://gyazo.com/c6e057f43e4dc45e6a30fa051d61d668
最近人気がある？GCPよりかは名前をよく聞く
年収1000万いけるらしい
11. フロントエンドエンジニアのキャリアパス
now
https://gyazo.com/8ffaa569d5871e67db9ad4292e2aa9e5
ビルドがめちゃくちゃ簡単
アプデが頻発
昔はHeroku、AWS S3だけだった気がするけど、だいぶ競合が増えた気がする
reInventで新しいのが出たっぽいです
新サービス「AWS Amplify Console」登場！簡単3ステップでWebアプリのCI/CD環境を構築！ #reinvent ｜ DevelopersIO
Renovate
https://gyazo.com/330388a9f5d6d18640bd029b0bf20a0e
サイボウズフロントエンドMeetUpのTeppeisさんのスライドで知った
Automated Dependency Updates with Renovate
npmパッケージのアップデート自動化をより用意にしてくれた
Pull Requestで通知
Greenkeeperの上位互換？
パッケージ管理が多い場合はマージを自動化するなどがよさそう
メジャーバージョン以外をマージするのでOK？
特定のパッケージは管理しないなどもできる
脱jQueryの機運を高める
個人的な目標としてjQueryの使用をやめようとしてみた
今年GitHubも実施していた
Removing jQuery from GitHub.com frontend
何故やめようとしたか
単純なセレクタ取得はquerySelectorがやってくれる
ライブラリを読み込まなくてもよい（容量）
よしなにしてくれたのを廃止してロジックを理解する
依存しないコードでほかモダンフレームワークなどに派生できる
最近のバージョン更新頻度から見て、進化を感じられなくなった
jQuery 3.3.0 – A fragrant bouquet of deprecations and…is that a new feature? | Official jQuery Blog
しかし頼るべきところがあればそこは頼る
offset().top 周りの挙動
プラグインを使用したデザイン・仕様
結果として
ES6でモリモリ書けるようになった
頼っていたことは大したレベルのことではなかったとわかった
社内の新規開発案件では今後目にすることは無いと思う
リニューアル案件やビジュアル重視とか納期重視だとまだ残るとは思う
なんだかんだで楽なので
レガシーなものを書き換えていきたい欲が出た
Scrapboxの社内活用
https://gyazo.com/5f93e65a3b979ae5333aca4f32600611
もともと自分で使ってみていた
会社内でもやってみようとのことでクリエイティブチーム内で実施
Scrapbox Drinkup #4 Tokyo Editionに参加してみて改めてその凄さを実感
社内啓蒙で悩んでたらNota Inc.さんに来てもらって勉強会をやってもらった
Nota社主催でScrapbox勉強会をやってもらった話 – 株式会社GEEKクリエイターズブログ
有料使用して現在680ページ超え
プロジェクトのwikiとして
自己紹介ページ
知見の共有
勉強会のメモ残し
会議の議事録
デザインレビュー
社内での意見を募る場として
などなど様々な活用をしてもらっています
スタータープランなども出て、ビジネス利用も今後増えそう？
Scrapbox 利用期限なし無料の新プラン ”Business Starter”を発表。社内でスモールスタートしよう。
Nota Inc.様からScrapbox情報整理術を献本いただきました。感謝
パフォーマンス・チューニング
とあるパフォーマンス・チューニング結果の紹介
lighthouse Performance 評価
Before
https://gyazo.com/f17c1d5c17a0110f02b1fe6040ab4dd8
First Contentful Paintを除き赤点。全体評価として25点
After
https://gyazo.com/5d0e20c2072216fbda4757339a7e8211
First Meaningful Paint, Speed Indexが合格判定、ほか赤点箇所も秒数をほぼ減らせて合計53点
初回ロード時のリクエスト比較
Before
https://gyazo.com/3695db66547ec47ceeec0ede67462be2
主に画像や動画などの読み込みが多重化しており、20000msかかっていた
After
https://gyazo.com/eb0aa95ee51f245a875b1843fe94c668
遅延読み込みを活用し、初回のリクエストを減らした結果2000msという1/10の短縮に成功！
lighthouseと少し仲良くなれた
Lighthouse によるウェブアプリの監査 | Tools for Web Developers | Google Developers
コンテンツの遅延取得でIntersection Observer無双した
HTTP/2が大事だなと感じた
ただ使い所をきちんと理解しないといけない
HTTP/2が速いという幻想 - Webパフォーマンスについて
劇的によくなったというわけではない。パフォーマンス改善とは計測・検証してわずかながらでも数値をあげていこうとする地道な戦いである
http://azu.github.io/slide-pdf.js/?slide=http://azu.github.io/slide//2018/roppongijs/webpagetest-performance.pdf
速くするのではなく遅くしない（not-slow）
超速本にはお世話になりました。
stylelint
社内configのものにsassルールも追加
update stylelint-config · geekcojp/config@eae7a70
要望により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記法で書かないといけないが大きいデメリットでもないと思う
社内勉強会を実施
Nuxt.jsで爆速開発最高だぜ勉強会@2018-11-16
開発のみならず制作会社としても今後使っていく層はどんどん広がっていきそう
PWA
https://gyazo.com/5dec5cb8c410a2ab9238e79a0aee2f0b
Progressive Web App
Progressive = 漸進的
Webをアプリのものに徐々に近づけていく思想
以下の条件で構成されている
レスポンシブ
ネットワーク接続に依存しない
Service Worker
常に最新
https通信必須
Web Push通知
manifest.json
ホーム画面へのインストール可能
HTML5 Conference 2018でもamp同様話題にあがってた
つくったやつ
https://yamanoku.net
ポートフォリオ
Nuxt.jsで作成
Reading…
去年のRSS作成の流れを受けてやってみた
PlayBackTech2017#5b3b9527c2cd3f00002f9e93
自分用RSSリーダーを作ろうとした
・SlackのチャンネルにURLをなげたらRSSリーダーとして機能するというのを導入してみた。
・ https://elements.heroku.com/buttons/gozman/slack-rss
・そもそもiOSアプリのはてなブックマークが使いづらくなったのでなんとかしようと試していたのですが気がついたら使いづらい部分が直ってました。
詳しくは PWA Advent Calendar 2018 - Qiita ６日目にて
勉強会・MeetUp・ワークショップ・カンファレンスへの参加、登壇
気がついたら結構参加していたyamanoku.icon
参加した勉強会、MeetUp、カンファレンス、ハンズオン#5afce094c2cd3f0000e0366d
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参加
https://gyazo.com/bf7b22b3e820bbb41c7f6336a0cc26ca
サークル詳細 | こんのいぬ | 技術書典
これからはじめるWebアクセシビリティ - こんのいぬ - BOOTH
技術書典#4に参加してみて「本を作って発信する」ことに久々に熱を感じた
昔同人活動をやっていたのも影響あったかも（もう絵も描かなくなりましたが）
なんとなく応募してみたら受かってしまったので何かやってみるかとなった
アクセシビリティの入門書みたいなものを書いたらどうかと思った
自分の知識を深めるきっかけになる
啓蒙もできる
アクセシビリティに何かしら貢献できそう
色々と反省箇所・準備不足な部分があったが、やってみてよかったと思うことが多かった
ただ個人参加すると、欲しいものが入手できないというつらさがあった
この活動を通して、ようやくアクセシビリティ活動の輪に入れたのかなと感じた
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、マイクロソフト買収
ニコニコ動画、SSL対応
MacOS Mojave
Chrome アドレス欄からサブドメイン削除
React.js Hookの衝撃
東京オリンピックボランティア申し込みフォーム
ZOZOタウン社長、月へ行く宣言
リニューアル国税庁 URLリダイレクト無効
DX: Developer Experience （開発体験）
侍エンジニア塾
azuさん転職活動開始
WordPress 5.0リリース（まもなく）
wrote: 2018/12/1
https://archives.yamanoku.net/playback-tech-2018
#tech #2018