戦えプログラマン

いつだって戦いなのだ

Gitで最新のmasterに対してタグを付ける

概要

特定のコミットではなく、今現在最新のmasterに対してタグを付けたい

command

git tag -a release_X -m "Release X" $(git rev-parse origin/master)
git push origin --tags

補足

git rev-parse ${ブランチ名} で、そのブランチの最新のコミット番号が得られる

git rev-parse origin/master

create-react-app + TypeScript + styled-components で、css class 名に styled-components の変数名を出力する

ようやく css 戦国時代も終わりを迎え、 styled-components の勝利ということで皆の衆異論はないかと思う(ポジトーク
少なくとも、 BEMM とか FLOCSS とか、あの手の温もりと涙ぐましい努力・根性を身につけるぐらいなら、
styled-components の設計について知見を深めるべきかと思う。

で、その styled-components をより使いやすくするための記事である。

概要

  • styled-components を使って css を書くと、css class名は乱数で出力される
  • 「この css どこに実装されてるんだっけ?」というデバッグがつらい
  • styled-components を宣言した時の変数名も併せて出力してほしい

イメージ

f:id:arx0balest:20180922111653p:plain

そんな時に

前提

  • npx create-react-app ${PJ_NAME} --scripts-version=react-scripts-ts でReact開発環境を作った
  • styled-components はインストール済み
  • create-react-app の eject はしない。絶対にだ。

やり方

install

  • typescript-plugin-styled-components を使う
  • Webpack の設定変更が必要になるため、 react-app-rewired も使う
  • create-react-app の eject はしない。絶対にだ。(大切なことなので二ry)
npm i -D react-app-rewired typescript-plugin-styled-components
touch config-overrides.js

設定

config-overrides.js

config-overrides.js

module.exports = {
  /**
   * The Webpack config to use when compiling your react app for development or production.
   */
  webpack: function (config, env) {
    const isDev = env === "development"

    if (isDev) {
      // ローカル開発環境のみ、styled-componentsの変数名をDOMに吐き出す
      const loaders = config.module.rules[1].oneOf
      const tsLoader = loaders.find((loader) => (
        String(loader.test) === String(/\.(ts|tsx)$/)
      ))
      const tsLoaderInner = tsLoader.use.find((loader) => (
        String(loader.loader).includes("ts-loader")
      ))

      // @see https://github.com/Igorbek/typescript-plugin-styled-components#ts-loader
      const createStyledComponentsTransformer = require("typescript-plugin-styled-components").default
      tsLoaderInner.options.getCustomTransformers = () => ({
        before: [createStyledComponentsTransformer()]
      })
    }

    return config
  }
}

npm scripts

確認

npm start

おわかりいただけただろうか・・・
f:id:arx0balest:20180922111814p:plain

ちなみに、該当箇所のコンポーネントのコードは下記の通り
CRAのサンプルコードの App.css を、 styled-components 化したものである

src\App.tsx

import * as React from "react"
import styled from "styled-components"
import logo from "./logo.svg"

export const App = () => (
  <Root>
    <Header>
      <Logo src={logo} alt="logo" />
      <Title>Welcome to React</Title>
    </Header>
    <Intro>
      To get started, edit <code>src/App.tsx</code> and save to reload.
    </Intro>
  </Root>
)

const Root = styled.div`
  text-align: center;
`

const Header = styled.header`
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
`

const Logo = styled.img`
  animation: App-logo-spin infinite 20s linear;
  height: 80px;

  @keyframes App-logo-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
`

const Title = styled.h1`
  font-size: 1.5em;
`

const Intro = styled.p`
  font-size: large;
`

src

実際はさらにわかりやすくするため、ファイル名も表示するよう設定している。

余談

このプラグインでいいのか?

本家の babel-plugin-styled-components に比べ typescript-plugin-styled-components はシェアが少ない。
もっとメジャーなのがあるのだろうか?

create-react-app の eject はしない。絶対にだ。

CRA の eject を安直に勧めてくる人もいるが、個人的にはオススメしない。
(よほどシビアなパフォーマンスチューニングなどを求められない限り)

数年前ならいざしらず、今は react-app-rewired を使えば大抵の設定変更は可能である。
例えば typescript-plugin-styled-componentsのようなプラグインの追加のためだけに eject し、
大量の設定ファイルの管理・バージョンアップのマイグレーション etc. を自分でやるのは
どう考えてもコスパが悪いだろう。

Git Bash が node_modules を見つけられない問題

前提

  • node は coreybutler/nvm-windows でインストールした
  • npm install -g npx 済である
  • Git Bashnpx -v してみるとエラーが出る
  • Win標準のコマンドプロンプトではエラーが出ない

もちろんWin標準のコマンドプロンプトは使いたくないものとする。

発生したエラー

$ node -v
v10.7.0

$ npx -v
internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'C:\Program Files\Git\node_modules\npx\index.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:266:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:596:3)

対処

ないと言われている C:\Program Files\Git\node_modulesシンボリックリンクを張ってやる

  1. 管理者権限でコマンドプロンプトを起動する
  2. node のインストール場所を確認
  3. mklink
C:\Windows\system32>where node
X:\dev\nvm-suites\nodejs\node.exe

C:\Windows\system32>cd C:\Program Files\Git

C:\Program Files\Git>mklink /D node_modules X:\dev\nvm-suites\nodejs\node_modules
node_modules <<===>> X:\dev\nvm-suites\nodejs\node_modules のシンボリック リンクが作成されました

確認

$ npx -v
10.2.0

参考記事

https://github.com/yeoman/generator-webapp/issues/530#issuecomment-245902756

根本解決になってなくやや気持ち悪い。
なぜ C:\Program Files\Git\node_modules を最初に探しにいってしまうのか不明だが、
nvm でバージョン変えても動作しそうだし(シンボリックリンク先もnvmが作るシンボリックリンクなので)
まぁ動けば不満ないし、
これでいいやという気持ち。

dotenv で UnicodeDecodeError: 'cp932' codec can't decode byte 0x83 in position 13: illegal multibyte sequence

概要

テスト実行したら、dotenvがユニコード周りでエラーを吐く
つい先日まで動いてたはずなんだけど・・・

状況

Pipfile (抜粋)

[scripts]
test = "python -m unittest discover --locals -v -s ./test"

Git Bash

$ pipenv run test
Loading .env environment variables...
Traceback (most recent call last):
  File "c:\python3.6.5\lib\runpy.py", line 193, in _run_module_as_main
    "__main__", mod_spec)
  File "c:\python3.6.5\lib\runpy.py", line 85, in _run_code
    exec(code, run_globals)
  File "C:\Python3.6.5\Scripts\pipenv.exe\__main__.py", line 9, in <module>
  File "c:\python3.6.5\lib\site-packages\pipenv\vendor\click\core.py", line 722, in __call__
    return self.main(*args, **kwargs)
  File "c:\python3.6.5\lib\site-packages\pipenv\vendor\click\core.py", line 697, in main
    rv = self.invoke(ctx)
  File "c:\python3.6.5\lib\site-packages\pipenv\vendor\click\core.py", line 1066, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
  File "c:\python3.6.5\lib\site-packages\pipenv\vendor\click\core.py", line 895, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "c:\python3.6.5\lib\site-packages\pipenv\vendor\click\core.py", line 535, in invoke
    return callback(*args, **kwargs)
  File "c:\python3.6.5\lib\site-packages\pipenv\cli.py", line 701, in run
    do_run(command=command, args=args, three=three, python=python, pypi_mirror=pypi_mirror)
  File "c:\python3.6.5\lib\site-packages\pipenv\core.py", line 2245, in do_run
    load_dot_env()
  File "c:\python3.6.5\lib\site-packages\pipenv\core.py", line 145, in load_dot_env
    dotenv.load_dotenv(denv, override=True)
  File "c:\python3.6.5\lib\site-packages\pipenv\vendor\dotenv\main.py", line 257, in load_dotenv
    return DotEnv(f, verbose=verbose).set_as_environment_variables(override=override)
  File "c:\python3.6.5\lib\site-packages\pipenv\vendor\dotenv\main.py", line 94, in set_as_environment_variables
    for k, v in self.dict().items():
  File "c:\python3.6.5\lib\site-packages\pipenv\vendor\dotenv\main.py", line 73, in dict
    values = OrderedDict(self.parse())
  File "c:\python3.6.5\lib\site-packages\pipenv\vendor\dotenv\main.py", line 80, in parse
    for line in f:
