フロントエンドコースの進め方

Step 3 の変数は「箱が1つ」でした。実際のアプリは、たくさんのデータをまとめてあつかいます。

// 配列 … 順番つきの棚
let kudamono = ["りんご", "バナナ", "みかん"];
console.log(kudamono[0]);    // → りんご (番号は0から!)

// オブジェクト … 名札つきの引き出し
let watashi = { namae: "山田", suki: "猫" };
console.log(watashi.namae);  // → 山田

• 配列の全部に同じことをする for 文・forEach も、ここで学びます。
• 「クイズの問題を配列にして、何問でも増やせるようにする」(Step 3 授業6「作品づくり」の発展の続き)が練習課題です。

課題: 「お気に入りリスト」アプリ。配列に入れたデータを、forで全部画面に並べる。

API(エーピーアイ)は「プログラム向けの窓口」です。天気・ニュース・ポケモン図鑑まで、世の中には「データをください」と言うと返してくれる窓口がたくさん公開されています。

fetch("https://api.example.com/tenki?city=osaka")
  .then(function (res) { return res.json(); })
  .then(function (data) {
    console.log(data);   // 大阪の天気データが届く!
  });

• fetch(取ってくる)と、届くまで待つ書き方(.then)を学びます。「注文してから届くまで時間がかかる」ことへの対処で、非同期(ひどうき)処理と呼ばれます。
• 届くデータの形は JSON(ジェイソン)。実はユニット1で学んだオブジェクトとほぼ同じ形なので、怖くありません。

課題: 無料の天気API「Open-Meteo」(登録不要)から、今の気温を1つ取ってきて画面に表示する。

プロが必ず使う「変更履歴の保管庫」が Git(ギット)、それをインターネット上に置ける場所が GitHub(ギットハブ)です。

• 「セーブポイントを作りながら進む」というGitの考え方を、まずGitHub Desktop(マウスで使えるアプリ)で体験します。黒い画面は使いません。
• commit(セーブ)→ push(GitHubへ送る)の2つができれば、このコースでは十分です。

手順 ― 最初の1回 (公開まで)

1. GitHubのアカウントを作るブラウザで github.com →「Sign up」。メールアドレスがあれば無料です。ユーザー名は作品の住所(URL)の一部になるので、ローマ字で覚えやすいものにしましょう。
2. GitHub Desktopを入れるdesktop.github.com からダウンロードしてインストール → 起動して「Sign in to GitHub.com」→ 1で作ったアカウントでログインします。
3. リポジトリ(作品の保管箱)を作るGitHub Desktopのメニューで File → New repository。Name は半角英数字(例: tenki-app)にして「Create repository」。
4. 作品を入れてセーブ(commit)する3でできたフォルダに作品のファイルをコピーすると、GitHub Desktopに変更の一覧が出ます。左下にひとことメモ(例: 最初の版)を書いて「Commit to main」。これがセーブポイントです。
5. インターネットへ送る(push)上の「Publish repository」を押します。「Keep this code private」のチェックを外すと、公開の準備ができます。
6. GitHub Pagesをオンにするブラウザで自分のリポジトリのページを開き、Settings → Pages → Branch を「main」にして Save。数分待つと表示されるURLが、世界中から見られる、あなたの作品の住所です。

課題: Step 2・3 の作品(簡単LPやクイズなど)を1つGitHubに置いて、GitHub Pagesで公開し、そのURLをスマホで開いてみる。「自分の作品がインターネットにある」感動を味わってください。

見る人の半分以上はスマホです。@media (max-width: 600px) { ... }(メディアクエリ)を使って、画面の幅に合わせてデザインを切り替える方法を本格的に学びます。

• 「パソコンでは横並び、スマホでは縦並び」を Flexbox + メディアクエリで作る、実務の定番パターンを練習します。
• 開発者ツールのスマホ表示(Step 2 授業5「ブラウザと開発者ツール」)が、ここで毎日の道具になります。

課題: 自分の「簡単LP」をスマホ対応にする ― 次の3歩で進めます。

1. 見本で仕組みを見るlp-mihon.html (見本) をブラウザで開き、開発者ツールのスマホ表示 (Step 2 授業5) で画面の幅をせばめると、キャッチコピーの文字が小さくなることを確かめます。種明かしは、見本のCSSの一番下にある @media ブロックです。
2. 自分のLPに写すStep 2 授業7で作った 簡単LP の style.css の一番下に、次の形を写して、クラス名と数値を自分のページに合わせます。

   @media (max-width: 600px) {
     .catch { font-size: 22px; }          /* 大きすぎる文字を小さく */
     .cards { flex-direction: column; }   /* 横ならびを縦ならびに */
   }

3. 合格チェックスマホ表示で「横スクロールが出ない」「文字がつぶれず読める」の2つを満たせば合格です。直す場所に迷ったら、スタッフと一緒に画面を見ながら1か所ずつ進めましょう。