01 · 勉強を始めた理由見覚えはあるのに、説明できなかった

こんにちは、レッドです。部活でいろいろ作っていると、アイコに「こんな画面を作って」と頼むことがあります。できた画面を見て、「このボタンをもう少し大きく」「ここに写真も入れよう」と直していくんです。こんなふうにAIと会話しながらコードを作ることを、バイブコーディングと呼ぶそうです。

画面ができるとうれしいのに、説明を読むと何度も手が止まります。JavaScript、Node.js……。何度も見た名前だから知っているつもりでした。でも、それぞれ何をするのか説明しようとすると、言葉が出てこなかったんです。

キラリ

一つ質問したら、知らない言葉が三つ増えちゃった。

ネアもノートを開いてうなずきました。「私も名前だけだと混乱します。何をするものなのか、分けて書いてみませんか？」そこで四人で一つずつ調べて、分かったことを短い動画にまとめることにしました。アイコの説明を理解して、自分の作りたいものも、もっと伝えられるようになりたかったんです。

03 · 用語の意味を見てみよう書く言語、動かす環境、画面を作る道具

① JavaScriptはコードを書く言語

コンピューターに処理を伝えるには、決められた文法に従います。そのようなプログラミング言語の一つがJavaScriptです。次のコードは、30と20を足した結果を出力します。

console.log(30 + 20);

② Node.jsはJavaScriptを実行する環境

ファイルにコードを書いただけでは、計算は実行されません。Node.jsは、そのJavaScriptコードを実行できるプログラムです。このような実行環境をランタイムと呼びます。

マンガでは、コードをindex.jsというファイルに保存して、Node.jsで実行しました。だから文字を出力する画面に50が出たんです。今はコマンドを覚えるより、「書くことと実行することは別」と分かれば大丈夫です。

レッド

同じ種類の名前だと思ってたけど、役割が違ったんだね。

③ Reactは画面作りを助けるライブラリ

「プレイノート」のゲーム一覧を見てみましょう。各項目に、画像、ゲーム名、クリアしたかどうかが繰り返し出てきます。このまとまりを一度作って、ゲームの情報だけ入れ替えて使えたら便利ですよね。

このように、画面の一部分をまとまりとして作ったものをコンポーネントと呼びます。Reactは、コンポーネントを作ったり組み合わせたりするためのライブラリです。ライブラリは、プログラムを作るときに利用できるコードや道具の集まりと考えてください。

Reactが、このゲーム一覧を完成品として用意してくれるわけではありません。どんな情報やボタンを置くかは、自分たちで決めて作ります。

④ Next.jsはWebアプリの構成を助けるフレームワーク

ゲーム一覧を作ったら、「自分の記録」ページもほしくなりました。それぞれ別のアドレスで開き、ページ間を移動できるようにするには、アプリ全体の構成を考える必要があります。

Next.jsは、Reactを使ってWebアプリを作るためのフレームワークです。基本構造や共通機能を備えた枠組みで、複数のページを構成したり、アドレスに合った画面を表示したりすることを助けます。Webアプリは、ブラウザーで使うプログラムのことです。

ネア

ゲームの項目を作ることと、複数のページを構成することを分けると、分かりやすいですね。

枠組みがあっても、「自分の記録に何を保存するか」といった機能は、自分たちで決めて実装します。

それぞれ異なる役割の例です。すべてのプログラムで、この四つを必ず一緒に使う必要はありません。