採用技術と設計思想

テウインアウン

今回は社内でよく使われるSRKというテンプレートの採用技術と設計を言語化をしたいと思います。主に弊社のフロントエンド開発で採用しているライブラリとツールはこちらになります。

  • react

  • javascript typescript

  • material-ui

  • webpack, nextjs

  • firebase, amplify, s3

これらはWeb開発現場を経験したエンジニアであれば、たいてい聞いたことある技術だと思います。ようするに誰でも知っているような開発現場でよく使われているものをになります。

react

世界中のフロントエンド開発で最も採用されているライブラリーになります。フェースブック社で開発が開始されたOSSになります。reactのいいところは当初から独自の手法でシンプルに実装できるように設計されています。またバージョンアップは活発に行われていながら下位互換は基本的に守られている開発者に優しいプロジェクト運営がなされています。OSSでよく悩まされるバージョンアップによる整合性の喪失の問題はほとんど無いです。

中から大規模システム開発には向いているライブラリになります。他にもvueとangularと言ったライブラリもありますが実装のし安さ、認知度や安定性、それから開発が活発の観点から僕らはreactを採用しています。

Material-ui

reactと親和性がとても高いUI用のライブラリになります。Googleが提唱したMaterialデザインをベースにしています。サービスやシステム開発でよく使われるUI部品提供してくれます。デザインの知識がなくてもキレイな画面を短時間で作成することが可能になります。開発は世界中の有志のエンジニアたちが行なっています。もし独自にMaterial-uiのようなUIフレームワークを作成する場合はとてつもない労力と時間がかかります。

webpackとnextjs

今やwebpackはフロントエンドの開発で不可欠なことになりました。複雑なファイル構成をブラウザーが認識できるようにしてくれるすごいツールです。ブラウザー間の差分を吸収やフロントエンドの実装しやすくしてくれます。パフォーマンス改善にも役に立ちます。最近はnextjsの案件を担当することも増えて来ているため、楽に開発を始められるnextjsのかゆいところの対象方法なども分かってきています。

ライブラリ使う理由

普段の僕らが開発するものは研究や実験が目的ではなくビジネスが主な目的です。ビジネスは日々進化していて常にスピードが勝負になります。ライブラリを使うと素早く品質の高いウェブサービスを実装することができます。またシェアの高いライブラリを使う事によってセキュリティーのリスクも軽減できます。また同じライブラリの知見を持ったエンジニアが多いため開発リソースの確保の難易度が下がります。

また最近のライブラリやUIフレームワークは世界規模で使われていてOSSとしても開発が活発なためとても品質が高くて使いやすくなって来ています。同じ品質のものを独自で実装する場合はとてつもない労力と時間がかかります。ライブラリを使用する一番のメリットは車輪の再開発をしなくても良いのとビジネスの成功へより速く辿り着けるところにあると思います。

設計思想＆アップデート

ソースコードはシステムの歴史を知るために必要なものだと哲学を元に設計します。最先端の書き方や流行やり方より読み手に伝わりやすいように心かけています。ディレクトリ構造から画面実装のデータの持ち方など共通的なものは細部までわかりやすさにこだわります。個人のフリーランス時代からここまで携わってきた中で良いアイディアを取入れて設計をアップデートするようにして来ました。

例えばreact開発を容易に始められるために設計されたcreate-react-appというライブラリがあります。こちらはwebpackやeslint（コード品質チェックツール）を隠蔽化して、それらの知識がなくてもreactを始められるようになっています。しかしプロジェクトが大きくなってくるとパーフォーマンスや開発をやりやすくするために細かい設定する必要が出てきます。そうなるとcreate-react-appが逆に足かせになったりします。そういった場合を考慮してcreate-react-appを採用せずに細かく設定ができるようにwebpackだけで設計を行うようにしています。

総括

僕はreactとの出会いは約6年前のreactが世に知られ始めた頃になります。当時担当していたプロジェクトはjqueryやbackbone.jsを採用していましたが一部の画面の刷新の際にreactを導入したことが始まりです。react経験者がいない中、情報量も少ない時代でreactの導入をやり切った経験があります。既存システムで用意されているデザインパーツの中きら必要な8割ほどのパーツreactで実装して画面を完成させることを一人で担当しました。そのプロジェクトはそれがきっかけで後に全システムをreact化することになりました。

その後別のクライアントさんでレガシーシステムの一部をモダン化（react化）することにチャレンジしました。そちらもチームのバックアップがあって無事リリースされました。画面描画が速くなることにより検索ランクの繰り上げと売上拡大の貢献にも繋がりました。またエンジニアの募集要項にもモダン化されたプロジェクトと記載することができ新規採用しやすくなったと副作用もありました。

以上、簡単ですがいつもプロジェクトで使わせて頂いている技術とその設計の哲学などを書いてみました。今回は抽象的な話がメインですがまた細かい技術を深堀りするのを別途記事にしていきたいと思っています。


この記事が気に入ったらサポートをしてみませんか？