kakakakakku blog

Weekly Tech Blog: Keep on Learning!

HTML の Lint ツール「htmllint」を CircleCI で実行する

HTML を実装しながら Lint を実行するため「htmllint」を使うことにした.類似ライブラリに「HTMLHint」もある.

github.com

htmllint と htmllint-cli

「htmllint」を CLI で実行する場合は「htmllint-cli」を使う.

github.com

以下のように npm で htmllint-cli をインストールして,プロジェクトのルートディレクトリで htmllint init を実行すると,設定ファイルの .htmllintrc がデフォルトルールで自動生成される.Lint ルールをカスタマイズする場合は .htmllintrc を変更する.

$ npm install -g htmllint-cli

$ htmllint --version
0.0.7

$ htmllint init

$ htmllint sample.html

検証

検証用にサンプル HTML を実装しながら,適宜 htmllint を実行したところ,以下を確認できた.

  • the tag must contain a title
    • head タグに title タグを下記忘れていると検出される
    • カスタマイズする場合は .htmllintrchead-req-title の設定を変更する
  • indenting spaces must be used in groups of 4
    • 4 スペース以外のインデントがあると検出される
    • カスタマイズする場合は .htmllintrcindent-width の設定を変更する
  • id value must match the format: underscore
    • id 名にハイフンがあると検出される
    • カスタマイズする場合は .htmllintrcid-class-style の設定を変更する
  • class value must match the format: underscore
    • class 名にハイフンがあると検出される
    • カスタマイズする場合は .htmllintrcid-class-style の設定を変更する
  • the id attribute is not double quoted
    • id 名にクォートを忘れていると検出される
    • カスタマイズする場合は .htmllintrcattr-quote-style の設定を変更する
  • the class attribute is not double quoted
    • class 名にクォートを忘れていると検出される
    • カスタマイズする場合は .htmllintrcattr-quote-style の設定を変更する
  • the id "wrapper" is already in use
    • id 名が重複していると検出される
    • カスタマイズする場合は .htmllintrcid-no-dup の設定を変更する

Lint として基本的なルールは揃っている.デフォルト OFF になっているルールも多く,全ルールを確認するには公式 Wiki を見る.

github.com

Dockerized

次に HTML を GitHub に push したら自動的に CI で htmllint を実行するため,事前準備として htmllint を Dockerized した.Docker Hub から kakakakakku/htmllint-cli イメージを落とせば使える.

$ docker pull kakakakakku/htmllint-cli
$ docker run kakakakakku/htmllint-cli --version
$ docker run -v ${PWD}:/assets kakakakakku/htmllint-cli --cwd /assets

CircleCI で htmllint を実行する

次は CircleCI で .circleci/config.yml を以下のように書く.

version: 2

jobs:
  htmllint:
    docker:
      - image: kakakakakku/htmllint-cli
    steps:
      - checkout
      - run: htmllint --cwd .

workflows:
  version: 2
  ci:
    jobs:
      - htmllint

試しにサンプル HTML を push すると,期待通りにエラーになった.

f:id:kakku22:20181130104707p:plain

まとめ

  • 「htmllint」を使うと HTML に Lint を実行できる
    • CLI で実行する場合は「htmllint-cli」を使う
  • CircleCI で htmllint を実行するために Dockerized した
  • HTML も CI しよう!

CSV に SELECT / UPDATE クエリを実行できる VS Code の拡張機能「Rainbow CSV」

定期的に CSV からデータを抽出する機会があり,抽出条件によって,今までは以下のような方法を使っていた.

  • CSV を Excel で開いてフィルターを使う方法
  • CSV を grep / egrep などの Linux コマンドで絞り込む方法
  • CSV をAmazon S3 にアップロードして Amazon S3 Select でクエリを実行する方法

Rainbow CSV

新しい方法として VS Code の拡張機能「Rainbow CSV」を試すことにした.Rainbow CSV には多くの機能があり,例えば「ハイライト」「CSVLint」「RBQL (RainBow Query Language)」がある.データを抽出する用途だけでなく,CSV を確認するときにも便利で,普段から使える最高の拡張機能だった.以下からインストールできる.

