未経験エンジニアが1年間戦ってみた件

2023年わたしの発見！

Kuuuuu

自己紹介

この1年の軌跡

この1年の戦い

この1年で役に立ったもの

株式会社クラベスについて

目次

01.

02.

03.

04.

05.

01

自己紹介

現職

特技

2023年は...

前職

生まれ・出身

2024年は...

ハッカソン

好きなこと

1995年 兵庫県出身

​

中学校理科教諭

株式会社クラベス

エンジニア

東京都知事杯OpenDataHackathon

行政ニーズ賞,オーディエンス賞

国内・海外問わず旅行に行くこと

​

どこでも寝れる

何時間でも寝れること

02

この1年の軌跡

03

レビューしてもらったポイント

開発

1. AtomsやMoleculesのコンポーネントはページに依存したスタイルは

　 持たせない(Atomic Design)

　 →コンポーネントの使い回ししにくい。

2. JSX内の条件分岐は全て三項演算子を用いる

3. コンポーネントの最上位の要素にmarginを持たせない

　 →コンポーネントの使い回ししにくい。

marginをつけたい場合は、使う側(Pages)のスタイルで当てる

4. マジックナンバー(数値などをそのまま記載している)は定数にして記載

5. 色はできる限り限定的に。色の名前を変数に置いて使う。

​

​

テストを書く際に気を付けること

テスト

1. テストケース名の書き方を統一する

2. テストケース名以上のテストは書かない

3. テストをする箇所はロジックが発生しているところのみ

4. 一度確認したテストは違うテストで担保する必要はない

5. ハードコーディングではなく、レスポンスの値や定数を参照

　 するようにテストを書く

6. デグレを防ぐテストを書く

​

専用のMatcherを使おう！

テスト(Jest)

専用のMatcherがある場合は、専用のMartcherを使う！

// NG

expect(array.length).toBe(3)

expect(screen.getByRole("button", {name:/search/i}).disabled)).toBe(true)

expect(array).toBe(null);

expect(url.searchParams.get("mode")).not.toBe("edit");

​

​

​

// MUST

expect(array).toHaveLength(3);

expect(screen.getByRole("button", {name: /search/i})).toBeDisabled();

expect(array).toBeNull();

expect(url.searchParams.get("edit")).toBeNull()

​

MUIのSelectBoxのクリックができない

​

https://github.com/claves/sundai-navi-app/pull/640/files

https://qiita.com/Kouta-fd/items/ff0429887b59d3cb9a49

​

テスト(Jest)

//TS

　<Box>

　<FormControl fullWidth>

　<InputLabel id="demo-simple-select-label">Age</InputLabel>

　<Select

　value={age}

　label="Age"

　onChange={handleChange}

　data-testid="age"

　>

　<MenuItem value={10}>Ten</MenuItem>

　<MenuItem value={20}>Twenty</MenuItem>

　<MenuItem value={30}>Thirty</MenuItem>

　</Select>

　</FormControl>

　</Box>

​

HTMLでは以下のようになっている

テスト(Jest)

//HTML

　<div data-testid="age">

　<div tabindex="0" role="button" aria-expanded="false" aria-haspopup="listbox""></div>

　 <input aria-hidden="true" tabindex="-1" >

　</div>

　//選択肢

　<div tabindex="-1">

　<ul role="listbox" tabindex="-1">

　<li tabindex="0" role="option" aria-selected="true" data-value="10">Ten</li>

　<li tabindex="-1" role="option" aria-selected="false" data-value="20">Twenty</li>

　<li tabindex="-1" role="option" aria-selected="false" data-value="30">Thirty</li>

　</ul>

　</div>

​

​

テスト(Jest)

//TS

　await userEvent.click(within(screen.getByTestId("age")).getByRole("button"));

　await userEvent.click(screen.getByRole("option", { name: "Twenty" }));

　expect(screen.getByRole("button", { name: "Twenty" })).toBeInTheDocument();

​

1. test-idをつけてgetByTestIdで取得
2. Selectbox自体のクリックはdivタグのroleがbuttonをgetByRoleで取得
3. Selectboxの選択肢クリックはliタグのroleがoptionをgetByRoleで取得

テスト(Jest)

テストの速度改善

デフォルト状態のJest

対象となる複数のテストファイルは並行に処理される。

ファイル内の各テストは順番に実行される。

参考: Jestテストの並行実行と逐次実行をちゃんと理解する #テスト - Qiita

テストツール

VSCode用の拡張機能

「Jest Runner」

テストメソッドの上部にRun|Debugが表示され、個別でのテスト実行ができる

テスト(Jest)

テストのchips

・test.only

　指定したテストケースにだけ絞って実行することができる

　https://jestjs.io/ja/docs/api#testonlyname-fn-timeout

・test.skip

　指定したテストケースだけ実行しないことができる

　https://jestjs.io/ja/docs/api#testskipname-fn

・structuredClone

　JavaScriptにおいてオブジェクトのディープコピーができる便利な関数

structuredClone() - Web API | MDN

04

便利なツール

VSCode用の拡張機能

「Swagger Viewer」

localで記載したopenapi.yamlのプレビューを見れる

「Swagger Editor」

ブラウザ上でAPI仕様書を書くためのエディタ

「Copy as Markdown」

リンクがマークダウンでコピーできる拡張機能

​

確認系

テスト環境で使えるクレジットカード番号

カード番号以外の情報

有効期限: 現在時刻より未来の年月を有効期限として指定

エラーをさせるカード番号などもある！

参考: テスト環境で使えるクレジットカード番号 #ec - Qiita

local環境でスマートフォンに繋げる

{IPアドレス}:3000とスマートフォンで入力

※ポート番号が3000番の場合

参考: localhostにスマホから繋げてみた!!(Mac編) #Android - Qiita

この1年で学んだこと

1. 未経験でも「言われたことをただやる。」ではなく、自分でまず考える

ことを大切に

• 自分が何で困っているのか、timesに積極的に投稿
• 積極的に分からない単語などがあれば、調べてtimesに投稿
• 積極的にイベントに参加して単語を増やす
• 積極的に自分でもできそうなことはやっていく

​

​

05

• エンジニア
• Webディレクター

• 自社内開発
• 言われたことをするだけではなく、

お客様と共に機能を考えて開発

• オンボーディングがしっかりしている
• 自分の希望している業務がやれる
• 自由出社
• オンラインでも気軽に聞きやすい

募集職種/イチオシポイント

研修&BBQ

☝︎半年に1回オフラインの研修があるよ〜

​

研修後のBBQ！

今年のエイプリルフールで

作成したビールを片手に☞

​

応募方法

ご応募はこちらから

当社サイトの求人ページ

よりご応募ください。

https://www.claves.co.jp/recruit/

ご清聴ありがとうございました！

Thank you!