この記事の趣旨
この記事はこんな方へ向けて書いています。
- htmlとcssのコーディングはできるけど、JavaScriptはちょっと苦手
- でもNext.jsやNuxt.jsを使ったコードを修正しなくてはならない
- デザインだけでなく、フロントエンドも身につけてデザインエンジニアやPdMへなりたいけど、いまいち自信がない
私は、上記３つに当てはまるデザインとフロントエンドの間で揺れ動くUIデザイナー兼マークアップエンジニアです。今までJavaScriptの書籍を何冊読み、Udemyの動画を何個視聴し、Qiitaの記事をどれだけ読んだことか・・・
それでもいまだにフロントエンドやってます！とは言い切れない自分がもどかしい
そんな現状を変えたいと思い、再学習を始め、ようやく挫折のその先へ行けそうな気がしている今日この頃ですっ！
ということで、最近少しJavaScriptやReactが理解できた！と思ったきっかけになった勉強法を紹介します。
題して「GitHub Copilot 壁打ち」勉強法です！
GitHub Copilot 壁打ちとは？
５分考える＆コードを書いてわからなければ早々とプロンプトで答えを聞いて、その答えを深掘りしていく
Copilotが教えてくれた例に沿ってコードを書く
わからないメソッドやプロパティなどは１つずつ質問してわからないコードをなくす
型を覚えるまで、コードを書く
何だーそんなことかー
そうなんです。全然画期的ではない！
でも私は、この繰り返しで、理解度がぐんとアップしました。
その例として名前付きエクスポートとデフォルトエクスポートについての疑問を壁打ちした時のやり取りを紹介します。
「すぐに答えを聞くなんてけしからん」「罪悪感半端ねえ」「それじゃ応用が効かないよ」等々、賛否両論あると思いますが。。。
最初でつまずいて諦めてしまうことがないので、はじめの一歩にはオススメです！
参考までに〜
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ガンガン使っていきたいです
以上、「React初心者UIデザイナーへ捧げるおすすめ勉強法〜GitHub Copilot 壁打ち〜」でした。