marketplace.visualstudio.com

実装は GitHub に公開されていた.

github.com

サンプルデータ

今回はサンプルデータとして,よく使われる郵便番号データ KEN_ALL.CSV を使う.事前にエンコードを Shift JIS から UTF-8 に変換しておく必要がある.

$ nkf -w --overwrite KEN_ALL.CSV

KEN_ALL.CSV は日本郵便のサイトからダウンロードできる.

www.post.japanpost.jp

ハイライト機能

Rainbow CSV には「ハイライト機能」があり,CSV を VS Code で開くと,自動的にカラムごとに色分けされる.さらに各データにマウスを合わせるとカラム名を確認できるので,もしヘッダー行が存在する CSV の場合は便利.

f:id:kakku22:20181129104930p:plain

CSVLint 機能

Rainbow CSV には「CSVLint 機能」もあり,例えば,カラム数が異なるレコードがあるとエラーになる.大量のデータの中からフォーマットエラーを探すときに使える.

f:id:kakku22:20181129105029p:plain

RBQL (RainBow Query Language) 機能

なんと言っても Rainbow CSV で1番便利な機能は「RBQL (RainBow Query Language) 機能」で,RBQL という SQL-like なクエリ言語でデータを抽出することができる.RBQL の仕様は以下のドキュメントにまとまっている.SELECT だけだと思ったら UPDATE もサポートされていた!CSV を UPDATE で更新できるのはスゴイ!

  • SELECT [ TOP N ] [ DISTINCT [ COUNT ] ]
  • UPDATE [ SET ]
  • WHERE
  • ORDER BY ... [ DESC | ASC ]
  • [ [ STRICT ] LEFT | INNER ] JOIN
  • GROUP BY
  • LIMIT N

github.com

SELECT を試す

実際に以下のクエリを実行した.単純な SELECT だけじゃなく WHEREGROUP BY も使えた.

SELECT * LIMIT 5
SELECT * WHERE a1 == '01101' LIMIT 20
SELECT a7, COUNT(*) GROUP BY a7

f:id:kakku22:20181129105108p:plain

(RBQL 実行画面)

UPDATE を試す

1行 UPDATE も複数行 UPDATE も実行できた.なお SELECTUPDATE「別ファイルとして」結果が出るため,直接ベースファイルを書き換えることはなく,誤った RBQL を実行しても影響なしという安心感も良かった.

UPDATE SET a4 = 'aaaaa' WHERE a3 == '0600000'
UPDATE SET a4 = 'aaaaa' WHERE a1 == '01101'

RBQL backend language を試す

RBQL backend language を使うと RBQL を拡張できる.現状だと JavaScript と Python がサポートされている.

  • JavaScript – RBQL backend language
  • Python – RBQL backend language

今回は JavaScript を使って RBQL を拡張してみた.

-- 郵便番号が "15060" で始まるデータを抽出する
SELECT * WHERE a3.indexOf("15060") == 0
-- データとは関係なく乱数を10件出力する
SELECT Math.random() * 100 LIMIT 10
-- データとは関係なく文字列を結合して出力する
SELECT 'ka'.repeat(3) + 'kakku' LIMIT 5

クエリを実行したら「恵比寿ガーデンプレイスって階ごとに郵便番号が違うんだー」ということを発見した.今まで知らなかった!

f:id:kakku22:20181129105130p:plain

Rainbow CSV : Vim Plugin

github.com

Rainbow CSV は Vim Plugin もあり,以下のように ~/.vimrc を設定するとインストールできた.VS Code と同じく「ハイライト機能」があり,さらに F5 を押して Vim から RBQL を実行することもできた.インストールしておくべき Vim Plugin だと思う.

NeoBundle 'mechatroner/rainbow_csv'

f:id:kakku22:20181129105217p:plain

まとめ

  • VS Code の拡張機能「Rainbow CSV」は便利!
    • ハイライト機能
    • CSVLint 機能
    • RBQL (RainBow Query Language) 機能
  • Rainbow CSV には Vim Plugin もある

