# 20240716_Webアプリ（フロントエンド）開発のtips
(例：20210901_LT会を開催しました)
###### tags: `ブログ記事`

- [ ] 公開（ブログ公開担当者がいじるやつ）

太字斜体で書いてある内容を埋めて行ってください．
文章，画像は太字斜体の下の行に入れてください．
最初に書く時はREADMEを読んだら読むといいと思います．

<br>

## 表示されない情報
***書いた人の名前(自己紹介文と同じ名前)***
{
髙須賀　匠
}

***記事の簡単な説明(検索した時にタイトルの下に出てくる文章)***
{
本記事では、自分がフロントエンド技術をこれまで学んできて、これ便利だな〜って思った技術をtipsとしてまとめたものになります。
}

<br>

## 表示される部分
***サムネイル画像***
{

}

***カテゴリ***
以下の中から該当しそうなカテゴリを選択してください
※一つだけ選択してください
- [ ] 対外活動
- [ ] 活動の様子
- [x] メンバーの趣味
- [ ] 実務訓練体験記
- [ ] NUTMEG Advent Calendar 2023

***タグ***
以下の中から該当しそうなカテゴリを選択してください．当てはまる物がない場合は適宜追加してください.
言語
- [x] HTML
- [x] CSS
- [ ] Python
- [ ] Go
- [ ] Ruby
- [x] JavaScript
- [x] TypeScript
- [ ] Dart
- [ ] Rust
- [ ] Kotlin
- [ ] Swift

フレームワーク・ライブラリ
- [ ] Ruby on rails
- [ ] Vue.js
- [ ] Nuxt.js
- [x] React.js
- [x] Next.js
- [ ] Gin
- [ ] Flluter

ツール
- [x] GitHub
- [ ] ターミナル
- [ ] WSL
- [ ] Ubuntu
- [ ] Docker
- [ ] Raspberry Pi
- [ ] Figma

分野
- [ ] チームづくり
- [x] フロントエンド
- [ ] バックエンド
- [ ] インフラ
- [ ] Web-design
- [ ] API関係

---

# 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でフロントエンドを学んでいるみなさんは、ぜひ今後も勉強に励んでいきましょう。

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