フロント技術集

フロント作るときに便利な技術を個人的にまとめてみる試みです

• コンポーネント作成に便利なやつ
• テスト系
• ビルドツール系

コンポーネント作成に便利なやつ

storybook

UIのカタログを作るツールです

こういう感じで、コンポーネント単品をプレビューできる

linaria

CSSクラスを変数に直セットできるイメージ

こういう機能と同等と思って良い

/** styleをクラス化する関数 */
const styleElement = document.createElement('style');
document.head.appendChild(styleElement);

/**
 * スタイルの表現文字列をクラスとして登録し、クラス名を生成する
 * @param {string} str スタイルを列挙した文字列
 * @returns {string} クラス名
 */
export const css = str => {
    const newClassNm = `css-${crypto.randomUUID()}`;
    const newClass = `.${newClassNm} {
        ${str}
    }`;
    styleElement.appendChild(document.createTextNode(newClass));
    return newClassNm;
};

こんなふうに使える、子要素への指定とかもできていい。

const Container = css(`
  font-size: 10px;
  color: red;
  border: 1px solid red;
  &:hover {
    border-color: blue;
  }
`);

tailwind

CSSを書くだけならこれが一番楽。でも読むのがだるすぎる。
あらかじめ作られまくったCSSのセットのクラスが大量に用意されてるイメージ

こんなふうに書けば、flexでitemをcenterにしたpadding7の...となる

<div class="flex flex-col items-center p-7 rounded-2xl">
</div>

クラス名はこのチートシートを見て書く

FigmaとかであらかじめUI設計が終わった場合など、クラスやCSSの修正がほぼいらないのであればとても有用。Figma上でTailwindとして作ってしまえばUI作成が終わる。

テスト系

Jest

JSのテストツール

モックが使えるしカバレッジが動的に見える
ロジック部のUTはこれが良い

storybook

UIコンポーネントのテストは相変わらずstorybookが使える

画面全体としての、複数コンポーネントの結合みたいな試験観点は
Seleniumとかになるんだろうけど、最近のテストツールにあまり詳しくないので省略

ビルドツール系

Volta

nodejsのバージョンを自動で判断してくれる
package.jsonに書いた値で判断できるので、複数プロジェクトをコロコロ移動して起動するならめちゃくちゃ便利

nvm

nvm lsやnvm use 16でバージョンを切り替えられる

自動切り替えではないが、手動で任意のバージョンを入れたり切り替えたりすぐできるのでとても良い
nvm自体が完結でミニマムなのもとても良い

vite

もうとりあえずこれでよい

旧式のビルド

• Babel: JSを変換するツール。TypeScriptをJSにトランスパイルしたり
• webpack: 複数JSファイルを1ファイルにバンドルするツール

これらを用いて

DEV_FILE="./dev/App.tsx"
OUTPUT_FILE="index.min.js"
TEMP_DIR="./temp_build"

rm -rf $TEMP_DIR && mkdir $TEMP_DIR
# Babelをいれて、App.tsxをindex.jsに変換してみる
npm install --save-dev @babel/cli @babel/core @babel/preset-react @babel/preset-typescript webpack webpack-cli
npx babel $DEV_FILE --out-file $TEMP_DIR/index.js --presets=@babel/preset-react,@babel/preset-typescript

# React+TSをうまいこと変換できない部分は、jscodeshiftを使う
# 実質、文字列のただの置換。
# 変換ルールを指定
JSCODESHIFT_SCRIPT="$TEMP_DIR/replace-imports.js"
    cat << 'EOL' > $JSCODESHIFT_SCRIPT
module.exports = function(fileInfo, api) {
    const j = api.jscodeshift;
    const root = j(fileInfo.source);
    root.find(j.ImportDeclaration).forEach(path => {
        const source = path.node.source.value;
        // Skypackはv17まで、古いのでesm.sh
        // CDN からの import をローカルに変更
        if (source.startsWith("https://esm.sh/react-dom/client")) {
            path.node.source.value = "react-dom/client";
        } else if (source.startsWith("https://esm.sh/react")) {
            path.node.source.value = "react";
        }
    });
    return root.toSource();
};
EOL

# 追加の変換実行！
npx -y jscodeshift -t $JSCODESHIFT_SCRIPT $TEMP_DIR/index.js

# Reactを入れておき
npm install react react-dom
# webpackの設定をいったんつくる
WEBPACK_CONFIG="$TEMP_DIR/webpack.config.js"
cat << EOL > $WEBPACK_CONFIG
const path = require('path');
module.exports = {
  entry: path.resolve(__dirname, './index.js'),
  output: {
    path: path.resolve(__dirname, '../'),
    filename: '${OUTPUT_FILE}'
  },
  mode: 'production'
};
EOL

# で、webpackを実行しバンドルする
npx webpack --config $WEBPACK_CONFIG
# webpack時点でミニファイされているのでterserは基本不要
#npx -y terser index.js -o index.min.js

# 中間ファイルはいらんので消す
rm -rf node_modules $TEMP_DIR package-lock.json package.json index.min.js.LICENSE.txt