React初心者UIデザイナーへ捧げるおすすめ勉強法〜GitHub Copilot 壁打ち〜

### この記事の趣旨
この記事はこんな方へ向けて書いています。
- **htmlとcssのコーディングはできるけど、JavaScriptはちょっと苦手**
- **でもNext.jsやNuxt.jsを使ったコードを修正しなくてはならない**
- **デザインだけでなく、フロントエンドも身につけてデザインエンジニアやPdMへなりたいけど、いまいち自信がない**

私は、上記３つに当てはまるデザインとフロントエンドの間で揺れ動くUIデザイナー兼マークアップエンジニアです。今までJavaScriptの書籍を何冊読み、Udemyの動画を何個視聴し、Qiitaの記事をどれだけ読んだことか・・・
それでもいまだにフロントエンドやってます！とは言い切れない自分がもどかしい:sob:
そんな現状を変えたいと思い、再学習を始め、ようやく挫折のその先へ行けそうな気がしている今日この頃ですっ！

ということで、最近少しJavaScriptやReactが理解できた！と思ったきっかけになった勉強法を紹介します。
題して「GitHub Copilot 壁打ち」勉強法です！

### GitHub Copilot 壁打ちとは？

:point_right: **５分考える＆コードを書いてわからなければ早々とプロンプトで答えを聞いて、その答えを深掘りしていく**
:point_right: **Copilotが教えてくれた例に沿ってコードを書く**
:point_right: **わからないメソッドやプロパティなどは１つずつ質問してわからないコードをなくす**
:point_right: **型を覚えるまで、コードを書く**

何だーそんなことかー:expressionless:

そうなんです。全然画期的ではない！
でも私は、この繰り返しで、理解度がぐんとアップしました。

その例として**名前付きエクスポート**と**デフォルトエクスポート**についての疑問を壁打ちした時のやり取りを紹介します。
「すぐに答えを聞くなんてけしからん」「罪悪感半端ねえ」「それじゃ応用が効かないよ」等々、賛否両論あると思いますが。。。
最初でつまずいて諦めてしまうことがないので、はじめの一歩にはオススメです！
参考までに〜

---

### Q. exportの書き方は２パターンあるよね？例を示せる？

```
// 名前付きエクスポート
export function add(a, b) {
  return a + b;
}

// デフォルトエクスポート
export default function add(a, b) {
  return a + b;
}
```

>**名前付きエクスポート**では、エクスポートされた関数や変数をその名前でインポートできます。一方、**デフォルトエクスポート**では、任意の名前でインポートできます。モジュールごとに**デフォルトエクスポート**は1つだけですが、**名前付きエクスポート**は複数持つことができます。


### Q. 以下は**名前付きエクスポート**だよね？
```
export const CatExplain = () => {
  const [catTitle, setCatTitle] = useState('シャム猫')
  const updateCatTitle = () => {
    setCatTitle('三毛猫')
  }

  return (
    <>
      <h1>これは{catTitle}です</h1>
      <button onClick={updateCatTitle}>猫切り替え</button>
    </>
  )
}
```
>はい、その通りです。このコードスニペットでは、CatExplainという名前の関数コンポーネントを**名前付きエクスポート**しています。

>**名前付きエクスポート**は、exportキーワードを使用して特定の名前で関数や変数をエクスポートします。これにより、他のファイルからこの名前を使用してインポートすることができます。

```
import { CatExplain } from './CatExplain';
```

>この方法では、同じファイルから複数の**名前付きエクスポート**を行うことが可能です。

### Q. **名前付きエクスポート**の場合は、変数でもいけるの？

>はい、その通りです。JavaScriptでは、変数も**名前付きエクスポート**することが可能です。以下に例を示します

```
export const myVariable = "Hello, world!";
```

>このようにエクスポートされた変数は、他のファイルから以下のようにインポートできます

```
import { myVariable } from './myModule';
```

