【Webアプリ開発】23卒、新卒1年目にやれたこと

Hello, everyone. どうも、新卒1年目エンジニアでした。

年度が変わります。せっかくの機会なので、今年度（2023年度）やったことを振り返ります。

筆者の略歴

• 大学時代（2019.4~2023.3）
  • 情報系の学部を卒業（23卒）
    • 授業で一通りのコンピュータサイエンスは知っている状態
    • RISC-V OSを実験で作って、セマフォ使って並列処理動かしたのが思い出
  • 教育データをAIでこねこねして、最終的にXAI（Explainable AI）の話につなげた卒業研究
    • Pythonいっぱいやった
• 就職（2023.4~）
  • 某事業会社の開発部門に配属
    • 上流から下流までしっかりやる
    • Webアプリ作ることが多い

やったこといろいろ

1. Webエンジニアの超基礎研修

社内での研修期間を存分に利用して、Webエンジニアとして育ちました。そもそも、まともにWebアプリを作ったことすらなかった筆者だったので、すべてを本当に基礎から学びました。

Java(Servlet & JSP)

これらの書籍をベースに、JavaでWebアプリケーションを作る方法について0から学習するところから、社会人1年目がスタートしました。

オブジェクト指向をしっかりと叩き込まれたのが印象的です。大学時代、Pythonを使っていたのもあったのでなんとなくはわかっていたつもりだったのですが、明確にオブジェクト指向プログラミングを意識するようになったのは、ここで学んでからだったと思います。

また、MVCモデルという概念を獲得したのもこのタイミングでした。Webアプリケーション開発における基本のアーキテクチャで、Webアプリのためのプログラムの責務を3つに分けるんですね。

• Model
  • ビジネスロジック担当
  • データ操作
  • Javaプログラムでかける
• View
  • システムの画面表示担当
  • JSPでかける
• Controller
  • リクエストの受付担当
  • ModelとViewの仲介役
  • Servletでかける

GitとGitHub

これまで個人開発しかしてこなかった筆者だったので、研修を通じて使えるようになったことはかなりありがたかったです。「ブランチを切って、Pull Requestを送ってマージしてもらう」といった当たり前のことをできるようになったことはこの上ない喜びです。

また、ブランチ戦略についての勉強もこの時しっかり行うことができたのが大きな収穫でした。研修中に行ったチーム開発の模擬PJでも、ブランチ戦略を決めて、いい感じに進めました。

その時作ったのがこんな図です。

当時の勉強用Notionから持ってきました。Mermaid記法を使って、git-treeを書くことができるとのことだったので、まずはツリーを書いてみようとのことでやってみた次第です。要は、git-flowとかいうやり方ですね。(※普段、ブランチ戦略の名前はあまり意識して使っていない)

• mainとは別に開発用のdevelopブランチを作る
• developブランチからfeatureブランチをはやして、developにPRを送る
• developが育ったら、リリース準備用のreleaseブランチを切って、リリース前の最終調整をする
• releaseが育ったら、リリースしてmainに取り込む

（余談）この記事がめっちゃ分かりやすかったです

SQL

大学時代も頻繁に使っていたので、新しい知識はそんなにないかと思いきや、そんなことは全くありませんでした。

元々、大学時代に正規化やトランザクション、インデックスなどの言葉や理論については習っていて、面白いなーとは思いつつも、いまいち実感が湧いていませんでした。しかし、改めてSQLという初歩から学び直ししてみると、これらの大学時代に習った理論諸々が全部脳内で結びつき始めて、なんだか楽しくなってきちゃいました。

あとで出てきますが、「ただのデータ分析好き青年だった筆者が、分析だけじゃなくてDBも好きになっちゃった」が起きるのはこのタイミングあたりでした。

HTML & CSS & JavaScript

三種の神器を一通りやり直しました。高校ぶりです。

何のフレームワークも使わずに書くのは結構しんどいというのを今では思います。なんか、書いていて楽しくないというか。ただ、Bootstrapについては良い学びが得られたと思います。

結果、ChatGPTに聞きまくりながら、必要に応じて修正するといったやり方で、なんとなくの書き方を思い出す作業だった記憶があります。

総合演習

以下の3つを研修で体験しました。

• Servlet & JSPで予約サイトを作る in ウォーターフォール開発
• Servelt & JSPで資格勉強サイトを作る　in アジャイル開発
• Springでショッピングサイトを作る in ウォーターフォール開発

JavaベースのWebアプリを開発し、Azure Web Appにデプロイする、といった流れをチームで経験しました。新人たちで要件定義やらなんやらの上流工程から製造してテストするところなどの下流工程までをやりました。

ウォーターフォール開発では、各工程ごとに完璧に仕上げて次の工程に流していくことが求められます。研修の先生（上司）を相手に、次の工程に進んでも良いか厳しい見極めチェックを受ける必要があったので、コーディングだけでなく、見極めのための資料作成やそこまでのスケジューリングなど、やることはたくさんありました。

アジャイル開発では、プロダクトバックログと呼ばれる開発タスクを列挙し、議論やプランニングポーカーを行って優先順位や、どのスプリントで行うタスクであるかを決めていきました。また、各スプリントの終盤では先輩社員にご協力いただいて、ユーザインタビューを実施し、その結果をもとにレトロスペクティブ会を行って、次のスプリントへ活かすようにしました。

この時の具体的な技術面でのお話は別の記事でも書いているので、是非ご覧ください。

2. DBスペシャリスト

