✨

Remix SPA Modeでyamlから履歴書を生成するWebアプリ作った

2024/08/11に公開

React

こんにちは、今回はRemix SPA Modeを使って、yamlから履歴書を生成するWebアプリを作ってみたので紹介していきます。

作ったもの

URL

https://resume-generator-a21.pages.dev/

ソースコード

動作イメージ

ざっくりした説明

Remix SPAモード使った

今回アプリを作った目的はReactでサクッとSPAを作るときのフレームワークとしてRemixってどうなの？を体感しておくためです。

yamlで情報管理

jsonでもyamlでも良かったのですが、yamlにしました。
（結構yamlで作ってみるのを試している人もいるみたいですね）

name:
  furigana: やまだたろう
  kanji: 山田太郎
birthdate: 2000/01/01
sex: 男
address1:
  furigana: 〇〇けん〇〇し〇〇1-1-1
  postalCode: 123-4567
  kanji: 〇〇県〇〇市〇〇1-1-1
phone1: "090xxxxxxxx"
email1: aaaa@xxxx.com
address2:
  furigana: ✕✕けん✕✕し✕✕1-1-1
  postalCode: 234-5678
  kanji: ✕✕県✕✕市✕✕1-1-1
phone2: "080xxxxxxxx"
email2: bbbb@xxxx.com
educationWork:
  - name: 〇〇大学 理学部 物理学科 入学
    date: 2016/04
  - name: 〇〇大学大学院 理学研究科 物理学専攻 修了
    date: 2018/03
  - name: 株式会社〇〇〇〇 入社
    date: 2018/04
licenses:
  - name: 普通自動二輪免許 取得
    date: 2024/04
motivation: |-
  私は常に新しい知識とスキルを習得することに情熱を持っています。
  この職務に応募する理由は、自己成長を促進し、プロフェッショナルとしての能力を向上させる機会を得るためです。
  私は新しい技術やベストプラクティスに常に興味を持ち、積極的に学び続ける姿勢を持っています。この職務に就くことで、自己成長の機会を得るだけでなく、チーム全体の成果に貢献することができると確信しています。
  以下のサイトを作りました。
  https://example.com
requests:
commuteAndDependent:
  commuteTime: 約1時間30分
  numofDependentFamily: 4
  hasSpouse: 無
  hasSpousalSupport: 無

履歴書はcssで組む

cssをmmで指定できることを知ったので、A4のサイズで指定して履歴書ページを作りました。
枠線とか結構面倒でした。

@media print, @pageを初めて知った

cssで、印刷するときの設定を指定する方法を初めて知りました

@media print {
  @page {
    size: A4 landscape;
    margin: 0;
  }
}

`wrangler`でのデプロイ

Remixは関係ないですが、wranglerのデプロイが快適です。以下だけでデプロイが終わります。

yarn add --dev wrangler
npx wrangler pages project create hogehoge
yarn build && npx wrangler pages deploy build/client

感想・疑問

`yarn dev`でホットリロード時にがなにかおかしい？

ホットリロードすると、

CSSが効かなくなる
useContextのグローバル状態管理がうまく動かない

リバプロで動かす

カスタムドメインのサブディレクトリで動くようにしたかったのですが、うまく行ってないです。
以下のページを参考にfunctions/__middleware.jsを追加したのですが、エラーが出てうまく行ってないです。

/assets/を/resume-generator/assets/に変える必要があるっぽく？、
Remix SPAのbaseを以下のように変更したのですが、効いてないような？？
それっぽいissueも上がっているような？って感じですが、まだわからないです。

「SPAをサクッと作って、カスタムドメインのサブディレクトリに置く」みたいなことをやっていきたいなと思ってるので、解決したいと考えています。

最後に

SPAをサクッと作るときのReactのフレームワークとして、今回はRemix SPAモードを使ってみました。
Next.jsよりはシンプルで、honoよりは色々揃ってそう？と思ってましたが、作ったあとの感想としても、そんな感じがしています。
流行り廃りが激しいので、新しいReactのフレームワークが出たら、定期的に触っておきたいと思いました。