SIerのプロジェクトにSPAフレームワークを導入する話

こんにちは。レイラです。私は今、SPAのフレームワークを導入するプロジェクトにアサインしています。しかも、そのフレームワークの調査やライブラリ選定、実装を担当しています。

私は、趣味がプログラミングで、すぐにナウくてヤングな技術をかじりたくなる性分なのでとても楽しく仕事をさせてもらっています。

今回は、フレームワークやライブラリを導入する際に考えないといけないことについてお話していきたいと思います。

技術選定

フロントエンドのフレームワークといっても様々なものがあります。JavaScriptのフレームワーク(SPAを構築する際のもの)の有名どころとしては、React、Vue、Angularがあると思います。
※ Reactはフレームワークじゃないとか、他にも色々あるとかあるとおもいますが、その辺りは割愛させてください…

他にも、どのライブラリを導入するのか、CSSフレームワークは使用するのかといったことも決める必要があります。

以下のような観点で技術選定が必要なのではないかと思います。

・各フレームワークのメリットデメリット
同じフロントエンドのフレームワークでも、メリットデメリットは大きく異なります。例えば、ドキュメントの充実さや学習コストです。それらも加味する必要があります。

・開発メンバーのスキルや人数
開発メンバーのなかにフレームワークに詳しい人が存在するのか、メンバー全員がフロントエンドの分野において未経験なのか、人数が5人以下なのか、20人を超えているのかによって、上記のメリットデメリットで重視するポイントが変ってきます。

・サードパーティ製のライブラリの更新頻度
サードパーティ製のライブラリを導入する場合は、そのライブラリの開発が今も継続しているのかを調べておく必要があります。フロントエンドの分野はバージョンアップのスピードがとても早いです。フレームワークのバージョンアップによってライブラリが動かなくなるという問題を防ぐ必要があります。

開発環境

一人での開発とは違い、チームで開発環境を合わせることはとても重要です。現状、プロジェクトの実装担当は私一人なので問題ないですが、今後人数が増えた場合や、私がプロジェクトから外れた場合の対策を考えなければなりません。

一度、チームの方のPCに環境構築した際は、ゴールデンウィーク前に構築した人と、後に構築した人でフレームワークのバージョンが違っていたことがありました。(まあこれは、package.lock.jsonの連携ミスなのですが)このようなことを防ぐ対策を考えておく必要があります。

具体的な対策については今は思いついていません。

・仮想環境+構成管理ツール
・コンテナ

が案として出てくるのですが、どうなんでしょう。

コード規約

まあ、規約というほどではないですが、コードの書き方や命名規則等については決めないといけないと考えています。これについてはドキュメント化+tslintやeslintでのチェックで対応する形になるかなと思います。

おわりに

私が技術選定担当なので、私が定めた開発環境構築方法やコード規約がプロジェクトの今後のスタンダードになる可能性が高いと思います。また、もし、このプロジェクトが成功し、他のプロジェクトでも導入してみようという話になるとそのプロジェクトでも私の考えが反映される可能性があります。そのため、かなり責任は重大ですし、この部分には時間を割く必要があると思います。

記事の中にも書きましたが、チーム内の開発環境構築についてはこの記事をみてくださった方の意見を聞きたいレベルで悩んでいます。

このフレームワークを導入して正解だったと思われるように、これからも調査を続けていきます。では。