あとで出てきますが、「ただのデータ分析好き青年だった筆者が、分析だけじゃなくてDBも好きになっちゃった」が起きるのはこのタイミングあたりでした。

データおもしろ！ってなっちゃった

元々、大学時代にデータ分析をかじっていたこともあって、なんとなく自分の中で、データ分析を業務でもやりたいなーという気持ちがありました。しかし、実際に仕事で行うのは分析というよりも、ゴリゴリWeb開発。これにブーブー言っていた中、同僚の先輩からある言葉をいただきました。

先輩「データ分析は非常に大事ですが、正しく仕込めていなければ分析もできません。」

ﾊｯｯｯ!!!「納得する筆者」

確かにそうです。

これまでは、ただそこにあるデータを分析するためにスキルを発揮しがちな筆者でしたが、この言葉をもらって以降、

• アプリ側から、分析のためにどんなことができるか？
• 後から分析可能なアプリを作るためにはどうしたらいいか？
• OLTP、OLAP、こんな概念があったのか！

みたいなことを考えるようになり、ただ分析するだけでなく、もっと広い意味でのデータ屋さん（データエンジニア）になりたいなーと思うようになりました。

DBスペシャリスト一発合格

その結果がこれです。

2023年10月8日開催のIPA主催「データベーススペシャリスト試験」に合格しちゃいました。午前Iと午後Iは合格基準点である60点をわずかに超えるギリギリを責めてしまいましたが、受かったので一安心。

当時の様子はこの記事で詳しく書いています。

使った参考書はこれです。超無難な選択。

• 情報処理教科書 データベーススペシャリスト 2024年版の23年版
• 情報処理教科書 高度試験午前Ⅰ・Ⅱ 2024年版の23年版

データ指向アプリケーションデザイン

今年度読んで良かった技術書第1位です。（そもそもたくさん読破したわけでもないが...）

データ大好き人間になった筆者は、すっかりハマってこの定番本を読むに至るのでした。これまで蓄えてきた知識が、具体となって落とし込まれていくような、そんな本でした。

これまでは、大学の授業やDBスペシャリストを通じて言葉だけを知っている状態だったのですが、この本を通じて具体的な動きを追うことで、よりその理解に深みが出てくる感じがします。

3. Vue.js

今年度の業務で触った言語・フレームワークランキングはざっと以下の感じだと思います。

1. Vue.js（Node.jsも）
2. Spring（Javaも）
3. Python

ここでは、2023年10月から書き始めることとなったVue.jsについて振り返ります。

超短期間実装

Vue.jsを使って、Webアプリを一本作りました。筆者は途中合流という形で、製造工程から参加したので設計には特に携わることなく、ゴリゴリ書く要員として駆り出されました。

ただ、当時はほぼVue.jsは未経験だったこともあって、学びながら動く必要がありました。もう、インプットにばかり時間をかけてらんないよー！という感じだったのです。

学びながら動くはこのタイミングで、自分の中で習慣づくようになったと思います。インプット→アウトプットというよりは、アウトプット→インプットの流れで技術を学んでいくことの方が、ずっと効率がいいというか、自分に合っているなーと感じました。

• まずはアウトプットする
• やったことをメモに書き出す
• 詰まったら問題をメモに書き出す
• ChatGPTも使いつつ、調べる
• 調べた情報はメモに書き出す
• 試してみてうまくいこうがいくまいが、メモに書き出す

こういう流れです。この、「メモに書き出す」をやりながらとにかく動くことで、後から結局何をしたのかを振り返ることができるので、そのタイミングで落ち着いてインプットします。この、トライアンドエラーの記録化は、身につくし、めっちゃ大事だなーと思いました。

Vue2→Vue3移行

Vue 2 will reach End of Life (EOL) on December 31st, 2023.

ともある通り、Vue2は2023年を持ってEOLとなっちゃいました。そのため、諸々のVue.jsで動いているサービスのアップデート対応を行わないといけなかったのです。

具体的な方法については、またそのうち別の記事でまとめたいですが、

• vue-cli→Viteへの移行
• Node.jsのアップデート
• Vue2→Vue3への移行
  • class-componentな書き方から、Options APIな書き方へ修正

みたいなことを実施し、チーム内でノウハウ化しました。

このタイミングで、結構Vue.jsやNode.jsに慣れてきた感がありました。やっぱり書いていて、面白いですよね。

4. PlayWright

E2Eテスト自動化

PlayWrightを使ったE2Eテストの自動化にも挑戦しています。cypressという別のツールも使ってみたことがあったのですが、

• CodeGenありがたい
  • ブラウザ操作を監視して、操作した通りの挙動を再現できるコードを勝手に生成してくれる
• ネイティブなブラウザコンテキスト
  • 複数のブラウザタブを開ける
    • cypressはiframeを利用してテストを実行するのでうまくいかない

という点が嬉しくて、入門しました。勉強も兼ねて、あえて得意なPythonではなく、Node.jsで書いています。

今まで手作業で行っていたテストを全てを自動化することは無理だとは思いますが、手作業+テストBOTという形式で、人員に依存しないようなテストの仕組みを少しでも整えられたら嬉しいなーと思っています。

GitHub Actionsに組み込めるというのも聞いているので、CI/CD、実にやりたいですね。

まとめ

いろいろやりました。

来年度からは「新人」という肩書が外れて、逆に肩の荷が重くなるような感じもします。ただ、挑戦の心を忘れず技術を磨いていきたいものですね。あと、開発管理もやってみたいなーと思いながら、来年度のIPA「プロジェクトマネージャー試験」をチラチラみているのでした。