新卒エンジニアが「使われるサービス」に携わるようになって気をつけていること

はじめまして!20新卒エンジニアのakibarです🐏

アイスタイルAdvent Calender2020の12/5日分投稿を担当させていただきます。

4月に入社してから1か月半の全体研修、3ヵ月のテクノロジー研修を経て8月の中旬に現在の部署に配属になり、
業務では主にLaravel, Vue.js, Goを利用しています💻
(Laravelはテクノロジー研修で初めて、Vue.jsとGoは配属後に初めて触り始めました)

今回は、実際に「使われるサービス」の開発に携わるようになって気をつけていることにフォーカスして、4ヵ月弱のまとめをしていきたいと思います👯

目次

  1. 気をつけていること
    1. サポートするブラウザを考慮して実装を行う
    2. 複雑なSQLを作成したら実行プランを確認・検討する
  2. 最後に

気をつけていること

サポートするブラウザを考慮して実装を行う

実際に「使われるサービス」=様々な人が様々なブラウザで利用してくださるということで、IEなどレガシーなブラウザでの表示崩れも放っておけません。
配属後にVue.jsを使用して開発をしていたとき、IE非対応の構文を含んでいたことでIEで表示崩れを起こして新たに修正が必要になってしまうことがありました…😭
12/2の記事担当のsakaguchiiさんに神対応していただきました)

こういったことを引き起こさないために、
使用したいメソッドや関数が各ブラウザに対応しているかどうか下記サイト「Can I use」を利用して調べるようになりました🐈

https://caniuse.com/

「Can I use」はフロントエンドWeb技術の対応ブラウザを検索できるサイトです。(HTML/CSS, JSが主のようです)

わたしが実際に使用しそうになっていたのが、JSのArrayクラスのfindメソッドです。
検索してみると…

caniuse検索例find

IEの列が赤くなっており、非対応であることが分かります。(かなしい…)

caniuse検索例findIE

このように、「Can I use」を使えば簡単にJS/CSSの対応ブラウザを調べることができ、主要ブラウザに対応したコーディングができます!

該当のコードがどのブラウザで対応/非対応か確実に確認したい方はMDN公式リファレンスでご確認ください🙇
▶JSのリファレンスはこちら
▶CSSのリファレンスはこちら

複雑なSQLを作成したら実行プランを確認・検討する

何でもインターネットから情報を得る時代で、読み込みが遅いWebページは待っていられないですよね…😢

これまで個人で作成してきたWebアプリケーションはデータ量・アクセス数ともに膨大な量にならない想定だったため、SQLの実行速度について気にすることはあまりありませんでした。

しかし、多くのユーザーに使われていればその分データも膨大にたまり、アクセス数も多くなります。
そこで、作成したSQLが膨大なデータ量に耐えうるのか、アクセス数が多いときに耐えうるほど軽量な処理であるかどうか確認するため、SQLの実行プランを確認するようになりました。

SQLのEXPLAINステートメントでも実行プランが見られるのですが、MySQL WorkbenchのVISUAL EXPLAINが分かりやすいのでそちらで確認しています🐬

workbench visual explain

この実行プランを参考に、どのデータが増えたときにSQLが重くなる可能性があるのか、どの構文を避けたほうがよいのかを確認し、改善すべきところを探っています🔍(まだまだ見方が分からない部分が多いので、どんどん質問していこうと思います)

ちなみに、、私が学生のときの卒業研究で扱っていたSPARQLというRDF用クエリ言語は少しでも重いとタイムアウトしてしまい結果を得られないので、どういうクエリの書き方が遅いのか学ぶきっかけになりました…🙌

参照:https://engineering.linecorp.com/ja/blog/mysql-workbench-index-behavior-with-visual-explain/

最後に

今回は実際に「使われるサービス」に携わるようになって学んだ点にフォーカスしましたが、そのほかにもたくさんのことを学びながら日々成長していっていることを実感しています。
今後も楽しみながらエンジニアリングや事業についてどんどん吸収していきたいと思います💃

アドベントカレンダーもまだまだ始まったばかりなので、この後の記事もお楽しみに!
最後までご覧いただきありがとうございました🐰!

Bxシステム開発部Bxシステム開発G所属