JavaScript初心者が最初に覚えたい重要ポイントまとめ
JavaScriptを勉強し始めると、
覚えることがかなり多く感じます。
自分も最初は、
- 何から覚えればいいのか分からない
- Reactになると急に難しく感じる
- エラーの意味が分からない
という状態でした。
今回は、
実際に学習していて特に重要だと思った
JavaScriptの基礎を整理します。
1. 配列とオブジェクト
Reactではかなりよく使います。
オブジェクト
const user = {
name: "kouta",
age: 20
}
console.log(user.name)
データを「名前付き」で管理できます。
例えば：
- ユーザー情報
- 商品情報
- Todo情報
などでよく使います。
配列
const fruits = ["apple", "banana", "orange"]
複数のデータをまとめて管理できます。
2. map
Reactでは一覧表示によく使います。
const items = ["A", "B", "C"]
items.map((item) => {
console.log(item)
})
{
items.map((item) => (
<p key={item}>{item}</p>
))
}
Todo一覧や商品一覧などで頻出です。
3. 関数
JavaScriptでは関数をかなり使います。
function add(a, b) {
return a + b
}
最近はアロー関数をよく見ます。
const add = (a, b) => {
return a + b
}
短く書くこともできます。
const add = (a, b) => a + b
Reactではアロー関数を使う場面がかなり多いです。
4. 分割代入
Reactを勉強すると頻繁に見ます。
const user = {
name: "kouta",
age: 20
}
const { name, age } = user
これで、
user.name
と毎回書かなくてもよくなります。
5. スプレッド構文
Reactのstate更新でかなり重要です。
const user = {
name: "kouta",
age: 20
}
const newUser = {
...user,
age: 21
}
配列でも使えます。
const arr = [1, 2]
const newArr = [...arr, 3]
Reactでは「元のデータを直接変更しない」ことが大事なので、かなりよく使います。
6. filter と find
配列操作でよく使います。
filter
条件に合うものを取り出します。
const adults = users.filter(user => user.age >= 20)
find
条件に合う最初の1件を取得します。
const user = users.find(user => user.id === 1)
ECサイトの商品検索などでもよく使います。
7. 非同期処理（async / await）
API通信でかなり重要です。
const fetchData = async () => {
const response = await fetch("/api")
const data = await response.json()
console.log(data)
}
最初は難しく感じましたが、
- API取得
- Supabase
- DB通信
などでかなり使います。
8. 条件分岐
基本ですがかなり使います。
if (isLogin) {
console.log("ログイン済み")
}
Reactでは三項演算子もよく見ます。
isLogin ? "OK" : "NO"
9. イミュータブル（直接変更しない）
Reactではかなり重要です。
例えば：
user.name = "new"
のように直接変更すると、
Reactで意図しない動作になることがあります。
そのため、
const newUser = {
...user,
name: "new"
}
のように新しいデータを作ることが多いです。
最後に
JavaScriptは覚えることがかなり多いです。
自分も最初は、
「全部理解しないと開発できない」
と思っていました。
ただ実際は、
- 手を動かす
- 詰まったら調べる
- また作る
を繰り返すことで、
少しずつ理解できるようになってきました。
まずは全部暗記しようとするよりも、
実際にコードを書きながら覚えていくのが大事だと思います。