2024.06.27
- 技術情報
- コラム
技術投稿│第1回・入社後研修と今を比べてみて
![](https://acrocrane.com/wp-content/uploads/2024/06/240_F_683609644_YGFK73ebJ2Tw1cGYwpN7dkKGLFsaXTT9.jpg)
こんにちは!第2回目となる、技術記事の執筆を担当するあっきーです。
私は今年で入社4年目、PHPとECCUBEというパッケージを使ったECサイトの保守や、C#・ASP.NETを使った倉庫会社向けのビルマネジメントシステムの開発等に従事しています。
今回1つ検証として挙げるテーマが、「研修の中で作成した電卓を今改めて作ったらどこまで進化するの!?」です。
今回は初回ということで(?)、入社2年目のともや君を連れてきました。
個性ある電卓は見られるのか、ご期待ください…!
研修のご紹介
本題に入る前に! 弊社が行う新入社員研修について少し説明させてください。
弊社アクロクレインは、20以上の数多なる会社が連なるアクログループの一員です。
会社間の繋がりに優れているので、研修専門のグループ会社が行う研修に参加できます。
6か月という長い間、JavascriptやSQL、PHP、LaravelなどWeb開発に必要な言語・フレームワークをじっくりと学びます。
また、勤怠管理システムを設計書に則り個人で作成するなど、案件に入っても自走できるエンジニアに未経験者でも到達できるカリキュラムが組まれています。
楽しみながら成長を実感できるそして案件に直に生かせられる、私としても良い研修だったなと思います。
研修で作った電卓
ここからは、実際に作成された電卓を本人に解説してもらいながら見ていきましょう。
私は横槍を入れる存在になります。ではともや君、よろしくお願いします。
ともや:「実際に作成した電卓がこちらになります」
![](https://acrocrane.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-21-093807.png)
ともや:「普通の電卓ですね」
![](https://acrocrane.com/wp-content/uploads/2024/06/enshu_1.html-Visual-Studio-Code-2024_06_21-11_18_09.png)
ともや:「こちらがロジック部分になります」
ともや:「valueを変えてしまっているので、ボタンの表示が変わってしまうのが当時の悩みでしたね~」
研修中で知識もないので仕方ないですが、eval関数は便利なもののセキュリティ面で危険を孕んでいるのでなるべく使いたくはない…ただ入社当時だと計算ロジックを考えることが大変なので良しとしましょう。
(このロジックに-/+の処理がないのはご愛敬。どうやら時間が足りなかったらしい)
![](https://acrocrane.com/wp-content/uploads/2024/06/enshu_1.html-Visual-Studio-Code-2024_06_21-11_15_17.png)
ともや:「こちらが表示部分になります」
1~9の数字を押してもgetButton関数が動いちゃうけど、これは仕方ないことだったのかな?
ともや:「当時はjsでボタンを識別するという考えがなかったので、ある意味仕方なかったですね笑」
進化した電卓
研修当時の電卓を見てもらいましたが、次に本命!進化版を見せていただきましょう。
![](https://acrocrane.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-21-101937.png)
ともや:「こちらが進化した電卓ですね」
先ほどのと比べてかなりスリム…! だけど-/+と「.」がなくなってるね…これは??
ともや:「小数点はロジックがかなり複雑になるので省いてます!」
ともや:「サインチェンジキーはあまり使わないということもあり、忘れてました…すみません…」
![](https://acrocrane.com/wp-content/uploads/2024/06/enshu_1.html-Visual-Studio-Code-2024_06_21-12_20_39.png)
ともや:「こちらが表示部分になります」
ともや:「指摘いただいたonclickの所を改善しました」
なるほど、全ての要素に異なるclassを与えてjsで処理する際に識別していると。class名が全て異なる形ならidで指定したくなるのは人の嵯峨でしょうか…
![](https://acrocrane.com/wp-content/uploads/2024/06/enshu_1.html-Visual-Studio-Code-2024_06_21-12_22_17.png)
ともや:「こちらが電卓のディスプレイの表示部分になってます」
ともや:「evalの指摘を受けたので、使用しない形で実装しました」
ともや:「formulaParserに数式を渡して結果を表示するような流れですね」
かなりまとまった記述で、jsのメソッドフル活用!
evalに頼らずロジックを構築できていて素晴らしいです。
※見やすさを意識するなら、
・if文の余白は if (name === 'ac') {}の形
・インデントの幅を半角スペース2か4つで統一する
・関数名をローワーキャメルケース、スネークケースなどで統一する
といった部分は是非直してもらいたいですね。
![](https://acrocrane.com/wp-content/uploads/2024/06/enshu_1.html-Visual-Studio-Code-2024_06_21-12_22_09.png)
ともや:「こちらがそのformulaParserの処理部分ですね」
ともや:「構文を小さな単位まで分割して、その末端から値を確定していく手法ですね」
ともや:「気になった方は再帰下降構文解析で検索してみてください!」
まとめ
いかがでしたか?
機能にはあまり変化が見受けられませんでしたが、コードのロジックは全くと言っていいほど違いましたね。
evalに計算ロジックを任せていたのが、formulaParserを使用する形になり、実装に当たっての考え方も洗練されたように見えます。
これは入社して1年経ち、実際に案件に入り様々なコードを見て、書いて知識と経験が凝縮された結果と言えるでしょう。
まだまだ2年目、ここからさらに視点を広げて保守性や見やすさなども考慮していくことになりますが、この成長ぶりは留まることを知りませんね…!
ちなみに、私の電卓は載せないのか…?と思われた方、ご安心ください。
紅葉が色づく頃・はたまた雪が積もり始める頃にご期待ください。