Webアプリ（フロントエンド）開発のtips

はじめに

テスト期間中でいっぱい勉強しているみなさんの頭に追い討ちをかけるためにブログを作成しました。たかすかです。

最初に聞きたいことがあります。この中でフロントエンド勉強中って方は手を挙げてください！

みなさん、これまでさまざまな技術を学んできたと思います。しかし、技術を深く学んでいると今までのやり方って効率悪かったんだな、もっと簡単にする方法あったんだ！と思うことも多々あると思います。生成AIなんかはみなさんも良く使っていると思います。

この記事では、主にフロントエンド関連のいくつかの時短テクニックを簡単に実践できるものから順に、概要だけですが紹介していきます。皆さんがNUTMEGで開発する際や、ハッカソン、コンペに参加する際に役に立つと思います。

簡単テクニック

フロントエンドカリキュラムの卒業課題をクリアに必要な簡単なものが以下の3つです。

1. 統一されたアイコンが欲しい

ポートフォリオやWebアプリなど、見た目に力の入ったWebページを作る際、アイコンを使うことが多々あります。ボタンの横に添えたり、文字の代わりにアイコンを配置したりなど、見た目にいろんな影響を与えます。素人がアイコンを複数使うときは、大きさや雰囲気を合わせたアイコンにすることで統一感を出すことが大事です。

Boxicons
Font Awesome
React Icons
SVG Loaders
Bootstrap Icons

参考URL：https://qiita.com/TakahiroEq/items/07f2aaf593d971ab9a9c

2. ダミー画像の利用

ページ内に画像を表示する予定の場合、どんな大きさがページに画像を表示する上で綺麗に見えるのかを考える際に、ダミー画像を使うと良いです。実際の画像は色や背景色によって多少のバイアスがかかることがあり、特定の画像では綺麗に見えても、他の画像だと違和感を感じる場合があります。

参考サイトから提供されているダミー画像は、

<img src="https://placehold.jp/150x150.png" alt="Placeholder Image">

簡単に表示することができ、使い勝手が良いです。

参考URL：https://placehold.jp/

3. ブラウザの開発者モード

主にレスポンシブに対応したページを作成する際に、画面の縦横の大きさを変えて、ページの変化を見るときに使います。パソコンで見る場合、タブレットで見る場合、スマホで見る場合では、レイアウトは大きく異なり、それらに対応したページ作りをする際に重要なテクニックです。

中級テクニック

メンター勉強会もぼちぼち終了したペアなどもあると思います。そろそろ自分で何か作りたいなって思い始めると思います。そんな新入生も増えてきたのではないでしょうか？

そんな方は以下のテクニックがおすすめです。

1. console.log/console.traceによるエラー発見

この2つは適切にコード内にちらばめておくと、エラーが起きている場所が確実にわかります。もちろん、わざわざ書くコストを考えると微妙ではありますが、時間が足りないハッカソン中などは、エラーが起きたときにエラー箇所の特定に時間をかけるのは致命的です。エラー箇所がどうしてもわからない場合は書いてみると何かわかるかもしれません。

2. 環境構築「早期デプロイ・Github Actionsの導入」

Webアプリを作成した場合、最終的にはデプロイをしてみんなが見れるようにします。最初の環境構築時点で行うことにより、最後にデプロイがうまくいかない問題を解決できます。ローカル環境ではうまく動くのに、デプロイ環境でエラーが起きるのはあるあるです。

以下は無料で使えるデプロイサービスです。

vercel（簡単、prisma使うとバックとDBも使えるので無料でフルスタックWebアプリ作れる貴重なサービス、最近見たけどGoも書けるらしい）
netrify(おすすめ、ブランチごとのプレビューが見れるのでレビューしやすい)

また、多人数による別々の環境が入り混じった開発を行う場合はGithub Actionsも導入しましょう。eslintやprettierを使うと、PRを出した時点で自動でフォーマットエラーや文法ミスを改善してくれます。

3. starter templateなどのテンプレートプログラムを活用する

みなさんは、以下のコマンドを見たことありますか？

npx create-next-app@latest(ちなvercelが提供しています、感謝してコマンド打ちましょう)
npx create-react-app my-app(ちなmetaが提供しています、感謝してコマンド打ちましょう)

最低限のフロントの環境構築を行うコマンドです。

正直、上記コマンドの最低限のテンプレでは、1から作りすぎて短い開発期間では時間が足りなくなります。もう少し初期機能のあるテンプレ欲しいですよね。

そこで便利なのがvercelが提供してくれているstarter templatesです。最低限の環境だけでなく、プラスの機能もついてきながらvercelのデプロイされた環境まで一気にスキップできます。

ちなみにこれ使うと30分（実測）で自分のポートフォリオ公開までいけます。

フロントエンド技術に自信がある場合、このテンプレートでスキップし、CSSを全部書き換えて自分好みにしていくのも時短テクニックです。

参考URL：https://vercel.com/templates

注意

生成AIやテンプレートプログラムは、最低限（フロントエンドカリキュラム修了）の知識をつけてからの使用をおすすめします。最初から多用していると歪みます。
ハッカソンやLT会に出る前に1つで良いので1から作った個人制作物を作るのがおすすめです。
またテンプレートを使用する際は、最適化されたプログラムを見て混乱したり、変なコードを書き足すことで動かなくなったり、パフォーマンスが落ちる可能性があるので、普段からフロントエンド技術を趣味レベルで触ってないと厳しいかもしれません。

さいごに

本日は6つのテクニックを紹介させていただきました。ぜひ活用しながらメンターとの勉強を頑張ったり、開発してみてください。実はこの次には上級、超級まであります。機会があればまたお話ししたいです。

個人的に奥が深く汎用性の高いフロントエンド技術はすごい好きです。また、フロントエンドの技術を体系的に学んでくると、実はフロントエンドって生成AIに取って代わられにくく、エンジニアの作業が必要な技術だとわかります。

フロントエンド技術は移り変わりが激しい上に情報が多いので、普段からアンテナを張っていないと、ただ時間をかけてページが作れるだけの人になってしまいます。今、NUTMEGでフロントエンドを学んでいるみなさんは、ぜひ今後も勉強に励んでいきましょう。

テスト、課題もある中、忙しいのに聴きにきてくれてありがとう！