Open3ヶ月前にコメント追加14

React の勉強会の準備

アプリケーション

よこやまたく

2025年3月に勉強会で話すことになった。得意な分野で何でもいいと言われたので、何ができるかを考えていた。受講者の対象はプログラミング初学者。
最近勉強していたことが設計の話とか、直近のプロジェクトの反省からの改善策とかも考えてた。
どれも初学者向けじゃないなとなった。

よこやまたく

ハンズオンの勉強会にしたほうがいいと言われた。
ハンズオン（Hands-on 直訳は「手を置く（手を触れる）」）とは、体験学習を意味する教育用語。参加体験、実用的体験、インタラクティブ体験、実習、実験、体感など、体を使うことによる学習補助教育手法を指す。またトレーニングなどにおいては専門家から直接手取り足取り指導を受けることも意味する。
ハンズオン - Wikipedia

よこやまたく

 得意なこと自分が何が得意なのかを考えていた。
大規模の開発はしたことがない。逆に小規模のスクラッチ開発はたくさんしてきた。あと、フロントエンドの技術は長いことしてきた。
フロントエンドでちょっと難しい実装も何度かしている気はしている。逆に最適化はあまりしてきていない。特にテストコードを整理したりするのは苦手。

よこやまたく

 不明点初学者が何を学びたいのかがわからない。教えたいことはURLとかHTTPみたいなWebの基礎を教えたい。けど、この前の ハッカソン でコレジャナイ感はあった。
もっと動くものを作って楽しくなるを体験したいんだろうなと思う。

 葛藤見掛け倒しの勉強会にはしたくないのはある。勉強会に来た人が知識を持って帰って現場なり今後の学習のきっかけになってほしい。でも、派手じゃないと楽しくないし興味はなくなりそう。
ハッキョーセット

よこやまたく

 目標設定高すぎまずは与えられた時間内で話の筋が通ったもので来た人が少しでもなにか知識を得ているだけで十分なのにいわゆるウルトラCを狙ってしまってるおじさんになってる。

よこやまたく

React があるとき、ないとき

React があるときとないときを比較しながらReactの理解を深めたいと思っている。

React があるとき

import { useState } from 'react'

function App() {
  const [items, setItems] = useState([])
  const [input, setInput] = useState("")

  const append = () => {
    setItems([...items, input])
    setInput("")
  }

  const remove = (index) => {
    const nextTodos = todos.filter((_, i) => i !== index)
    setItems(nextTodos)
  }

  return (
    <div>
      <div>ToDoリスト</div>
      <div>
        <input
          type="text" value={input}
          onChange={(e) => setInput(e.target.value)} />
        <button onClick={append}>追加</button>
      </div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item} <button onClick={() => removeTodo(index)}>完了</button>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default App

React がないとき

  <div>
    <div>ToDoリスト</div>
    <div>
      <input type="text" id="input" />
      <button id="append">追加</button>
    </div>
    <ul id="list"></ul>
  </div>

document.addEventListener("load", () => {
  const input = document.getElementById("input");
  const appendButton = document.getElementById("append");
  const list = document.getElementById("list");

  function append(text) {
    const li = document.createElement("li");
    li.textContent = text;

    const removeButton = document.createElement("button");
    removeButton.textContent = "完了";

    removeButton.addEventListener("click", () => {
      li.remove();
    });

    li.appendChild(removeButton);
    list.appendChild(li);
  }  

  appendButton.addEventListener("click", () => {
    const text = input.value.trim();
    append(text);
    input.value = "";
  });
});

比較する

DOM 操作をしている
完成する構造が表されている
HTMLでも表示項目が書かれていて、JS内でも表示項目が書かれている

よこやまたく

やっぱり地味な気がする。これはコード読める人にとってわかりやすいだけやな。

あるときとないときの比較を図で説明する。

React があるとき

React がないとき

これは実装のコストが下がってる説明にはならない。
実装が楽になることを伝える必要がある。

よこやまたく

 本末転倒？そもそも Vanilla.js との比較はVanillaで書いたことがある人に取っての説明であって、初めてプログラミングする人にとっては馴染のないことな気がする。
その比較での説明は意味がない。
「コード見たらわかるやん」って発想が強すぎて問題がある。ずっとこれを繰り返している。

よこやまたく

 Supabase + Next.js + Vercel別案として完全にWebアプリ作る手もある。
でも、これしちゃうと現場で使われへん知識になることが多い。
Next.js プロジェクト作成
GitHub でリポジトリ作成
プッシュ
Vercel でアカウント作成
Vercel プロジェクト作成
デプロイ設定
supabase アカウント作成
supabase プロジェクト作成
認証の設定
認証機能追加
データベースの設定
データベースにアクセスする機能の実装
これは動いたけどなぁってなりそう。

よこやまたく

フロントエンドの技術だけで解決するハンズオン

BMI 計算
単価比較
Wi-Fi QRコード生成
プリクラ
単位計算
タイマーと日記
ゴミの日カレンダー
いろんな暦のカレンダー
〇〇なときのToDoリスト

よこやまたく

 現段階の方針結局のところハンズオンで作りながら説明する
バックエンドまですると何をしているのかわからなくなるのからフロントエンドに特化
作って面白いもの
実務経験につながるもの
API との通信はせずに LocalStorage で実装する
間にコラムとしていくつかの情報を伝える
JSON
URL
非同期通信
OOUI

とかかな

よこやまたく

現段階の勉強会の流れ

節	内容	時間
導入		10分
HTML & CSS & JS の基本	Webフロントエンドの基本を確認する	20分
React の基礎	クイックスタートを見る	30分
SPAのデプロイまで	GitHub Pages でデプロイする	30分
BMI計算機を作る	永続化が不要なツールを作る	30分
メモアプリを作る	永続化が必要なツールを作る	30分
顧客管理アプリを作る	永続化が必要なツールを作る	90分

よこやまたく

とりあえずそれぞれの内容を作ってみる。

よこやまたく

結局、ハンズオンしながら伝えたいことを伝えたいく流れがいいのかなと思ってる。

ログインするとコメントできます