86日目 個人開発記14 -フロント環境構築完了-

こんばんは。

今日は昨日の続きでフロントテストの環境構築をやっており、なんとか

$ npm run test

コマンドでテストが走る状態にまで持っていくことができました。

Reactのコンポーネントに対するテストで、jsxを含むファイルのテストをする場合は、babel.config.jsなどbabelの設定ファイルに追加の設定が必要です。

僕はbabel設定ファイルが存在しなかったので、新たに作りました。

module.exports = {
　presets: [
　　[
　　　"@babel/preset-react",
　　　{
　　　　modules: "false",
　　　　useBuiltIns: "usage",
　　　　targets: "> 0.25%, not dead",
　　　},
　　],
　],
　env: {
　test: {
　　presets: [["@babel/preset-env", { targets: { node: "current" } }]],
　},
　},
};

「とりあえずテストできる環境を作る」だけでもトータル4時間くらい格闘してた気がする。。

フロントの環境構築はほんと何度やっても骨が折れるわ。こういった面倒をなくすためにReactなら『create-react-app』が存在するんだろうな。ただ今回はLaravelのプロジェクトに組み込んじゃったのでアレですが、フロントとサ-バーを完全に分離することができればこういった悩みもなくなるのか。

SPAにチャレンジしたことで、これまで気にしなくてもフレームワークがよしなにやってくれていた部分を自分で書き換える場面が増えて、相当理解が深まっています。大変ですが、間違いなく成長している。

ただ、業務外でのキャッチアップだと1日数時間が限界。やっぱり業務でフレームワークを触れる状況を作り出さないといけないな。

おわり。