>この方法では、同じファイルから複数の**名前付きエクスポート**を行うことが可能です。

### Q.次にdefaultエクスポートについて教えてほしい。defaultでエクスポートした値は、読み込みファイルにおいてはどんなふうに読み込むの？

>JavaScriptのモジュールシステムでは、export defaultを使用して**デフォルトエクスポート**を行うことができます。**デフォルトエクスポート**は、各モジュールで1つだけ存在できます。

>**デフォルトエクスポート**された値は、importステートメントを使用して他のファイルから読み込むことができます。**デフォルトエクスポート**の場合、インポート時には任意の名前を付けることができます。

>以下に、**デフォルトエクスポート**とそのインポートの例を示します

```
// myModule.js
export default function() {
  console.log('This is the default export');
}

// anotherFile.js
import myFunction from './myModule';

myFunction(); // Outputs: 'This is the default export'
```

>この例では、myModule.jsファイルで関数を**デフォルトエクスポート**しています。そして、anotherFile.jsファイルでその関数をmyFunctionという名前でインポートしています。**デフォルトエクスポート**された関数は、インポート時に任意の名前を付けることができます。

### Q. どうしてmyFunctionになったの？myModule.jsでは名前ないじゃん

>**デフォルトエクスポート**では、エクスポートされた値には元々の名前が必要ないため、インポートする際に任意の名前を付けることができます。

>以下の例では、myModule.jsから**デフォルトエクスポート**された関数をmyFunctionという名前でインポートしています。

```
// myModule.js
export default function() {
  console.log('This is the default export');
}

// anotherFile.js
import myFunction from './myModule';

myFunction(); // Outputs: 'This is the default export'
```

>myFunctionは、インポートする際に任意で付けた名前です。これは、**デフォルトエクスポート**された関数が元々名前を持っていなくても、または元々別の名前を持っていても、インポートする際に任意の名前を付けることができるという特性によるものです。

### Q. なるほど。ではmyModule.js側でエクスポートできるdefaultエクスポートは１つだね。

>はい、その通りです。各モジュールでは、export defaultを使用して**デフォルトエクスポート**を1つだけ行うことができます。**デフォルトエクスポート**は、そのモジュールの主要なエクスポート（つまり、他のモジュールが主に利用するであろう機能や値）を表すことが一般的です。

>ただし、**名前付きエクスポート**（exportキーワードのみを使用したエクスポート）については、1つのモジュールから複数行うことが可能です。これにより、モジュールは複数の関数や値をエクスポートできます。

>**デフォルトエクスポート**と**名前付きエクスポート**は、必要に応じて組み合わせて使用することができます。

### Q. なるほど。わかったよ！そうなると、名前付きエクスポートで１つだけ読み込む方がよりわかりやすいね。

>はい、その通りです。**名前付きエクスポート**は、エクスポートされた値が何であるかを明示的に示すため、コードの可読性を高めることができます。また、**名前付きエクスポート**を使用すると、モジュールから複数の値をエクスポートでき、それぞれを個別にインポートすることが可能です。

>ただし、**デフォルトエクスポート**も有用な場合があります。例えば、モジュールが１つの主要な機能や値だけをエクスポートする場合や、エクスポートする値の名前が他のモジュールで一貫していなくても問題ない場合などです。

>どちらのエクスポート方法を使用するかは、プロジェクトの要件や個々の開発者の好みによります。

###  まとめ
答えをコピペして終わりではダメですが、答えを噛み砕いて実際にコードを書く！毎日書く！この繰り返しで確実に理解度がアップしました！

もちろんGitHub Copilotも完璧ではないです。
そんな時はブラウザのconsole画面がエラーを出してくれます。
結果的に、エラーに向き合う習慣も身につきます。

いや〜、いい時代です。
GitHub Copilotガンガン使っていきたいです:fist:
以上、「React初心者UIデザイナーへ捧げるおすすめ勉強法〜GitHub Copilot 壁打ち〜」でした。