Vue School の無料コース「Nuxt.js Fundamentals」を受講して Nuxt.js の基礎を学んだ

Vue School で今月から提供されている最新の無料コース「Nuxt.js Fundamentals」をさっそく受講した.最近よく聞くようになった Nuxt.js をまだ試したことがなく気になっていて,タイミングも良かった!今まで Vue School で「Vuex for Everyone」「Vue.js + Firebase Realtime Database」「Vue.js + Firebase Realtime Database」を受講して,素晴らしく体験が良く,今回もオススメできる内容だった!

vueschool.io

Nuxt.js Fundamentals

コースは計14個の動画で構成されている.動画を見るだけなら35分で見れるし,動画を見ながら写経をするとしても,2時間あれば終わる.Nuxt.js とは何か?を速習するのに最高なコースと言える.

  • 1 : Introduction to Nuxt.js
    • What is Nuxt.js? ⏲ 3:45
    • Create Nuxt App ⏲ 1:38
    • Guided Nuxt.js Project Tour ⏲ 2:02
  • 2 : Working with Nuxt.js
    • Customize the home page ⏲ 0:56
    • Create Application Pages ⏲ 2:59
    • Global CSS ⏲ 2:31
    • Adding a Navbar to Nuxt Apps ⏲ 1:29
    • Dynamic Routes ⏲ 1:53
    • Linking Between Pages ⏲ 2:37
    • Utilising the Vuex Store ⏲ 4:13
    • SEO and Meta Tags ⏲ 3:14
  • 3 : Build & Deploy
    • Build and Serve the Nuxt.js App ⏲ 0:49
    • Deploy Nuxt.js App to Heroku ⏲ 3:47
    • Deploy Nuxt.js App to Netlify ⏲ 3:54

以下のように英語字幕が出るので,英語が苦手な人でも,問題なく受講できると思う.前回とまた少しデザインが変わっていた.

f:id:kakku22:20181121233026p:plain

(受講画面例)

github.com/vueschool/nuxt-fundamentals

Vue.js 部分を写経するとして,スタイルやスタブデータなどは写経する意味があまりなく,Vue School の GitHub リポジトリからコピーした.動画ごとにコミットされていて,助かる!

github.com

1 : Introduction to Nuxt.js

What is Nuxt.js?

  • Nuxt.js = Vue.js フレームワーク
  • Server-Side Rendering
    • SEO 対策
    • meta タグ
  • Static Generated (Pre Rendering)
  • Automatic Code Splitting

nuxtjs.org

Create Nuxt App

yarn で Nuxt.js プロジェクトを作成する.

$ yarn create nuxt-app nuxt-fundamentals
yarn create v1.9.4
(中略)
? Project name nuxt-fundamentals
? Project description My tiptop Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework none
? Choose rendering mode Universal
? Use axios module no
? Use eslint no
? Use prettier no
? Author name kakakakakku
? Choose a package manager yarn

$ cd nuxt-fundamentals
$ yarn dev

yarn dev でローカルサーバを起動すると http://localhost:3000 にアクセスできるようになる.

f:id:kakku22:20181121233122p:plain

インストール方法の詳細はドキュメントに書いてある.

nuxtjs.org

Guided Nuxt.js Project Tour

Nuxt.js プロジェクト階層を確認した.以下は tree コマンドで第一階層を出力している.

$ tree -L 1 .
.
├── README.md
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── nuxt.config.js
├── package.json
├── pages
├── plugins
├── static
├── store
└── yarn.lock

2 : Working with Nuxt.js

Customize the home page

まず Nuxt.js のロゴを Vue School のログに変更した.

f:id:kakku22:20181121233140p:plain

Create Application Pages

Nuxt.js には最初から router が入っているため pages ディレクトリにファイルを追加すると,すぐアクセスできるようになる.今回は http://localhost:3000/post にアクセスできるように pages/post.vue を追加した.

f:id:kakku22:20181121233203p:plain

Global CSS

共通となる CSS を assets/style.css に作成し,Nuxt.js の設定ファイルとなる nuxt.config.js に以下のような設定を追加した.

