at backyard

Color my life with the chaos of trouble.

webpack.DefinePlugin使うときはJSON.stringifyを意識しようと改めて痛感した話

ついつい、うっかりしていて、途中までなんでー?となっていたのでメモ。

webpack.DefinePlugin 使うとき、JSON.stringifyを使うことを意識したほうが良い。
いま全く頭が回っていないので、細かく説明はしない。公式ドキュメントを見るのが手っ取り早いかもしれない。 (ついさっきまでハマっていて、もう疲れ切っているのだ。甘いルートビアを飲んで、いま頭の披露を急速に癒やしているところだ)

webpack.js.org

例えば、下記のように記述して、フロントエンド側でこのTEST_IDを読みたいとする

    new webpack.DefinePlugin({
        TEST_ID: '+123'
    }),

で、実際に画面で読み込むと 123 という値になっており、先頭の + が消えてしまう
このような問題の対応策として JSON.stringifyを使う

    new webpack.DefinePlugin({
        TEST_ID: JSON.stringify('+123'),
    }),

これで、画面側でも +123 として扱える。

webpack.DefinePlugin 使うときは常に意識しとかないといけないことのような気がしていたが、さっきまで頭の先っぽからこのことを忘れ去ってしまっていた。。。
こういうちょっとしたミスが原因不明のバグの元を作り出すので、気をつけなくちゃいけないなと改めて痛感した次第。

macで(リンゴマーク)を打つためのショートカット

コード書いていたときに偶然発見したのでメモしとく。
macOSを操作中に Shift + option + k を押すと が打てる

普通にググると、このことが書かれた記事はたくさん出てくるので、普通に皆知っているショートカットコマンドなのだろうけど、私は知りませんでした。

でもAppleのショートカットに関するドキュメントを見に行ってみるとこの記述は載っていなかった。
(ちょっとした隠しコマンド的な扱いなのだろうか?)

support.apple.com

TestCafeというNode.js製のテストツールを試してみる

まえがき

たまたま下記のようなTwitterポストを見つけました

TestCafeというテストツールを自分は知らなかったので調べてみました。

github.com

Node.js製のE2Eテストができるツールのようです。

Windows, mac, Linuxで動作し、
デスクトップ、モバイル、リモート、クラウドブラウザ(ヘッドレスやUI)をサポートしているよう。
(ここ原文をそのまま訳していますが、UIって何を指しているんだろう)

試しにtestcafe テストツール などで検索してみると結構日本語の情報もあるようだったので、導入は簡単そう。
npm(yarn)でインストールすれば使えるというのも導入の敷居が低くて良さそうですね。

以下、試してみた系の備忘録

TestCafeのインストール

まずはインストール。普段yarn使っているので、下記のようにしてインストールします
(READMEにはglobalインストールするコマンドが記述されていましたが、今回はプロジェクト単位で区切ろうと思います)

yarn add testcafe

# 実際にプロジェクトで使うときは下記かな?
# yarn add -D testcafe

サンプルコードを書いてみる

READMEに書かれているものを写経する

import { Selector } from 'testcafe'; // first import testcafe selectors

fixture`Getting Started`.page`https://devexpress.github.io/testcafe/example`; // declare the fixture // specify the start page

//then create a test and place your code there
test('My first test', async t => {
  await t
    .typeText('#developer-name', 'John Smith')
    .click('#submit-button')

    // Use the assertion to check if the actual header text is equal to the expected one
    .expect(Selector('#article-header').innerText)
    .eql('Thank you, John Smith!');
});

実行は下記コマンドで

yarn testcafe chrome test.js

すると、下記のようなダイアログが出てくるのでOKを押します。

f:id:shinshin86:20191019203718p:plain

すると、テストが実行されます。

導入自体は簡単そうですね。

fixtureという文法 => TODO

サンプルコードを書いていて感じたのが、fixtureという構文です。
testcafeから少し話はそれてしまいますが、testcafeでも使われているこういう文法ってどうやって定義しているんでしょうかね?

fixture`Getting Started`.page`https://devexpress.github.io/testcafe/example`;

jestを使うときにdescribeが使えるようになる、あの仕組みと同じなのかなと思っていますが、そういえばそこらへんの仕組みって自分はちゃんと理解できているわけではないことに今更ながら気づきました。。。

ここについては別に時間をとって、ちゃんと整理したいなと思います。

ひとまずお風呂が湧いたので、今日はこれにて。
最近関東エリアは急に寒くなっている気がするので、皆様風邪など引かれぬようにお気をつけください。

青葉市子の雨という曲が良い、そしてApex Legendsの期間限定イベント"シャドウフォール"が最高に楽しい

先日、我が家のGoogle Home(Nest Miniが発表されましたね)がブライアンイーノの1/1アンビエントアルバムの次に流した曲が、青葉市子の雨という曲だった

https://music.youtube.com/watch?v=ya57waO2cPg&feature=share

雨降る軒先でぼんやり聞こえる、遠い誰かの歌といった趣でとても癒される感じだった。
日々に疲れた時に沁みる曲、といった感じ。良い。

