これから作るアプリについて

• あなたのスマホで使えるアプリを作りましょう。
• App Store や Google Play などで提供されている多くのアプリとは異なり、今回作るものは実際のところは「ウェブサイト」です。
• といっても、見た目は普通のアプリとあまり変わりません。
• さらに知りたい方は「PWA（プログレッシブウェブアプリ）」と調べてみると良いでしょう！

画面構成

• 左側、真ん中、右側の3つの部分に分かれています。
• 右から左の順に見ていきましょう。

右側（プレビュー）

• アプリの完成形が確認できます。
• スマホの形になっています。

真ん中（エディタ）

• プログラムを書く場所です。
• ここにプログラムを書くと、リアルタイムで右側のプレビューに反映されます。
• よく見ると、縦に3つに分かれています。これらはそれぞれ役割の異なる言語で、上から順に
  • HTML（構造を表す役割）
  • CSS（見た目を変える役割）
  • JavaScript（動きを与える役割
• というものです。

左（マウス操作）

• マウス操作で作業を進めることができます。
• ここで行った変更は、真ん中のエディタに反映され、右側のプレビューにも反映されます。
• 先ほどの「真ん中（エディタ）」の項で出てきた3つの言語と対応するように、ここには
  • 構造
  • 見た目
  • 動き
• の各項目があります。

使ってみよう

例として、ボタンを押すと表示されている文章が変わるプログラムを作ってみましょう。

構造の操作

最初に、「構造」を操作してみましょう。

• 「構造」の部分から、"hello" という名前の箱を作ります。
• 「箱」の「つける名前」の欄に hello と入力して「追加」を押せば作ることができます。
• エディタで、中の文章を「ノックするとあいさつします！」に書き換えます。

見た目の操作

次に、「見た目」を操作してみましょう。

• 先ほど "hello" の箱を作った際に、CSS のエディタに #hello {/* この中で「hello」の見た目を調整 */} という記述が出現していました。
• その {} の中にカーソルを置いてから、「見た目」の「背景の色」で色を設定してみましょう。

動きの操作

最後に、「動き」を操作してみましょう。

• まず「構造」からボタンを作っておきます。名前は "knock" などとしておきましょう。ボタンの中の文章は「ノックする」などとしておきましょう。
• 次に、ボタンがクリックされたときの操作を設定していきます。「動き」の「クリック時の動作」に、今作った "knock" の名前を入れて追加します。
• そして、JavaScript のエディタに出現した knock.onclick = () => { // 「knock」がクリックされたときの動作 } の {} の中にカーソルを置き、「動き」の「文字を変える」に、最初に作った "hello" を入力して追加します。
• 最後に、JavaScript のエディタに追加された「この文字に変わります」の部分を「こんにちは！」などに書き換えましょう。
• プレビューの中の「ノックする」ボタンを押すと・・・文字が変わりましたか？

左側の一番下には「テンプレート」があります。これらをベースにして、自分だけのアプリを作りましょう！

その他

• 「保存」ボタンまたは Ctrl + S (Mac の場合、Command + S) で作業内容をブラウザに保存できます。
• 「削除」ボタンで、保存したデータをブラウザから削除できます。
• 各エディタで Ctrl + Z (Macの場合、Command + Z) を押すとひとつ戻すことができます。進むときは Ctrl + Shift + Z (Macの場合、Command + Shift + Z)を押します。
• スマホで使えるようにするための作業はスタッフが行うので、「これで完成！」と思ったらスタッフに声をかけてください。
• この解説は左上の「？」ボタンを押せば見ることができます。