module.exports = {
(中略)
  /*
  ** Global CSS
  */
  css: [
    '~/assets/style.css'
  ],
(中略)
}

nuxtjs.org

Adding a Navbar to Nuxt Apps

次にナビバーコンポーネントを追加する.このあたりは普通に Vue.js を実装するのと同じだった.

<template>
  <nav class="nav">
    <div class="logo">
      <a href="#" class="logo text-lg">
        Nuxt Fundamentals
      </a>

      <span class="subheader">A Vue School course</span>
    </div>
  </nav>
</template>

f:id:kakku22:20181121233242p:plain

Dynamic Routes

Nuxt.js の router 機能を使って http://localhost:3000/posts/${id} という URL にアクセスできるようにした.具体的にはスタブデータの関係上,以下の 3 URL にアクセスできる.

  • http://localhost:3000/posts/balut
  • http://localhost:3000/posts/whereIsIt
  • http://localhost:3000/posts/how

f:id:kakku22:20181121233315p:plain

Linking Between Pages

リンクを nuxt-link コンポーネントにリファクタリングして,SPA として画面遷移ができるようになった.

<template>
  <div class="container">
    (中略)
    <aside>
      <h3>Posts you might enjoy</h3>
      <ul>
        <li v-for="related in relatedPosts">
          <nuxt-link :to="{name: 'posts-id', params: {id: related.id}}">
            {{related.title}}
          </nuxt-link>
        </li>
      </ul>
    </aside>
  </div>
</template>

リンク一覧を返すメソッドでは,自分自身を filter で除外する実装になっている.

computed: {
  (中略)
  relatedPosts () {
    return this.posts.filter(post => post.id !== this.id)
  }
}

右側にリンク一覧を追加できた.

f:id:kakku22:20181121233352p:plain

nuxtjs.org

Utilising the Vuex Store

スタブデータを Vuex を使ってリファクタリングした.さらにトップページにもリンク一覧を追加した.

f:id:kakku22:20181121233626p:plain

nuxtjs.org

SEO and Meta Tags

Nuxt.js には指定した meta タグを生成する機能がある.例えば,以下のように index.vue に実装した.

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  },
  head () {
    return {
      title: 'Home Page 🍕',
      meta: [
        { name: 'twitter:title', content: 'Nuxt Fundamentals by Vue School'},
        { name: 'twitter:description', content: 'Nuxt + Vue School = 🍕'},
        { name: 'twitter:image', content: 'https://i.imgur.com/UYP2umJ.png'},
        { name: 'twitter:card', content: 'summary_large_image'}
      ]
    }
  },
  computed: {
    posts () {
      return this.$store.state.posts.all
    }
  }
}
</script>

nuxtjs.org

3 : Build & Deploy

Build and Serve the Nuxt.js App

最後は yarn build で,本番環境用に minify する.

$ yarn build
$ yarn start

Deploy Nuxt.js App to Heroku

完成した Nuxt.js プロジェクトを Heroku にデプロイする.特にハマるところはなく,通常通り Heroku に push する.

$ heroku git:remote -a xxx
$ git push heroku master

f:id:kakku22:20181121233654p:plain

nuxtjs.org

Deploy Nuxt.js App to Netlify

さらに Heroku だけではなく Netlify にもデプロイする.Netlify は静的ファイルを配信するため,今回は Netlify 側で yarn generate を実行し,生成された /dist ディレクトリを配信できるようにした.

$ yarn generate

f:id:kakku22:20181121233709p:plain

nuxtjs.org

まとめ

  • Vue School が公開している無料コース「Nuxt.js Fundamentals」を受講した
  • Nuxt.js で簡単なアプリケーションを実装して,Nuxt.js の基礎を学ぶことができた
  • ローカルサーバだけではなく,Heroku と Netlify にデプロイする手順も学ぶことができた
  • 今回の写経結果は GitHub に push してある

github.com

Vue School 受講履歴

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com

「学ぶ」とは何か?を理論的に知ることができた /「エンジニアの知的生産術」を読んだ

