Typstで履歴書を書く

# はじめに
私は絶賛インターン探し中の来年院1生になるフロントエンドエンジニアです！
普段は[学食モバイルオーダー](https://qiita.com/charokoukuu/items/8803f945fb4c9f915fb8)の開発、運営保守してます。
ついこないだまで $\LaTeX$ で卒論をヒイヒイ言いながら書いてましたが、30ページを超えたあたりからM2 Mac Bookでもコンパイルに15秒ぐらいかかってしまっていました。
もっとMarkdownみたいに高速でTypeScriptみたいに型とかドキュメントが整ってるのないのかなと探していましたが、ありました！その名も[Typst](https://typst.app/)！
今回は私が練習ついでにTypstで履歴書のテンプレートを作ってみたのでその共有と、Typstの普及をするためにこの記事を書きます！

# Typstとは？
https://typst.app/


公式サイトから引用
> Typst is a new markup-based typesetting system for the sciences. It is designed to be an alternative both to advanced tools like LaTeX and simpler tools like Word and Google Docs. 

google 翻訳
> Typst は、科学向けの新しいマークアップベースの植字システムです。LaTeX などの高度なツールと、Word や Google ドキュメントなどの単純なツールの両方の代替となるように設計されています。

# Typstのいいところ
## 強力な補完
$\LaTeX$やWord,Google Docmentの代替とはなかなか強気ですが、嘘ではありません。
$\LaTeX$のような記法を残しつつMarkdownのようなシンプルさもあります。しかも、`gt.eq.not`のような`.`で繋いでいく記法によりTypeScriptのようなエディター側で効率的なサジェストを可能にしています。

![スクリーンショット 2024-02-24 15.05.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1698242/a2271a7b-8b5c-c7b4-289c-a133a261ce27.png)

![スクリーンショット 2024-02-24 15.23.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1698242/39c6cec3-61c9-6f87-e21e-eb60e179c075.png)

これが私の本当に求めていたものです。もう$\LaTeX$のbegin記法には戻れないかも...

## スタイリングのしやすさ
さらに、Typstの素晴らしいところはCSSのようにスタイリングできる点です。
例えば文字を縦2cm,横3cmのボックスの中でセンタリングするにはこのように書きます。

```box.typ
#box(
  stroke: black,
  width: 3cm,
  height: 2cm,
  [
    #align(
      center + horizon,
      [文字]
    )
  ]
)
```

![スクリーンショット 2024-02-24 15.39.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1698242/b45374dd-aad8-bcbd-211e-dfa0b49c4116.png)

参考までにこれを$\LaTeX$でかくとこんな感じになります。
普段から$\LaTeX$を書いている人なら簡単に読めるでしょうが、私を含め多くの人はパッと見で、どこが2cmの要素のなのかわかりません。ChatGPTかGitHub Copilotに生成してもらった方が早いです。(ChatGPTに書いてもらいました。)

```sample.tex
\begin{figure}[h]
    \centering
    \fbox{\begin{minipage}[c][2cm][c]{3cm}
      \centering
      ここに文字を入れる
    \end{minipage}}
\end{figure}
```

![スクリーンショット 2024-02-24 15.51.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1698242/6c41908e-2e0d-c143-11c6-42df7fed8ea5.png)

## 環境構築が楽
[公式のオンラインエディター](https://typst.app/)で書く場合はアクセスしてプロジェクト作って書くだけ。
ローカルで書く場合は[拡張機能](https://github.com/nvarner/typst-lsp)一つで動きます。VS Code, Neovimに対応しているみたいです。

https://typst.app/

https://github.com/nvarner/typst-lsp

# 作ったもの
https://github.com/Nikudanngo/typst-ja-resume-template

前置きが長くなりましたが、今回作成したものをここで共有します。
いつも私が使わしていただいていた$\LaTeX$の[履歴書テンプレート](https://github.com/shigio/rireki-style)を参考に作ってみました。

![スクリーンショット 2024-02-24 16.55.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1698242/09dd7087-c5c3-5fbb-6acf-6f615fcc5f5d.png)

![スクリーンショット 2024-02-24 16.55.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1698242/d047d88a-87a2-1522-1a38-c91d8feb5f68.png)

使い方は簡単で、[このリポジトリ](https://github.com/Nikudanngo/typst-ja-resume-template)から`template.typ`と`main.typ`を入手します。
次に`main.typ`の日本語関数のpropsを変更したり、必要に応じて関数を追加してください。

```main.typ
#import "template.typ": *
#let title = [#text(tracking: 1em,size: 14pt,[履歴書])]

#let fontSerif = ("Noto Serif", "Noto Serif CJK JP")
#let fontSan = ("Noto Sans", "Noto Sans CJK JP")

#set text(font: fontSerif, size: systemFontSize)
#set page(paper: "jis-b5",margin: 1.5cm)

= #title
// 使い方の説明。
// "私"と"アドレス"など日本語名の関数の引数を変更してください。

#move( dy: -1cm,
  stack(
    align(bottom,
      grid(
        columns: (5fr,2fr),
        私(
          性読み: "りれきしょ",
          名読み: "たろう",
          性: "履歴書",
          名: "太郎",
          生年月日: "平成xx年xx月xx日",
          年齢: 99
        ),
        証明写真(写真: "image/testImage.png")
        // 証明写真()
      ),
    ),
    アドレス(
      住所ふりがな1: "とうきょうとすみだくおしあげ",
      住所1: "東京都墨田区押上１丁目１−２",
      郵便番号1: "131-0045",
      電話番号1: "123-4567-8901",
      Email1: "sample@example.com",
      住所ふりがな2: "",
      住所2: "https://github.com/Nikudanngo/typst-ja-resume-template",
      郵便番号2: "",
      電話番号2: "",
      Email2: ""
    ),
    linebreak(),
    経歴(
      mode: "学歴・職歴",
      columns: 14,
      grid(
        gutter: 0.61cm,
        学歴(),
        学歴(
          年: "平成1",
          月: "10",
          学歴: "俺、爆誕"
        ),
        学歴(
          年: "平成20",
          月: "3",
          学歴: "スクスク育つ"
        ),
        学歴(
          年: "平成30",
          月: "4",
          学歴: "宇宙大学ツヨツヨ学部エンジニア学科 入学"
        ),
        学歴(
          年: "令和1",
          月: "8",
          学歴: "大規模開発サークル設立 \u{2192} サークル崩壊"
        ),
        linebreak(),
        職歴(),
        職歴(
          年: "令和6",
          月: "4",
          職歴: "大手IT系メーカーベンチャー企業 就職"
        ),
        以上()
      )
    ),
  ),
)
#pagebreak()

#stack(
  経歴(
    mode: "学歴・職歴",
    columns: 5,
    hegithLength: 5cm,
    linebreak(),
    // grid(
    //   gutter: 0.61cm,
    //   資格(
    //     年: "平成1",
    //     月: "10",
    //     資格: "大学入学"
    //   ),
    // )
  ),
  linebreak(),
  経歴(
    mode: "資格",
    columns: 7,
    hegithLength: 6.6cm,
    grid(
      gutter: 0.61cm,
      資格(
        年: "平成1",
        月: "12",
        資格: "普通自動車免許 取得"
      ),
    )
  ),
  linebreak(),
  志望動機(
    [私がこの職に応募する理由は、]
  ),
  linebreak(),
  本人希望(
    [私は〇〇がしたい]
  ),
  place(
    bottom + right,
    dy: 10pt,
    [Made with Typst]
  )
)
```

# さいごに
履歴書は以下の資料を参考に独自に作成したものです。何かおかしな点があればご指摘ください！
参考になった、使ってみたいと感じたらGitHubのスターください！

https://github.com/shigio/rireki-style

https://doda.jp/guide/rireki/template/