1 of 14

watasuke.netを支える技術

わたすけ（ネクスト受講生）

2 of 14

  • 高専4年生
  • seccamp‘22 Y4 (CPU自作) 受講生
  • GCC’23 Singapore チューター
  • ネクスト受講生
  • RustかTS (React) かC++を書いている
    • 最近はRustによるOS自作と�TSによるWeb開発を反復横飛び中
  • Twitter / GitHub / Instagram�→ @watasuke102

3 of 14

昨年LT

TAGether

Share self-made exam for classmates

https://github.com/watasuke102/TAGether

starください……

4 of 14

5 of 14

toc

  1. watasuke.netの概要
  2. 使用技術・フレームワーク
  3. 開発を支えるエディタ

6 of 14

watasuke.net

  • 右下QRコードから飛べます
  • フロント：React (Gatsby.js)
  • バック：Strapi
    • やめたい
  • Blog / Portfolio / Profile / Card (名刺) などのコンテンツ

7 of 14

Gatsby.js

  • SSGに特化したReactフレームワーク
  • (特に訪れたことのあるページ間の) ページ移動がめちゃくちゃ速い
  • GraphQLが裏に潜んでいて、jsでconfigを書いてビルド時にいろいろできる
    • うちのブログでは、例えばOGP情報の事前取得などをしている

8 of 14

vanilla-extract

  • TypeScriptでCSSを書ける
  • エディタがクラス名を補完してくれる！
  • 存在しないクラス名でエラーが出る！
  • F2でクラス名をリネーム出来る！
  • 型ってサイコ〜〜〜

9 of 14

実際のコード

  • watasuke.net/card の背景
  • 単位pxならNumberで書ける

10 of 14

ポートフォリオ

ぜひみてください

11 of 14

VSCode

  • べんりなエディタ
  • Insiders版を入れて使っている
  • テーマ：OneDark、アイコン：Material Icon

12 of 14

拡張機能（一部）

  • VSCodeVim
  • GitLens
  • indent-rainbow
  • Project Manager

13 of 14

キーバインド

  • Ctrl+O：1つ前のカーソル位置にジャンプ
  • （以下、カスタマイズ済み）
  • Ctrl+Shift+A：ターミナルにフォーカス
    • 押しやすい
  • gr：関数などが呼ばれている場所を探す（Go to Reference）
    • gdでGo to Definitionできるのでこっちも欲しくなった

14 of 14

おわり

よろしくおねがいします→