今年8月に出版された「エンジニアの知的生産術」を読んだ.今までも「どう効率的に仕事を進めるか」とか「どう意識高くアウトプットをし続けるか」とか「知的生産」に興味があって取り組んできたけど,本書の目次と索引を見たら,気になる用語がたくさんあった.

  • 第1章 : 新しいことを学ぶには
  • 第2章 : やる気を出すには
  • 第3章 : 記憶を鍛えるには
  • 第4章 : 効率的に読むには
  • 第5章 : 考えをまとめるには
  • 第6章 : アイデアを思い付くには
  • 第7章 : 何を学ぶかを決めるには

エンジニアの知的生産術 ──効率的に学び、整理し、アウトプットする (WEB+DB PRESS plusシリーズ)

エンジニアの知的生産術 ──効率的に学び、整理し、アウトプットする (WEB+DB PRESS plusシリーズ)

やる気

第2章では「やる気」がテーマになっていた.冒頭に「延べ12000人以上のやる気が出ない人に調査をした」と書かれていて,パワーワードすぎて笑ってしまった.紹介されているプラクティスは「GTD (Getting Things Done)」や「ポモドーロ」など,有名なものも多かったけど,他にも「タスクを1つに絞れているか」や「どのように優先順位を決めるか」や「不確定要素があるときに何を優先するか」など,考えさせられる内容になっていた.

個人的に「ポモドーロ」は5年以上続けていて,自己流の「ポモドーロ + 収穫逓減の法則」を実践している.また最近はタイムボックスを 25min → 45min に伸ばして検証をしている.

kakakakakku.hatenablog.com

また僕は「タスクが大きすぎる」と腰が重くなり「やる気」が出ないため「小さな習慣」を意識している.

kakakakakku.hatenablog.com

効率的に読む

第4章では「効率的に読む」がテーマになっていた.個人的に本を読むのが遅いことに悩んでいて,でも「速読」を解決策にしたくないとも考えていたので,第4章は本書の中で1番学びがあった.

  • 「読む」とは何?
  • 本を「読む」ことの目的は?
  • 「読む」種類は?
  • 「読む」速度は?

特に「読む速度のピラミッド」として「読む速度」を「8段階 : A / B / C / D / E / F / G / H」に分類されていたのは印象的だった.今まで「読む速度」を意識したことはなく,どんな難易度の本でも同じように読んでしまっていたことに気付いた.さらに「段階 A / B」は「読まない読み方」となり,本書の中で紹介されていた本「読んでいない本について堂々と語る方法」も気になる.

読んでいない本について堂々と語る方法 (ちくま学芸文庫)

読んでいない本について堂々と語る方法 (ちくま学芸文庫)

「読む速度のピラミッド」の手書き図は以下の記事にも載っている.

d.hatena.ne.jp

特に「段階 D / E」の「速い読み方」の中で Whole Mind System というプラクティスが紹介されていた.Whole Mind System では以下の段階がある(本来ある "5段階" を著者がさらに "8段階" に再構築した).

  1. 準備
  2. プレビュー
  3. フォトリーディング
  4. 質問を作る
  5. 熟成させる
  6. 答えを探す
  7. マインドマップを作る
  8. 高速リーディング

「3. フォトリーディング」は「目のフォーカスをぼかしてページ全体を眺める」読み方で,どちらかと言うと速読に近く感じるけど,例えば「見出しを中心に読む」など,自己流に粗く読むことはできそうだと気付けた.今までは1文字1文字読む癖があり,誤植をよく見つけることもあったけど,時間とトレードオフになっていた.さらに「読む速度を変えて2回読む」という発想もなく,次に本を読むのが楽しみになった.

そして「4. 質問を作る」は良かった.近い観点だと「人に教えられるように読む」「読んだ後にブログを書く(言語化する)」も重要だと思う.質問を作ることを意識しながら読み直すと,自分自身の理解度も整理できるし,僕が担当しているトレーニングでも活用できるし,メリットが多くある.

f:id:kakku22:20181113122339p:plain

(参考 : 本書を読み終わった状態)

要約の素晴らしさ

