2024年度自主開発_フロントエンド開発で学べたこと

こんにちは、PS-SLアプリチーム新卒1年目の織田です。

６月から９月までの間、新卒研修の一環としてシステムのチーム開発を行っていました。作成したのは、旬の食材を用いたレシピを検索するシステムです。

私も含め計５名の新卒による開発体制で、私は主にReact+JSでフロントエンドの開発を担当しました。今回は、フロントエンド開発を通して学んだことをブログにまとめました。ぜひ最後まで読んでいただければ嬉しいです。

1 MUI
2 usestateとローディング処理
3 datalist要素
4 最後に

MUI

今回の開発ではデザイン面はほぼMUIに頼りきりでした。当初はCSSやJSを手書きしてデザインを調整しようと考えていたのですが、メンターの方から「Reactを使っているならMUIが便利ですよ」と教えていただき触ってみることに。

実際のコーディングも非常に簡単で、インポートしてタグを書くだけ。とても簡単に整った画面を作成することができました。例えば、今回のシステムには登録した料理を作成するための食材や調味料を表示する機能があります。この画面をMUI無しで実装すると図１のようになります。

図１：MUI無しで実装した食材ページ。少し見にくいデザインで、食材にカーソルを合わせても反応なし。

図１でも一応食材や調味料のリストを表示することはできていますが、なんとなく見栄えが悪い感じがあります。続いて、MUIを用いて全く同じ内容の画面を作成したものが図２になります。

図２：MUIを用いて実装した食材ページ。すっきり整ったデザインでチェックボックスも付けられる。カーソルに反応する。

見栄えがとてもよくなった感じがします。見た目はとてもすっきりと変化したのですが、コード内での変更はそれほど多くはありませんでした。html単体でlistを表示するにはulとliを用いるのですが、それぞれListとListItemにするだけです。また、MUIのCheckboxを用いて手元にある食材の確認を行えるようにもできました。

このようにMUIは非常に簡単な記述だけで、見栄えが良くかつ機能的な画面を作成することができます。今後、フロントエンド開発をするときはまずMUIを使いたいなと思っています。

usestateとローディング処理

続いてローディング処理についてです。ユーザが画面遷移した際に食材や料理を表示することになるのですが、バックエンドからデータが送り届けられるまで若干のラグがあります。その間、真っ白な画面が表示されるとバグなのかラグなのか分からなくなります。

そこで、バックエンドにリクエストを送り何か返答があるまでは「ローディング中」と画面に表示することにしました。実装のためにはフラグ管理が必要になるのですが、これにはusestateを用いました。データをリクエストする直前でフラグをtrueにセットし返答があればfalseにセットします。あとは、このフラグがtrueの間は「ローディング中」と画面に表示すれば完成です。

useEffect(() => {
    setLoading(true);
    fetch(‘https://hogehoge’,
       //データを取得する処理
       .finally(() => setLoading(false));
  }, []);

Reactのキャッチアップをした際に、stateとusestateも学習していました。しかし、コンポーネントが内部で保持する「状態」を管理すると言われても、その使い道はよく分かっていませんでした。しかし、ローディング処理の実装を通して何かしらのフラグを用意したいときに非常に役立つことを理解できました。また、今回のシステムでは野菜や料理のデータをバックエンドから取得するわけですが、取得したデータを管理するためにもとても役立ちました。最早、Reactを使うのであればusestateを使わないことはないのではないかとさえ思ってしまいます。

datalist要素

今回のシステムには、作り置きした料理の消費スケジュールを記録する機能がついています。

スケジュール設定時にはタイトルを設定できるようにしてあり、当初は自由記述で設定するようにしていました。ところが、実際にシステムを使った方から「登録した料理の名前をスケジュールタイトルとして選択できると嬉しい」というフィードバックをいただきました。自由記述も選択式もどちらも使いたい需要があるかなと思い、両方でタイトルを設定できるよう変更することにしました。

今回はMUIを用いて画面の要素を実装していたので、自由記述と選択式の組み合わせもMUIを用いて実装しようとしました。ところが、試行錯誤してもなかなか実装が上手くいかず行き詰ってしまいました。とりあえず使えそうなものがないか検索していたところ、HTMLのdatalist要素を見つけました。datalist要素はinputに対してデータを渡すことができます。つまりinputとdatalistを組み合わせることで、自由記述と選択式を同時に実装できるということが分かりました。

当初はMUIなどを用いて実装しようと考えていたのですが、まさかHTMLにこんな便利な要素があるとは思いませんでした。HTMLもなかなか奥深いですね。

datalistを用いて実装したスケジュール登録画面。自由記述と選択式の両方でタイトルを決められる。

最後に

今回は研修期間中の自主開発を通して学んだことをご紹介しました。自分にとって初めての本格的なフロントエンド開発であり、不安もありましたが学び多い機会でした。基本的な文法や便利な機能なども勿論勉強になったのですが、少し頭を捻ることで実装できた内容が多く、良い経験を積むことができました。折に触れてReactを活用していきたいと思います。

ご覧いただきありがとうございます！この投稿はお役に立ちましたか？

役に立った役に立たなかった

0人がこの投稿は役に立ったと言っています。