UnicodeDecodeError: 'cp932' codec can't decode byte 0x83 in position 13: illegal multibyte sequence

原因

「.env」ファイル内に日本語を書き込んでいたことが原因だった。
各変数に丁寧にコメント書き足したら、それをdotenvが読み込めなくなってしまった、的な。

対処

「.env」ファイルから日本語行を削除。
コメントを書くなら、下記どっちかにする。

  • 「.env.example」ファイルのみにコメントを書く
  • dotenvファイルのコメントは全て英語で書く

Visual Studio Code の syntax highlight を操る

経緯

VSCodeの標準のThemeカラーのみでは物足りないことがあるかと思う

例えば、標準のDark+
とても好きなのだが、FunctionとVariableの色分けがないことが惜しい
そんな時に

settings.jsonに設定値を書き足す

"editor.tokenColorCustomizations": {
    "[Default Dark+]": {
        "textMateRules": [
            {
                "name": "Function, Special Method, Block Level, GitGutter changed",
                "scope": "entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level, markup.changed.git_gutter",
                "settings": {
                    "fontStyle": "",
                    "foreground": "#CE6700"
                }
            },
        ]
    }
},

Tips

ここにテーマのデフォルト設定値が入ってるため、これを参考にキー名を探すとよい

C:\Users\${ユーザ名}\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\theme-defaults\themes

