Blog

プレイバック・テック・2018

投稿サムネイル

この記事はGEEK Inc. Advent Calendar 2018の1日目の記事となります。 

マークアップ&フロントエンジニアと2歳8ヶ月の父親をやってます大山です。
アドベントカレンダーの季節ですね皆さん。いかがお過ごしでしょうか。
去年に引き続き、またアドベントカレンダーをやってみるか、ということでやってみることとなりました。よろしくお願いします。
去年のリンク → https://adventar.org/calendars/2422
発起人なので初日を担当して何を書こうかと思った時に、2018年で個人的にやったこととかチャレンジにしたことなどを順不同にざっくばらんに振り返ろうと思います。
書き出しがデジャヴってる気がしますが、それはともかくよろしくお願いいたします。

CSS Grid Layout

フッターメニューにおけるCSSグリッドレイアウト活用イメージ

アクセシビリティ活動

アクセシビリティマーク

Sublime TextからVS Codeへの乗り換え

Visual Studio Code ロゴ
  • Sublime Textのアップデートにより使えないパッケージがでてきたので物は試しで乗り換えてみた
    • するといろいろ便利機能があることが判明して無事乗り換え成功した
  • Visual Studio Codeに移行してよかったこと
    • 統合ターミナル
    • ESLint / prettierの自動整形
    • TypeScript関連の強さ
    • Git clone機能(拡張)
    • 最近まで会社のエディタにeditorconfig入ってないの気づいて戦慄した(修正済み)

ホスティングサービスがアツい

Netlify

Netlify logo
  • 個人的一押しサービス
  • プライベートリポジトリも無料でホスティングできる

Firebase

Firebase logo

now

now logo
  • ビルドがめちゃくちゃ簡単
  • CLIのアプデが頻繁

Renovate

renovate logo
  • サイボウズフロントエンドMeetUpのTeppeisさんのスライドで知った

     

  • npmパッケージのアップデート自動化をより用意にしてくれた
    • Pull Requestで通知
    • Greenkeeperの上位互換?
  • パッケージ管理が多い場合はマージを自動化するなどがよさそう
    • 人力マージがめんどくさくなった
    • メジャーバージョン以外をマージするのでOK?
  • 特定のパッケージは管理しないなどもできる

脱jQueryの機運を高める

  • 個人的な目標としてjQueryの使用をやめようとしてみた
  • 今年GitHubも実施していた
  • 何故やめようとしたか
  • しかし頼るべきところがあればそこは頼る
    • offset().top 周りの挙動
    • jQueryプラグインを使用したデザイン・仕様
  • 結果として
    • ES6でモリモリ書けるようになった
    • jQuery頼っていたことは大したレベルのことではなかったとわかった
    • 社内の新規開発案件では今後目にすることは無いと思う
      • リニューアル案件やビジュアル重視とか納期重視だとまだ残るとは思う
      • なんだかんだで楽なので
    • レガシーなものを書き換えていきたい欲が出た

Scrapboxの社内活用

scrapbox logo

パフォーマンス・チューニング周り

  • とあるパフォーマンス・チューニング結果の紹介
  • lighthouse Performance 評価
    • Before
First Contentful Paintを除き赤点。全体評価として25点
  • After

  • First Meaningful Paint, Speed Indexが合格判定、ほか赤点箇所も秒数をほぼ減らせて合計53点
  • 初回ロード時のリクエスト比較
    • Before


  • 主に画像や動画などの読み込みが多重化しており、20000msかかっていた
  • After


  • 遅延読み込みを活用し、初回のリクエストを減らした結果2000msという1/10の短縮に成功!
  • lighthouseと少し仲良くなれた
  • コンテンツの遅延取得で Intersection Observer無双した
  • HTTP/2が大事だなと感じた
  • 何事も遅くするのは我々なので、速くするのではなく遅くしない意識をもつ
  • 超速本にはお世話になりました。 
  • stylelint

    Nuxt.jsで爆速開発体験

    Nuxt.js

    PWA

    PWA logo
    • Progressive Web App
      • Progressive = 漸進的
    • Webをアプリのものに徐々に近づけていく思想のもの
    • 以下の条件で構成されている
      • レスポンシブ
      • ネットワーク接続に依存しない
      • Service Worker
      • 常に最新
      • https通信必須
      • Web Push通知
      • manifest.json
      • ホーム画面へのインストール可能
    • HTML5 Conference 2018でもamp同様話題にあがってた 
    • 個人的につくったやつ
      • https://yamanoku.net
        • ポートフォリオ
        • Nuxt.jsで作成
      • Reading…
        • Reading... logo
        • 去年のRSS作成の流れを受けてやってみた
        • 自分用RSSリーダーを作ろうとした SlackのチャンネルにURLをなげたらRSSリーダーとして機能するというのを導入してみた。

          •  https://elements.heroku.com/buttons/gozman/slack-rss

          • そもそもiOSアプリのはてなブックマークが使いづらくなったのでなんとかしようと試していたのですが気がついたら使いづらい部分が直ってました。

          • 去年の記事より
        • 技術的なこととか詳しくは PWA Advent Calendar 2018 – Qiita 6日目にて!

    勉強会・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
    • 地味に登壇とかもしていた(以下発表資料)
    • 来年も引き続き色々参加していきたい

    技術書典#5参加

    • 技術書典#4に参加してみて「本を作って発信する」ことに久々に熱を感じた
      • 昔同人活動をやっていたのも影響あったかも(もう絵も描かなくなりましたが)
    • なんとなく応募してみたら受かってしまったので何かやってみるかとなった
    • アクセシビリティの入門書みたいなものを書いたらどうかと思った
      • 自分の知識を深めるきっかけになる
      • 啓蒙もできる
      • アクセシビリティに何かしら貢献できそう
    • 色々と反省箇所・準備不足な部分があったが、やってみてよかったと思うことが多かった
    • ただ個人参加すると、欲しいものが入手できないというつらさがあった
    • この活動を通して、ようやくアクセシビリティ活動の輪に入れたのかなと感じた

     
    2018年もいろいろありましたね。そんなわけで前回同様気になったニュース・ワードを順不同であげてみます。
    まだ一ヶ月ありますが、皆さんの気になった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リリース(まもなく)

    そんな感じで、今年もGEEKのアドベントカレンダー始まりました。改めてよろしくどうぞです。
    次回(12/2)はデザイナーの金箱さんになります。

    最新の技術と手法を用いて、
    IT分野で変化と進化を続ける
    Webインテグレーター

    神田北信ビルエントランス

    株式会社GEEK 〒101-0033
    東京都千代田区神田岩本町4-4 神田北辰ビル3F

    CATEGORIES