data-engineer's note

データエンジニアとしての色々な体験や知識をまとめる

jqの使い方

目的

jqでjsonを操作することが多いので、まとめておきます。

jqとは

unixjsonを扱うためのコマンドです。

jqの使い方

ここでは、jqの使い方についてまとめていきます。

インストール

brew install jq

使い方

これから例示するコマンドは、下記のコマンドからパイプラインに繋いでいる前提で進めていきます。

echo '{"items":[{"id":1,"name":"Aさん","price":2500},{"id":2,"price":4500}]}'

使い方一覧

# ただ単に整形するだけ
jq .

# それぞれの配列の特定の要素の列挙
jq '.items[].name' 

# ダブルクォート消す
jq -r '.items[].name' 

# パイプ
jq -r '.items[] | .name'

# アグリゲーション
jq '[.items[].price] | add'

# 再整形
jq '.items[] | { name: .name, yen: .price }'

# map
jq '.items | map({ name: .name, yen: .price })'

# reduce(アグリゲーション)
jq 'reduce .items[] as $item (0; . + $item.price)'

# unique(重複削除)
jq '[.items[].price] | unique'

まとめ

こんな感じで色々と使えるので、試してみましょう。

参考

パイプラインについて

目的

シェルスクリプトを書いている際に、パイプラインを使うことがよくあるのですが、まとめていなかったので、記録としてまとめておきます。

パイプラインとは

コマンドを連結させる機能です。具体的には、前の処理の出力結果を次のコマンドで利用するようにできる機能ということです。したがって、このコマンドを連結する機能を利用することによって、より複雑な処理が可能となります。

パイプラインの使い方

パイプラインは、| でコマンドをつなぐことでできます。イメージはこんな感じです。

<command1> | <command2> 

これで、command1からcommand2へとコマンドをつなげることができます。

実際の使い方はこんな感じです。

ls -l | grep "^d" | wc -l

これは、フォルダ内のディレクトリの数をカウントするコマンドです。

パイプラインでの便利なコマンド

ここでは、パイプラインでの便利なコマンドについてまとめておきます。

tee

処理を二つ同時に行いたい時に使うコマンドです。(ファイルへの書き出し+処理)

# フォーマット
<command1> | tee <file> | <command2>

# 例
ls -l | tee ls_log | wc -l

この例では、ls_log への書き出しとwc -lls -lの出力後同時に実行してくれます。

xargs

標準入力をコマンドの引数として変換してくれるコマンドです。どう言う時に便利かと言うと、command2が引数を必要とするコマンドの時です。たとえば、下記の例にあるようにrm を利用するときは引数を必要とするので、使える場面だと思います。

# フォーマット
<command1> | xargs <command2>

# 例
find . -name "*.log" | xargs rm -fv

参考

BrowserHistoryをリロードした際エラーが出た時のTips

目的

BrowserHistoryでのルーティング処理をしていたのですが、そこでコードの編集をする度にエラーになってしまうため、対処法を検討していました。stack overflowでその対処法が書いてあったので、書いておきます。

対処法

webpackのコンフィグファイルに以下の設定を追加するだけで、問題が解決されました。

devServer: {
   historyApiFallback: true,
   contentBase: './',
   hot: true
},

以下、それぞれのパラメータの説明です。

  • historyApiFallback: 404の代わりに、index.htmlへリダイレクトする設定
  • contentBase: コンテンツのあるディレクトリはどこかを指定
  • hot: ホットリロードするか否か

参考

react-reduxのhooksについて

目的

現在、開発でreact-reduxのconnect関数を利用し、reduxとの連携を行なっています。その一方で、functional componentを作成することが多いにもかかわらず、hooksを使えないのかと感じ始めました。そこで、ちょっと検索してみたら、react-reduxで提供してくれていることを知ったので、まとめておきます。

reduxで使えるhooks

reduxでは、色々と他にも使えるhookはあるのですが、ここではuseSelectorとuseDispatchの紹介をしておきます。

useSelector

このhookは、storeにアクセスするためのものです。これを利用することで、コンポーネント外で従来のようにmapStateToPropsを定義しなくて済み、コンポーネントが綺麗になります。

import React from 'react';
import {useSelector} from 'react-redux';