感想

自分でテーマ弄り始めると泥沼 & 他の環境でコードを書けない禁断症状に陥るので、用法用量を守っての使用を心掛けたい

JavaScriptの変数の型の調べ方

console.log(variable.constructor)

ChromeデベロッパーツールのConsoleで試してみる。

const hoge = $("div")
console.log(hoge.constructor)
// ƒ HTMLDivElement() { [native code] }

HTMLDivElement型だそうです。

いつ使う

  • JSDocやTypeScriptやFlowtypeに型を書きたい。
  • ライブラリからやってくる、よくわからん変数を調べたい。

そんなときに使う。

IDEA で Create New Project で sbt したら、srcディレクトリがない

しばらくサボってた忙しくて、久々にIDEA触ってみたら、なんかヘン。
f:id:arx0balest:20160815235153p:plain:w600

scala idea」でググって出てくる手順通りにIDEAでScalaプロジェクトを作ると、
なぜかsrcディレクトリが生成されない。

why?

1. SBT launcherの設定を確認。

  1. なんかヘンなプロジェクトを Close Project
  2. SBT launcher を正しく設定してやる。
    f:id:arx0balest:20160816000612p:plain:w600

2. Create New Project時の設定を確認。

  1. いつもの(Create New Project -> Scala -> SBT -> Next)
  2. なんか自動で作ってくれる感ある項目にチェック。
    f:id:arx0balest:20160816001109p:plain:w600
  3. Finish

3. 待つ!!!

特に初めてScalaプロジェクトを作成した時は、準備・生成が完了するまで時間が掛かる。
IDEAのステータスバーが空になるまで待つ。とにかく待つ。

qiita.com

うんまあとにかく待つんだ。
あわてちゃいけない。

で。

無事でけたもよう。
f:id:arx0balest:20160816002513p:plain:w600

∩( ・ω・)∩ ばんじゃーい