最近は雨が多い。そして一気に秋が深くなった。
夏場、暑さから逃れるようにランニングから離れていた私は最近それを再開し、週末に10キロ走る習慣を体内に戻しつつある。

蝉の声は遠い過去のものとなったが、あの忌々しいセミの記憶は夏の間に曲として残すことができた(私はセミが嫌いだ)。
たぶんどこかのタイミングでさり気なくその曲は公開される予定です。特に明言する予定はないけど、どこかで自分の記憶が反映された曲が公開されて、誰かに聴かれる可能性をそれが持っているというのは、なかなか悪くないものです。

Apex Legendsの期間限定イベント"シャドウフォール"が最高に楽しい

話は変わり、Apex Legendsの期間限定イベンド。楽しいです。。。!

game.watch.impress.co.jp

そしてついにトレーニングモードが。。。!

Apex Legendsといえば、どうやらトレーニングモードも近々アップデートされる模様。

automaton-media.com

上記記事内でトレーニングモードについて書かれている部分を引用させていただく

一方、改装されたトレーニングモードでは、レジェンドの選択が可能となるようだ。全てのレジェンドから自由に選択し、戦術アビリティやアルティメットなど、各能力を試すことができる。そしてキャラクターの切り替えは、トレーニング中いつでもおこなえるようだ。また、全ての装備がドロップするように。動画では、アタッチメント含むあらゆる武器・装備が取り揃えられている様子を確認できる。さらに人型のボットが登場。ボットは攻撃こそしてこないが、シールドを張っており、射撃部位によってライフの減り方にも変化が。現在のトレーニングモードと比べて、かなり実戦に近い形でトレーニングをおこなうことができそうだ。なお改装にあわせて、トレーニングモードの名称は「射撃演習場」に変更されるとのこと。また、具体的な実装時期については現時点で明かされていない。

これは、楽しみすぎる...!!

macのTime Machineのバックアップが遅いときに見逃しているかもしれない1つのこと

よくありそうなタイトルを付けてしまった。
macのTime Machineでバックアップをするときに、いつも以上にバックアップの時間がかかる。。。ググってみてるとバックアップに時間がかかる理由を並べたサイトがたくさんヒットするが、どれも該当しない。。。と思い、原因を調査していたら、一つ新たに遅くなる理由が見つかったので書いていく。

前回のバックアップから、大量にファイルの移動を行っているとmacのTime Machineバックアップ量が膨大に増える&異様に遅くなる

macのTime Machineバックアップを開始したときに何故かファイルの差分が54BGもあり、しかもバックアップのスピードがとても遅かった。
54GBもファイルを追加した記憶はないし、なぜ急にこんな膨大な差分が発生したのか一瞬わからなかった。

原因を調べてみると、デスクトップにばらまかれたままになっていた大量のファイル群をディレクトリに移動していただけだった。
どうやらmacのTime Machineはファイルを別の場所に移動すると、その分のファイルについては別のファイルとして認識してしまうのかもしれない(ここらへんは妄想です)
ためしに移したディレクトリの中に格納したファイル群を再びデスクトップに戻したところ、バックアップは普段と殆ど変わらない時間が終了した。

結論:ファイルの整理はこまめにしよう

next.jsにreact-notificationsを導入しようとしてハマったのでメモ

next.jsでreact-notifications用のcssファイルを読み込もうとしたら、Module parse failed: Unexpected character '@' (1:0) というエラーが出た

next.jsで書いたアプリに先日書いたreact-notificationsを導入しようとしたら、コンパイル時に下記のようなエラーが出た。
(導入手順は下記に書いているのとほぼほぼ同じなので割愛します)

shinshin86.hateblo.jp

下記がコンパイル時に出てきたエラー

./node_modules/react-notifications/lib/notifications.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @charset "UTF-8";
| @font-face {
|   font-family: 'Notification';

調べてみたところ、下記の内容通りに実行したら解決できた

github.com

まずは下記のライブラリをインストール

yarn add --dev @zeit/next-css file-loader url-loader

次にルートに next.config.js を作成し(まだ作成していなければ)、下記の記述を追加

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    return config
  }
})

これで無事に解決しました。

あまり原因とかはちゃんと追えていないし、next.js 自体まだ理解途中なので、ここらへんはのちほど取り組む予定。

昨日の台風

昨日の台風は大変でしたが、我が家はなんとか無事に乗り切れました。

ニュースを追っていると、被害が出ているところもたくさんあるようです。今年は台風が猛威をふるっていますね。。
アメリカの友達が台風のたびに連絡をくれて、最近の日本の天気はクレイジーだなと言っていましたが、まったくもって私もそう感じています。
穏やかな気候の毎日が恋しい今日このごろ。

macを使っていて、接続しているネットワーク内での、自分のPCのIPアドレスを知りたい時に打つコマンド

いつも必要になったときに忘れているので、メモすることにしました。

macで自分のIPアドレスを知りたい時に打つコマンド

ifconfig |grep inet

もしくは下記のほうが分かりやすいかも

ifconfig |grep netmask

台風19号、今ものすごい雨になっています。これから風も強くなることが予想されますが、被害なく過ぎ去ってくれることを願うばかりです。