DEV Community: Tsuyoshi Tokuda

Github Sponsor機能を使ってESLintに支援した

Tsuyoshi Tokuda — Thu, 14 May 2020 05:34:02 +0000

コードによる貢献もすばらしいとは思いつつ、色々な貢献の方法もあることはいいなぁと思っていました。
今回は以前からずっとやってみたいと思っていた金銭的貢献をGithub Sponsor機能を使って行いました。毎月$5をこのプロジェクトに貢献して、さらに素晴らしいパッケージになることを望みます。

なぜESLintかというと、普段のフロントエンド開発をする時に必ずインストールするパッケージの一番上位のものがESLintだったからです。
しかも、自分の開発スタイルはLintやテストをキチンと通した方法を好んでいるので、ESLintは欠かせません(インストールしないことはありません)。
仕事でもプライベートでも、このライブラリを使っています。

今回僕からは微々たる貢献ですが、ESLintのさらなる発展に寄与できたら本当に嬉しいです(^o^)

(https://github.com/tokuda109 のSponsoringのところから確認できます。)

npm version でできること

Tsuyoshi Tokuda — Tue, 22 Oct 2019 00:40:16 +0000

最近 npm version というコマンドを教えてもらいました。
npm は Node.js のバージョン管理ツールで、npm install くらいしか使っていないので、こういう使い方があるんだぁと感心しました。そもそもこのコマンド自体を教えてもらって初めて知りました。
ここでは、npm version の使い方を紹介します(解説は公式ドキュメントを元に行います)。

npm version

今手元の環境で npm version を実行すると以下のような出力が得られます。

$ npm version
{
  npm: '6.9.0',
  ares: '1.15.0',
  brotli: '1.0.7',
  cldr: '35.1',
  http_parser: '2.8.0',
  icu: '64.2',
  llhttp: '1.1.1',
  modules: '72',
  napi: '4',
  nghttp2: '1.38.0',
  node: '12.1.0',
  openssl: '1.1.1b',
  tz: '2019a',
  unicode: '12.1',
  uv: '1.28.0',
  v8: '7.4.288.21-node.16',
  zlib: '1.2.11'
}

バージョンの更新

npm version は、サブコマンドで以下のものを渡して実行することでバージョンをインクリメントすることができます。

Vue.js のリポジトリを手元にダウンロードしてきてリポジトリのルートで実行してみます。

$ npm version
{
  vue: '2.6.10',
  npm: '6.9.0',
  ares: '1.15.0',
  brotli: '1.0.7',
  cldr: '35.1',
  http_parser: '2.8.0',
  icu: '64.2',
  llhttp: '1.1.1',
  modules: '72',
  napi: '4',
  nghttp2: '1.38.0',
  node: '12.1.0',
  openssl: '1.1.1b',
  tz: '2019a',
  unicode: '12.1',
  uv: '1.28.0',
  v8: '7.4.288.21-node.16',
  zlib: '1.2.11'
}

Git リポジトリ内でじっこうすること、先程のものから package.json に記載したパッケージのバージョンの表記も追加されています。

このバージョンをインクリメントすることができます。
バージョンの仕様は semver に準拠していて、対象のバージョンナンバーを指定して以下のように実行します(引き続き Vue.js のリポジトリで行っています)。

$ npm version patch
v2.6.11

バージョン情報を出力してみると:

$ npm version
{
  vue: '2.6.11',
  npm: '6.9.0',
  ares: '1.15.0',
  brotli: '1.0.7',
  cldr: '35.1',
  http_parser: '2.8.0',
  icu: '64.2',
  llhttp: '1.1.1',
  modules: '72',
  napi: '4',
  nghttp2: '1.38.0',
  node: '12.1.0',
  openssl: '1.1.1b',
  tz: '2019a',
  unicode: '12.1',
  uv: '1.28.0',
  v8: '7.4.288.21-node.16',
  zlib: '1.2.11'
}

バージョンのインクリメント以外に、Gitのコミット、タグ付けも行われているので確認してみます。

$ git log
commit 2a5fabccf2199ba09ac5f32f0b73df0bca5462be (HEAD -> dev, tag: v2.6.11)
Author: tokuda109 <example@gmail.com>
Date:   Tue Oct 22 09:32:58 2019 +0900

    2.6.11

... (省略)

コミット履歴があります。
コミットメッセージを指定する場合は以下のようにします。

$ npm version patch -m "Upgrade to %s for reasons"
v2.6.11

%s の部分にバージョンが展開されてコミットされます。

$ git log
commit 8762348dfa78e420314158c14530fd43241e7d29 (HEAD -> dev, tag: v2.6.11)
Author: tokuda109 <example@gmail.com>
Date:   Tue Oct 22 09:38:51 2019 +0900

    Upgrade to 2.6.11 for reasons

以下を実行してタグの一覧を確認してみます。

$ git tag
0.10.0-rc
0.11.0
... (省略)
v2.6.10
v2.6.11
... (省略)

タグ付けもされていることが確認できました。

次にメジャーバージョンを上げてみます。

$ npm version major
v3.0.0

再度バージョン情報を出力してみると:

$ npm version
{
  vue: '3.0.0',
  npm: '6.9.0',
  ares: '1.15.0',
  brotli: '1.0.7',
  cldr: '35.1',
  http_parser: '2.8.0',
  icu: '64.2',
  llhttp: '1.1.1',
  modules: '72',
  napi: '4',
  nghttp2: '1.38.0',
  node: '12.1.0',
  openssl: '1.1.1b',
  tz: '2019a',
  unicode: '12.1',
  uv: '1.28.0',
  v8: '7.4.288.21-node.16',
  zlib: '1.2.11'
}

期待どおりの動作をしていることが確認できました。

今回紹介した以外にも以下のバージョンナンバーを指定してインクリメントすることができます。

major (v2.6.10 -> v3.0.0)
minor (v2.6.10 -> v2.7.0)
patch (v2.6.10 -> v2.6.11)
premajor (v2.6.10 -> v3.0.0-0)
preminor (v2.6.10 -> v2.7.0-0)
prepatch (v2.6.10 -> v2.6.11-0)

npm version prerelease

npm version prerelease は premajor、preminor、prepatch によって付与されたプレリリースバージョンをインクリメントするためのサブコマンドです。

$ npm version prepatch
v2.6.11-0

次に以下のように実行してみます:

$ npm version prerelease
v2.6.11-1

参考

background-size を使って画像を適切な枠に収めるのは object-fit を使ったらとても簡単だった

Tsuyoshi Tokuda — Wed, 31 Jul 2019 00:08:56 +0000

CSS のプロパティに object-fit というのがあるのは知っていたけど便利だと思ったので調べてみた。

アイテムが複数カラムで一覧上にレイアウトされている場合、画像サイズの違いから段違いにならないようにするために画像が表示されている部分の枠のサイズを固定していることが多いと思う。
固定した枠に対して画像をアスペクト比を保ったまま、枠サイズに隙間が出ないようにしたり、隙間が出ても画像の切り捨て部分がないように伸縮させて表示させたりする。

background-size を使った方法

今までは以下のようなマークアップで表示させていた。img 要素で一般的に表示する方法だと、JavaScript で画像ダウンロードしたものを枠に対してサイズ調整をしてはめていかなければいけません。

<ul class="items">
  <li class="item">
    <a>
      <img
        class="item__img"
        src="<base64エンコードした1pxの透明なダミー画像>"
        style="background-image: url(<画像URL>);" />
    </a>
  </li>
</ul>

.item__img {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 200px;
  width: 200px;
}

このように、HTML では img 要素の src 属性にbase64エンコードした1pxの透明なダミー画像で表示させて、style 属性で background-image を指定する。次に CSS で background-size: contain; を指定することで、img 要素で指定した背景画像に対してサイズの伸縮をさせているので、手数としては多すぎる。

object-fit を使った方法

object-fit を使う場合は、もっと簡単になる。

<ul class="items">
  <li class="item">
    <a>
      <img
        class="item__img"
        src="<画像URL>" />
    </a>
  </li>
</ul>

.item__img {
  height: 200px;
  object-fit: contain;
  width: 200px;
}

img 要素の CSS のクラスで object-fit: contain; と宣言すればいい。
このような宣言を書くことで、img 要素の中身(この場合は画像)がどのように枠に対して伸縮されて表示されるかを指定することができる。

まとめ

すごく便利なプロパティだが、Internet Explorerは使えないので、採用する場合はターゲットブラウザを確認する必要がある。

また、今回用いたコードはGithubで公開している。

参照

object-fit