あらすじ

バックエンドがメイン開発な私がフロントエンドに苦闘した２週間を振り返る。HTML,CSS,JSの知識が多少なりともあってフレームワークだったらBootstrapが一番使ったことがあるって感じのエンジニアが、既存のデザインをいじったがレスポンシブ対応を完全にできなかった。そんな出来事から良くなかったことを反省して次に生かそうと思う。

VueのライブラリVuetifyを導入する策を講じた

RailsオンリーのSSRでコツコツerbを使ってフロントエンドをつくってきたプロジェクトですが、レスポンシブ対応ができないんだったらVuetifyを入れてサーバーサイドとクライアントサイドで完全に分けちゃおうって思って、この策を講じることにした。vueをなぜ使おうかと思ったのは今後デザインの管理がしやすいのと、ライブラリが多様にあるのでレスポンシブやらSPAやらうまい具合に使ってUIめっちゃ向上するんじゃないのかと思ったからです。結論は、erbを使ったSSRでは、長時間かけないと切り替えられないなという結果でした。erb前提のroutingになっているのでAPI化にするのは作業工程が多すぎるなと感じて撤退しました。

そのまま突っ走って既存CSSで対応していこう

メディアクエリが一応設けられているcssなのでこのまま細分化していって対応することもできると考えましたが、リソースがないのを考えるとbootstrapやらbulmaやらのフレームワークつかっちゃった方が得策だなと感じフレームワークを使うことになりました。

Bootstrapを使いましょうか

私自身がBootstrapを使ったことが一番多いので、他のフレームワークを使わずにBootstrapを使いますかと脳筋スタイルで進めようと思っていましたが、アメリカ人エンジニアさんがBootstrapは重いから軽量のレスポンシブ対応のみできるフレームワークを使おうよとなりBulmaへ。

Bulmaで決まりだ

結果的にBulmaになりました。実際に実装してもらったのはアメリカ人エンジニアさんなのですが、ボタンもBootstrapから卒業してレスポンシブ対応の方法も簡潔で違ったフレームワークを使うとデフォルト感がなくなるので良いですね。どうしてもBootstrap使うと見慣れた感を感じるユーザーがいると思うのでデザインに手を抜いているなとか思われる可能性考えたら良い到着点だったのかなと思います。本当、試行錯誤は長い時間かけたらまずいですが、早いスパンで繰り返すのは大切だなと改めて感じました。

まとめ

フロントエンドに時間をかけるリソースがない開発は、用途にあったフレームワークを決めるのは大切。
vueやらreactを使った方が間違いなくUIは改善できると思う。
話し合いは大切。
技術選定はなるべく早く。切り替えるのは時間がもったいない。