LazyBlogを更新した

2022/01/03

LazyBlogを更新した

現時点で行った修正

記事取得をAPI化

/api/pageにパラメタをいれてやると絞り込みだったり、ソートできるようにした。

トップページを読み込む際にサーバサイドでの処理がほぼ消えた(非同期処理は除く)ので

Controllers/PageControllerはほとんど消した。

しかし、それ以上にApi/PageControllerがめちゃくちゃ太った。

あと前より細かい検索ができるようになった分、検索処理が重くなった。

トップページのVue.js化

上記APIから非同期で記事データを取得。

とりあえず思うがままに書いてみようとしたら、いくつかの箇所で状態を共有したほうがいいかな？ってところがあったので、

Vuexを採用した。思ったよりもきつくなかった。ReactとReduxの組み合わせよりよっぽど楽(規模も規模だしね)。

記事更新機能を追加

実装自体は楽だったんだけど、テスト書いてるときのテーブルの結合処理で

テーブル名クッソ間違えてイライラしてた。

JSテストのための環境の構築をしたり、テストを書いた

ほんの少ししかかけてないけど、

ここが一番の難所だったかもしれない。

テスト自体というよりは、babelやらnode周りがきつかった。

どのパッケージをいれればいいんだ問題

当然全然わからんので、ぐぐったものを真似しようとしても、動かない。

最初の一行(import)でエラー吐いた。トランスパイルの問題かなって思ったので、ググっていくと

babel-jestを入れ炉みたいなこと書いてあったので、それをいれてみるが、ダメッ…!

紆余曲折を経て、ようやく動くようになった。

説明はめんどいのでソースから抜粋する。

package.json




~

"jest": {

    "moduleFileExtensions": [

        "js",

        "json",

        "vue"

    ],

    "transform": {

        "^.+\\.vue$": "<rootDir>/node_modules/vue-jest",

        "^.+\\.js$": "<rootDir>/node_modules/babel-jest"

    },

    "testRegex": "resources/js/test/.*.js$"

},

~

.babelrc




{

  "presets": [["env", { "modules": false }]],

  "env": {

    "test": {

      "presets": [["env", { "targets": { "node": "current" } }]]

    }

  },

  "plugins": [

    ["transform-object-rest-spread"]

  ]

}

このソースを元に以下より私がうっざ！と思ったところだけを記載していく。

スプレッド構文のエラー



{

	...hoge

}

みたいな構文はもはや当たり前に使うわけだが、なんかbabel-preset-es2015をいれた程度じゃ

使えないみたいだ。いや、es2016以降のどっかにはあるかもしらんが。

この構文を有効にする方法の一つには、




~

"plugins": [

  ["transform-object-rest-spread"]

]

~

を.babelrcに追加する方法がある。

これは

reactjs - IE / EdgeのBabel 7スプレッド構文が機能しない - ITツールウェブ

ここを参考にした。

fetchが見つからない

これもbabelの場合に発生した。正直JS全然わからんってなってる。

これに対する私の対処法は、すごい力技なんだけど、

まず、node-fetchをインストールして、

テストコードの一番上で




global.fetch = require('node-fetch');

をするだけ。

まあ、こんなのがいやならaxios使ったほうがいいと思う。日本では圧倒的に人気っぽいからね。

こんな感じで適当にぱぱっとやったら動いた。Vuexのテストは知らん。まだ書いてない。

これから行う予定の修正

>> Home