export const ExampleComponent = (props) => {
    // こんな感じでstoreにアクセスできる
    const element = useSelector((state) => state.element);

    return (
        <div>
            {element}
        </div>
    );
};

useDispatch

このhookは、コンポーネントにactionを紐づけるためのものです。これを利用することで、コンポーネント外で従来のようにmapDispatchToPropsを定義しなくて済み、コンポーネントが綺麗になります。

import React from 'react';
import {useSelector, useDispatch} from 'react-redux';
import {clickAction} from '../actions';

export const ExampleComponent = (props) => {
    const element = useSelector((state) => state.element);

    // dispatchの定義
    const dispatch = useDispatch();
    
    // こんな感じでactionを紐づける  
    const handleClick = (e) => {
        dispatch(clickAction());
    };

    return (
        <div onClick={handleClick}>
            {element}
        </div>
    );
};

まとめ

比較的Hooksを適用するのは例と同じ感じで難しくないと思うので、適用できる部分があれば、活用してみましょう。

参考

Github cliの使い方

目的

とある処理をする際に、githubcliを利用することがあったので、そのときの操作をまとめておくことで、次回もすぐに思い出せる状態にしておく。

github cli

インストール

brew install gh

認証設定

gh auth login

リポジトリの操作

Organizationに属するリポジトリのリスト取得

gh repo list {organization_name} --json name --limit 150

参考

WebpackとDotenvを使用した環境変数を利用するプロジェクトの構築

目的

フロントエンドのプロジェクト構築の際に、普段はcreate-react-appを利用しているため、環境変数の設定を元々やってくれていた。しかし、今回スクラッチで開発する必要が出てきたため、自分で環境変数のための設定を行う必要が出てきたので、構築方法についてまとめる。

Dotenv

jsで環境変数を扱うためにdotenvというパッケージが使われる。このパッケージを利用することで、以下の形で環境変数を利用することができる。

# .env
REACT_APP_EXAMPLE_VALUE=fdsalfjslafsdafj
// index.js
require('dotenv').config();

const value = process.env.REACT_APP_EXAMPLE_VALUE;

console.log(value);
//fdsalfjslafsdafj

しかし、webpackを利用すると、process is not undefined みたいな感じで怒られます。

そのため、webpackを利用する際は、dotenv-webpackというパッケージをインストールし、webpackのconfigファイルに追記する必要があります。

yarn add --dev dotenv-webpack
const Dotenv = require('dotenv-webpack');

module.exports = {
    // ...
  plugins: [
    new Dotenv(),
  ],
};

この設定ファイルで、下記のようにprocessで環境変数を呼んであげることができるようになります。

//index.js

const value = process.env.REACT_APP_EXAMPLE_VALUE;

console.log(value);
//fdsalfjslafsdafj

まとめ

こんな感じで、webpackを利用する際は、dotenvではなく、dotenv-webpackを利用するというのを覚えておきましょう。

参考

Jestの導入について:part1

目的

Jestを導入する際に、importがどうたらこうたらとエラーが起きてハマったため、Jestを利用したテスト方法についてまとめる。

Jestの設定

jestのインストール

yarn add --dev jest

jestの設定

下記のコマンドを実行することで、jest.config.jsを生成できます。

jest --init

babelの設定

es2015以降の記法でコーディングするためには、babelを利用する必要があります。ここでは、その設定方法を記述します。

パッケージのインストール

まず必要なbabelのパッケージをプロジェクトに追加します。

yarn add --dev babel-jest @babel/core @babel/preset-env @babel/preset-react

configの設定

その後、babel.config.js をプロジェクトのルートディレクトリに追加します。内容は、下記の通りです。(なんか自分がやっていたときは、.babelrcでできませんでした(謎))

module.exports = {
  presets: [
        [
            '@babel/preset-env',
            {
                targets: {
                    node: 'current',
                },
            },
        ],
    ],
};

テストの書き方

jestもインストールし、babelの設定もできたので、あとはテストを書いていくだけです。

import {add} from './add';

test('add test', () => {
    expect(add(1, 1)).toBe(2);
});

※jestに利用するtest 関数とかはインストールする必要は無いです。

これで下記コマンドを行えば、テストを実行することができるはずです。

npx jest

まとめ

ここでは、babelの適用も含めたjestの書き方をまとめました。これで、importとかで怒られる心配はなくなると思うので、あとはjestについて極めていきましょう!

参考