本書は多くの参考文献(本だけでなく研究成果や歴史的な背景なども含む)に支えられている.そして,参考文献の重要なポイントが要約して説明されていたり,キレイに図解されていたり,理解しやすいように工夫されている点が素晴らしかった.点と点が繋がり,深く理解されているからこそ,ここまで構成できるんだと思う.今まで知らなかった用語を箇条書きにしておく.

最後に

本書は非常に理論的かつ学術的に構成されているので,スラスラと流し読みできるような本ではないと思う.また注釈も多く,全ページが充実して書かれている.今回読んで全てを理解できたとは言えないため,本書の冒頭に書かれている以下のメッセージの通り,また半年後に読み直そうと思う.

材料がそろっていないと、結合は起きません。「地」は経験です。本書を読んでしっくりこなかったなら、今回は残念ながら材料が足りなかったようです。でも大丈夫です。経験は日々あなたの中に蓄積されていくので、いつか「あ、これか」とつながるときが来るでしょう。半年経ってからまた読みなおしてみてください。きっと何かが変わるでしょう。

正誤表

Scrapbox にまとまっている.

scrapbox.io

依存パッケージを更新するサービス「Depfu」で package.json の更新をチェックする

Depfu は依存パッケージの更新を定期的にチェックし,更新があった場合にプルリクエストを作成してくれるサービスで,現時点で「Ruby, JavaScript」をサポートしている.導入企業に Cookpad も載っている.今回 Depfu を JavaScript で試した.

depfu.com

Depfu 以外にも依存パッケージの更新を定期的にチェックするサービスはある.

特に Dependabot はサポートしているプログラミング言語が多いという特徴がある.以下に Dependabot + Dockerfile を試した記事がある.

kakakakakku.hatenablog.com

インストール

Depfu は GitHub Marketplace からインストールできる.パブリックリポジトリなら無料で使えるので,すぐに試すことができる.

github.com

今回は数年前に実装した個人用 Slack Bot (Hubot) のリポジトリに Depfu を適用した.全プルリクエスト(計8個)を merge して,Slack Bot をデプロイしたら問題なく使えた!Slack Bot は Heroku で動かしていて,久し振りに Heroku を使った.

github.com

リポジトリ設定

Depfu では,リポジトリごとに詳細な設定ができる.

  • Update Strategy(アップデート戦略)
    • Individual Updates
    • Security Updates Only
    • Paused
  • Limit of open pull requests from Depfu(プルリクエスト上限数)
  • Customize the pull requests Depfu creates
    • Commit message(コミットメッセージ)
    • Which labels should we use for the PRs?(プルリクエストラベル)
    • Should we assign anyone to the PRs?(プルリクエストアサイン)
  • Environment Variables(環境変数)

f:id:kakku22:20181109112645p:plain

Up-to-date Dependencies

ライブラリごとに Requirement version と Latest version を確認できる管理画面がある.ライブラリによっては GitHub URL と Changelogs URL も載っていて,非常に使いやすく実装されている.

f:id:kakku22:20181109112658p:plain

プルリクエスト

Depfu のプルリクエストは詳細に書かれていて,ライブラリのバージョン比較だけではなく,実際にどのような差分(コミット)があるのかを確認することもできる.

github.com

また Depfu は ChatOps に対応していて,以下のようなコメントでメンションをすると,トリガーすることができる.今回は @​depfu rebase@​depfu merge を使った.

  • @​depfu rebase
  • @​depfu merge
  • @​depfu reopen
  • @​depfu pause
  • @​depfu pause [minor|major]
  • @​depfu resume

f:id:kakku22:20181109112730p:plain

Depfu バッジ

Depfu では GitHub の README.md などに貼るバッジも用意されている.

Depfu

Depfu

Depfu

まとめ

  • 依存パッケージの更新を定期的にチェックしてくれる Depfu は便利
  • 現時点では Ruby と JavaScript をサポートしている
  • Depfu はどう発音するんだろう?
    • 試しに say をしたら「デェプフ」のように聞こえた!
$ say -v Alex Depfu

関連記事

今回題材にした Slack Bot を実装した2016年に書いた記事は以下にある.今どき CoffeeScript は書かないよなぁー.

kakakakakku.hatenablog.com