Slide 1

Slide 1 text

今年最も「覚醒」した 
 コーディングテストの 
 舞台裏
 
 
 
 三海 純(ミカイジュン)


Slide 2

Slide 2 text

ミカイ ジュン 
 ● フリーランスエンジニア 
 ● 趣味: もくもく会、アニメ、ネット麻雀(雀魂) 
 ● 好きな有名人 
 ○ 後藤 ひとり 
 ○ 陸八魔アル 
 ○ 千早 愛音
 ○ 八木 唯


Slide 3

Slide 3 text

キャリア
 ● 2020年 ~ 2022年 
 ○ 正社員: フロントエンドエンジニア 
 ● 2022年 ~ 2023年 
 ○ 正社員: フロントエンド&バックエンドエンジニア 
 ● 現在(2024年) 
 ○ フリーランス: Next.js など設計&開発 
 ● 来年(2025年 ~) 
 ○ Y社 正社員として入社予定 


Slide 4

Slide 4 text

学習のモチベが上がらない時、 
 無理に自分を責めなくてもいいよ! 
 今回お話ししたいこと 


Slide 5

Slide 5 text

エンジニア人生の中で・・・ 
 休日など業務外で 
 「勉強し始めたけど集中できない」 
 と思ったことありませんか? 


Slide 6

Slide 6 text

私は年300回 
 そう思ってました 


Slide 7

Slide 7 text

とある試験を 
 受けるまでは・・・ 


Slide 8

Slide 8 text

その試験は 
 とある企業の 
 コーティングテスト 


Slide 9

Slide 9 text

とある会社のコーティング試験 
 ● 期間は2週間 
 ● 要件を満たしたフロントエンド新規開発 
 ● コード整形やテストは必須 
 ● commit内容も評価範囲 


Slide 10

Slide 10 text

結果は見事合格 
 30時間ぐらい費やした 


Slide 11

Slide 11 text

やったこと 
 ● Next.jsの環境構築 
 ● SCSS導入 
 ● ESLintなどコード整形ツールの導入 
 ● Storybook導入 
 ● husky導入 
 ● Github Actions導入 
 ● コンポーネント作成 など 


Slide 12

Slide 12 text

引用元: © alu inc.

Slide 13

Slide 13 text

大変だった事は色々あるけど 
 自分のコード全てが評価対象になるため 
 commit1つ1つ全集中してた。 
 また、動けばOKという訳ではないのでみやすいソー スコードはどんなものだろう? 
 というのも考えた 


Slide 14

Slide 14 text

CSS設計はどうする? 
 ● BEM
 ● OOCSS 
 ● SMACSS 
 ● FLOCSS 


Slide 15

Slide 15 text

テストはどうする? 
 ● Storybookで全部書く? 
 ● ロジックテストはVitest? 
 ● E2Eテストはいる? 
 ○ PlayWright? 
 ○ cypress ? 


Slide 16

Slide 16 text

コンポーネント設計はどうする? 
 ● 王道のAtomic Design? 
 ● fetures 採用する? 
 ● 独自の設計? 
 ● 全部1つのディレクトリにぶちこむ? 


Slide 17

Slide 17 text

など 考えることは沢山あった 


Slide 18

Slide 18 text

技術的に成長したのは勿論だが・・・ 
 ● Next.jsの環境構築 
 ● SCSS導入 
 ● ESLintなどコード整形ツールの導入 
 ● Storybook導入 
 ● husky導入 
 ● Github Actions導入 
 ● コンポーネント作成 など 


Slide 19

Slide 19 text

「絶対合格してやる」 
 という思いで 
 毎日全集中できた 


Slide 20

Slide 20 text

● 平日(1日4時間) 
 ○ 朝7時 ~ 朝9時 
 ○ 夜19時 ~ 21時 
 ● 休日(1日9時間) 
 ○ 朝9時 ~ 夜6時 


Slide 21

Slide 21 text

1週間で業務外で40時間 
 プログラミングしたのは 
 久しぶりだった 


Slide 22

Slide 22 text

おまけですが 
 未経験からエンジニアになった時は 
 1日16時間勉強を2ヶ月続けたのは 
 別のお話し・・・ 


Slide 23

Slide 23 text

今回で学んだこと 
 ● 学習モチベが上がらない場合は「やらなくてはな らない」という思いがあるか確認 
 ● 今程よい緊張感がない場合は何かしらのアク ションが必要かも? 


Slide 24

Slide 24 text

ご清聴ありがとうござ います!