<h2 id="h8d027c8ed3">はじめに</h2><p>私が運営する【Developers Guild】では毎月イベントを開催しております。<br>今回は初となる<strong style="background-color:#fff491">Next.js勉強会</strong>を開催いたしました！<br><a href="https://devguil.connpass.com/event/276631/" target="_blank" rel="noopener noreferrer">https://devguil.connpass.com/event/276631/</a><br>主催はReactおじさんです！<br><a href="https://twitter.com/react_nextjs" target="_blank" rel="noopener noreferrer">https://twitter.com/react_nextjs</a><br><br>今回は各グループでテーマを決めてディスカッション。<br>ディスカッション・発表共にレベルが高くとても刺激の多い会になりました！<br>参加者の皆さまありがとうございます！<br><br>各グループの発表資料は下記にまとめているので是非ご覧ください！</p><h2 id="hd6a86a321f">発表資料</h2><h3 id="h776e83e314">A「Next.js基礎」チーム</h3><p><a href="https://lavish-rise-c94.notion.site/66bea242851a4d50abe5e898a55eb4a5" target="_blank" rel="noopener noreferrer">https://lavish-rise-c94.notion.site/66bea242851a4d50abe5e898a55eb4a5</a></p><h3 id="h8543143416">B「レンダリング &amp; CSS」チーム</h3><p><a href="https://wirehaired-honesty-37c.notion.site/Next-js-b4e4b5139c7e45389fe1ae73d9d8f2fc#e6cf3bc89294484ba6f55e05189f81d1" target="_blank" rel="noopener noreferrer">https://wirehaired-honesty-37c.notion.site/Next-js-b4e4b5139c7e45389fe1ae73d9d8f2fc#e6cf3bc89294484ba6f55e05189f81d1</a></p><h3 id="h32c546b639">C ※解散</h3><p>※ メンバーが集まらなかったので解散</p><h3 id="hcdd45e77b2">D「App Router &amp; レンダリング」チーム</h3><p><a href="https://docs.google.com/document/d/1bqfNYaI4N84vhgfbB2KnnwG4aSJcGBsbNvq77CcVSDc/edit" target="_blank" rel="noopener noreferrer">https://docs.google.com/document/d/1bqfNYaI4N84vhgfbB2KnnwG4aSJcGBsbNvq77CcVSDc/edit</a></p><h3 id="h707dd9cfc1">E「App Router &amp; fetch」チーム</h3><p><a href="https://www.notion.so/fd35acd401b54657a211ed710311fc9f" target="_blank" rel="noopener noreferrer">https://www.notion.so/fd35acd401b54657a211ed710311fc9f</a></p><h3 id="h4a46ee9028">F「Next.js環境構築 &amp; データフェッチ」チーム</h3><p>こちらのグループはNext.jsの環境構築を行い、データフェッチして描画するまでを実際のエディタを共有しながら実施！<br>最終的にはタイムオーバーとなりましたが、途中経過・最終ゴール・学びを共有頂きました！<br>何が理解できて / 何が理解できなかったか のまとめが素晴らしかったです！<br>※資料なし</p><h2 id="h8d78e14043">感想</h2><h3 id="hc42c8902df">レベルが高すぎるんじゃ!!</h3><p>今回のイベントを一言で言うとコレです。<br>フロントエンドに強い化け物みたいな方がたくさん。。。<br>会話の質が高すぎて私自身、置いてけぼり感を食らっていました。笑<br><br><strong style="background-color:#fff491">App Directory</strong>の話で終始一貫すると思っていましたが、「App Directoryで何が良くなるか」「fetch戦略」「キャッシュ戦略」など、とても深い議論がされていました！<br><br><strong style="background-color:#fff491">CSS in JS</strong>についてもめちゃめちゃ深い議論がされておりました！<br>セカヤサさんが綺麗にまとめてくださっているので是非覗いてみてください！</p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【Next.jsのCSSまとめ】<br><br>結論：CSS modules、Tailwind CSSなどピュアなCSSに近いものが良さそう<br><br>まず、appディレクトリを採用するかどうかで変わる部分がある。<br><br>採用しないなら割と好みで選んでよさそう。<br><br>採用するなら、多くのCSS-in-JSは相性が悪い。<br>runtime…</p>&mdash; セカヤサフロントエンジニア💻小林 秀樹 (@hideki_climax) <a href="https://twitter.com/hideki_climax/status/1648463802172854274?ref_src=twsrc%5Etfw">April 18, 2023</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><h3 id="h214f6657a5">各グループ発表上手すぎ!!</h3><p>正直、各グループの発表の質が高すぎて「一つ一つが講座になるのでは!??」と感じました。<br><strong style="background-color:#fff8b6">短時間で理解を深めて共有</strong>し、それを<strong style="background-color:#fff8b6">他者にわかりやすく説明</strong>する。<br>本当にレベルが高くて驚きを隠せませんでした。<br>(多分、皆さん人前で話すの慣れてるんでしょうね）</p><h3 id="had14cb5993">手を動かすの良いね!!</h3><p>5グループ中1グループは実際にエディタを共有して、Next.jsの環境構築からデータフェッチまでを行なっていました。<br>ドキュメントを読み進めるのも大事ですが、<strong style="background-color:#fff8b6">実際に手を動かして挙動を確認する</strong>。これに勝るものはないですね！<br>発表もめちゃめちゃ面白かったです！笑<br><br>次回のイベントではお題を出してみんなでコーディングが出来たらなって思ったりしています。</p><h3 id="h8a1e81f01f">App Directory完全に理解した!!</h3><p>Ryoさんが実際にApp Directoryベースで開発したプロダクトを公開/運用されていたので「俺ならこう設計するぜ！」を教えて頂きました！<br><span style="background-color:#d1ecf3">なんか便利になるんだなぁ</span>ぐらいの認識でしたが全く違いますね。<br><strong style="background-color:#fff8b6">Server Components</strong><span style="background-color:#fff8b6">が前提</span>の話になるので世界観自体が変わるのが理解できました！<br><br>Ryoさんのアカウントはこちらです。是非フォローを！<br><a href="https://twitter.com/ryocacode" target="_blank" rel="noopener noreferrer">https://twitter.com/ryocacode</a></p><h2 id="h751ccae4f7">参加者の声</h2><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">参加してきました！！お話しできて皆さんありがとうございましたー！！！<br>久しぶりに勉強会でこんなに技術の話できて、とっても楽しかった&amp;勉強になりました！！ <a href="https://t.co/I66s41e2BP">https://t.co/I66s41e2BP</a></p>&mdash; ユウト (@codeyy_dev) <a href="https://twitter.com/codeyy_dev/status/1647261210231046145?ref_src=twsrc%5Etfw">April 15, 2023</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">昨日のNextJSのイベント、楽しかったなぁ〜。<br>特に練習のアップの後の試合本番が特に。<br>みんな、質が高いし、色々と勉強になったゾ。<br>きちんと力にしよう。そうしよう。<br>わーーーーーい。</p>&mdash; DFRD (@dfrd) <a href="https://twitter.com/dfrd/status/1647405337929191424?ref_src=twsrc%5Etfw">April 16, 2023</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">参加してきましたー<br>エンジニアの知り合いたくさん増えましたし、モチベもめっちゃ上がって最高でした！<br><br>それに何より今回は懇親会参加できたので良かった...！笑<a href="https://twitter.com/react_nextjs?ref_src=twsrc%5Etfw">@react_nextjs</a> <a href="https://twitter.com/ryocacode?ref_src=twsrc%5Etfw">@ryocacode</a> <a href="https://twitter.com/WEBERYOTA?ref_src=twsrc%5Etfw">@WEBERYOTA</a> <br>企画・運営ありがとうございました！！<br>またよろしくお願いします！ <a href="https://t.co/Rt9gylQoUP">https://t.co/Rt9gylQoUP</a></p>&mdash; けんや (@k_e1sh1n) <a href="https://twitter.com/k_e1sh1n/status/1647295190212947969?ref_src=twsrc%5Etfw">April 15, 2023</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">本日はありがとうございました！<br>Next.jsのApp DirectoryとReact Server Componentsの理解がだいぶ深まりました。 <a href="https://t.co/NLElUpkjrX">https://t.co/NLElUpkjrX</a></p>&mdash; カルキチ 副島｜Karukichi Soejima (@karukichi_yah) <a href="https://twitter.com/karukichi_yah/status/1647227926121971713?ref_src=twsrc%5Etfw">April 15, 2023</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ありがとうございましたー！楽しかったです！ <a href="https://t.co/6DG4F1p2Lu">https://t.co/6DG4F1p2Lu</a></p>&mdash; sumiren (@sumiren_t) <a href="https://twitter.com/sumiren_t/status/1647225927284432897?ref_src=twsrc%5Etfw">April 15, 2023</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><h2 id="h1afe451c43">さいごに</h2><p>今回はNext.jsをテーマにしたイベントを開催いたしました。<br>正直、参加者の皆さんレベルが高すぎるわ技術のキャッチアップスピードが早すぎるわで「何でそんなこと知ってるの？」と終始感じていました。皆さんの技術愛、すげぇっす。。。<br><br>昨年フロントエンド勉強会を開きましたが、今回はよりテーマが限定的で皆さんの目線が合って良い会だったかなと思います。<br>ドキュメントだけだと伝わらないリアルな情報はやはり重要だなと感じました。<br>今後はディスカッションだけでなく、実際に手を動かすようなコンテンツを入れていこうかなと考えています。<br><br>以上。簡単なレポートでした。<br>最後までご覧くださりありがとうございます。</p>

4月15日に開催したNext.js勉強会のレポート記事です。

【4月15日@神田】Next.js勉強会・イベントレポート〜 未知の機能に挑め！ 春のNext.js勉強会！ 〜

<h2 id="h8d027c8ed3">はじめに</h2><p>タイトル通りとなりますがChatGPTでReactのコンポーネントが開発出来るかトライしてみました。<br>今回は実験を兼ねて、なるべく手修正を施さないようにし、プロンプト駆動で全て改善出来るかのチャレンジをしました。<br>題材として当ブログのページトップに使えそうな記事スライダーが表示される、カルーセルコンポーネントの実装を試しています。<br><br>結論から言ってしまうと「<span style="background-color:#fff8b6">出来ないことはなさそう！</span>」「<span style="background-color:#fff8b6">一から開発するより遥かに早い！</span>」ということが分かりました。<br>実際のプロンプトと出力されたコードを載せていこうと思うので是非最後までご覧くださいませ。<br>※<strong style="color:#cf3e51">GPT-4 (ChatGPT PLUS) </strong><span style="color:#cf3e51">で検証しています。</span></p><h2 id="h7e4c66d44f">トライ1</h2><h3 id="h0bed4caacf">Reactでカルーセルが表示されるコンポーネントを書いて</h3><p>まず手始めに雑な指令をしてみようと思います。<br>実際にChatGPTに送ったプロンプトがこちらです。</p><pre><code>// Reactでカルーセルが表示されるコンポーネントを書いて
// TailwindCSSベースで実装して
// TypeScriptベースで実装して</code></pre><p>上記の出力がこちら<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/93667f74c1134d17a4843c8393912833/chatgpt-react-carousel-1.webp" alt=""><br>(コンポーネントのコード)</p><pre><code>// CarouselComponent.tsx

import React from 'react'
import { Carousel } from 'react-responsive-carousel'
import 'react-responsive-carousel/lib/styles/carousel.min.css'
import './CarouselComponent.css'


type CarouselItem = {
  id: number
  image: string
  altText: string
}


interface CarouselComponentProps {
  items: CarouselItem[]
}


export const CarouselComponent: React.FC&lt;CarouselComponentProps&gt; = ({
  items,
}) =&gt; {
  return (
    &lt;div className="carousel-container"&gt;
      &lt;Carousel
        showThumbs={false}
        infiniteLoop
        autoPlay
        showStatus={false}
        showIndicators={false}
        interval={5000}
      &gt;
        {items.map((item) =&gt; (
          &lt;div key={item.id} className="carousel-item"&gt;
            &lt;img
              src={item.image}
              alt={item.altText}
              className="w-full h-full object-cover"
            /&gt;
          &lt;/div&gt;
        ))}
      &lt;/Carousel&gt;
    &lt;/div&gt;
  )
}</code></pre><p>(呼び出し部分のコード)</p><pre><code>// App.tsx
import React from "react";
import CarouselComponent from "./CarouselComponent";

const items = [
  {
    id: 1,
    imageUrl: "https://example.com/image1.jpg",
    title: "Image 1",
  },
  {
    id: 2,
    imageUrl: "https://example.com/image2.jpg",
    title: "Image 2",
  },
  {
    id: 3,
    imageUrl: "https://example.com/image3.jpg",
    title: "Image 3",
  },
];

const App: React.FC = () =&gt; {
  return (
    &lt;div className="App"&gt;
      &lt;header className="App-header"&gt;
        &lt;h1 className="text-4xl font-bold mb-6"&gt;Carousel Demo&lt;/h1&gt;
      &lt;/header&gt;
      &lt;main className="w-full h-screen p-4"&gt;
      &lt;CarouselComponent items={items} /&gt;
      &lt;/main&gt;
    &lt;/div&gt;
  );
};
      
export default App;</code></pre><p><br>....すごい...笑<br>ただ、<span style="background-color:#fae6b5">react-responsive-carousel</span>というライブラリを使おうとしていたので、こちらを使わないように再度指示してあげます。<br>(ライブラリまでよしなに選んでくれるの、これはこれで凄すぎだろ...)</p><h3 id="h9728f0474f">react-responsive-carousel を使わずCSSは独自実装して</h3><p>てな訳で修正のプロンプトを投げてあげます。</p><pre><code>react-responsive-carousel を使わずCSSは独自実装して</code></pre><p>(出力がこちら)</p><pre><code>// Carousel.tsx

import React, { useState, useEffect, useRef } from 'react'

type CarouselItem = {
  id: number
  image: string
  altText: string
}

interface CarouselProps {
  items: CarouselItem[]
  interval?: number
}

export const Carousel: React.FC&lt;CarouselProps&gt; = ({
  items,
  interval = 5000,
}) =&gt; {
  const [activeIndex, setActiveIndex] = useState(0)
  const timeoutRef = useRef&lt;NodeJS.Timeout&gt;()

  function resetTimeout() {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current)
    }
  }

  useEffect(() =&gt; {
    resetTimeout()
    timeoutRef.current = setTimeout(
      () =&gt;
        setActiveIndex((prevIndex) =&gt;
          prevIndex === items.length - 1 ? 0 : prevIndex + 1
        ),
      interval
    )

    return () =&gt; {
      resetTimeout()
    }
  }, [activeIndex, interval, items.length])

  return (
    &lt;div className="relative overflow-hidden"&gt;
      &lt;div className="carousel"&gt;
        {items.map((item, index) =&gt; (
          &lt;div
            key={item.id}
            className={`carousel-item absolute w-full h-full top-0 transition-opacity duration-500 ease-in-out ${
              index === activeIndex ? 'opacity-100' : 'opacity-0'
            }`}
          &gt;
            &lt;img
              src={item.image}
              alt={item.altText}
              className="w-full h-full object-cover"
            /&gt;
          &lt;/div&gt;
        ))}
      &lt;/div&gt;
    &lt;/div&gt;
  )
}</code></pre><p>ぉお！！ライブラリが外れてピュアなクラスに置き換わっている！！<br><br>しかし、、、一見動きそうな感じがしたのですが<strong style="color:#d75969">実際に呼び出してみると表示がされませんでした</strong>。<br>DOM自体は作られていますが、余計なCSSが当たっているようですね。<br>表示されないとお話にならないので、とりあえず修正のプロンプトを投げてみます。</p><h3 id="h084aeb0967">表示されないから修正して</h3><pre><code>表示されないから修正して</code></pre><p>※画像は表示されましたが、カルーセルの挙動がなかったので一旦スキップ。</p><h3 id="h3e29763999">画像の表示サイズを横300px縦200pxで表示しつつ、横並びで画像が動くよう修正して</h3><pre><code>画像の表示サイズを横300px縦200pxで表示しつつ、横並びで画像が動くよう修正して</code></pre><p>ここまで指定してあげるとようやく3枚の画像が一定間隔で切り替わる挙動になってくれました。<br>(1枚目)<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/56d2f22c18b24b2684414da0d5196bd6/chatgpt-react-carousel-2.webp" alt=""><br>(2枚目)<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/126b77f356024dd682efbdf0a3d261b1/chatgpt-react-carousel-3.webp" alt=""><br>(3枚目)<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/b1bbda719a0f4e3a936c824bda02b51a/chatgpt-react-carousel-4.webp" alt=""><br>画像だとわかりずらいですが、上記の3枚がスムーズに切り替わる挙動となっていました。<br>しかし目的のものとちょっと違ったので再度修正してみます。</p><h3 id="ha4c256c351">画像サイズがバラバラでも同じサイズに自動調整されるよう修正して</h3><pre><code>画像サイズがバラバラでも同じサイズに自動調整されるよう修正して</code></pre><p>※挙動の変化なし</p><h3 id="h64100c63b0">横に3枚表示されて真ん中の1枚だけが少し大きく表示されるよう修正して</h3><pre><code>横に3枚表示されて真ん中の1枚だけが少し大きく表示されるよう修正して</code></pre><p><span style="color:#cf3e51">※これ以降は出力されるコードにほぼ変化が起きなく、挙動の改善が見られませんでした</span><br><br>ここまでやってみて多少の改善はされましたが、根本的な挙動に変化が見られなかったのでプロンプトを大幅に変えてみます。</p><h2 id="hbb36d986bf">トライ2</h2><p>挙動やルールを明示的に与えて、かつ項目毎にまとめるようプロンプトを大幅に変更してみました。</p><h3 id="hdcb1ee614f">改善版: プロンプト</h3><p>実際に投げたプロンプトはこちらです。</p><pre><code>ブログの一番上に挿入するパーツを実装してください。

要件は以下の通りです。

# ブログトップ・カルーセル
1. ブログの一番上に挿入するカルーセルのコンポーネント実装

## 要件: 1
1. 見た目
  1-1. 画像が3個、横に並ぶように実装してください。
    1-1-1. 縦：横比は全て、1:1.78
	1-2. 真ん中が少し大きく、両サイドが少し小さく表示してください。
		1-2-1. 真ん中: 横300px
    1-2-2. 両サイド: 横200px
  1-3. それぞれの画像のmarginは16pxにしてください。
  1-4. border-radiusは5pxにしてください。
  1-5. サイズがバラバラな画像でも同じサイズに調整してください。
  1-6. コンポーネント全体の大きさは画面幅いっぱいに広がるようにしてください。
  1-7. 画像は全て画面内に表示してください。
  1.8. 画面の中央に配置してください。

2. 動き
  2-1. 画像を横にスライドして並び替えてください。
		2-1-1. 待機時間はPropsで指定
    2-1-2. 常に真ん中が大きくなるよう表示
	2-2. スライド時間は1秒間にしてください。
  2-3. 滑らかに横に画像をスライドしてください。

## 要件: 2
1. Reactで実装してください。
  1-1. Functional Componentベース
  1-2. export default を使用
2. TypeScriptベースで実装してください。
3. CSSはTailwind CSSで実装してください。
4. Propsは以下の通りにしてください。
  4-1. images: 画像の path と alt を指定
  4-2. interval: カルーセルの待機時間
5. ライブラリは使わず独自のCSSで実装してください。</code></pre><p><br></p><h3 id="hbb3e37002b">改善版: アウトプット</h3><pre><code>// Carousel.tsx
import React, { useState, useEffect } from 'react'
import { useWindowSize } from './useWindowSize'

interface CarouselProps {
  images: { path: string; alt: string }[]
  interval: number
}

export default function Carousel({ images, interval }: CarouselProps) {
  const [currentIndex, setCurrentIndex] = useState(0)
  const windowSize = useWindowSize()

  useEffect(() =&gt; {
    const timer = setTimeout(() =&gt; {
      setCurrentIndex((currentIndex + 1) % images.length)
    }, interval)
    return () =&gt; clearTimeout(timer)
  }, [currentIndex, interval])

  return (
    &lt;div
      className="w-full h-auto flex items-center justify-center overflow-hidden relative"
      style={{ height: 'calc(300px / 1.78)' }}
    &gt;
      {images.map((image, index) =&gt; (
        &lt;img
          key={index}
          src={image.path}
          alt={image.alt}
          className={`absolute object-cover ${
            index === currentIndex ? 'w-72 h-auto' : 'w-48 h-auto'
          } rounded-md mx-4 transition-all duration-1000 ease-in-out transform ${
            currentIndex === index ? 'scale-125' : ''
          }`}
          style={{
            left: `calc(50% - ${(index - currentIndex) * (200 + 16)}px)`,
            zIndex: index === currentIndex ? 10 : 1,
          }}
        /&gt;
      ))}
    &lt;/div&gt;
  )
}</code></pre><p><br></p><pre><code>// useWindowSize.ts
import { useState, useEffect } from 'react'

interface WindowSize {
  width: number
  height: number
}

export function useWindowSize(): WindowSize {
  const [windowSize, setWindowSize] = useState&lt;WindowSize&gt;({
    width: window.innerWidth,
    height: window.innerHeight,
  })

  useEffect(() =&gt; {
    const handleResize = () =&gt; {
      setWindowSize({ width: window.innerWidth, height: window.innerHeight })
    }

    window.addEventListener('resize', handleResize)
    return () =&gt; window.removeEventListener('resize', handleResize)
  }, [])

  return windowSize
}</code></pre><p>...!!???<br>カスタムhooks作って来たぞこの子!!!<br>実際に動かしてみたのがこちら<br>(1)<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/1e58c69f869a407391edd5be9579dddb/chatgpt-react-carousel-5.webp" alt=""><br>(2)<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/fcab502780864542b1219a4fea863cd3/chatgpt-react-carousel-6.webp" alt=""><br>(3)<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/560ae98a235946df8f255ec693435e6c/chatgpt-react-carousel-7.webp" alt=""><br>だいぶ良い感じ！<br>滑らかに動いて、ピックアップされる画像がぬるっと大きくなる！<br>期待した挙動にかなり近くなりました！<br><br>しかし、<strong style="color:#df7785">3枚の位置関係が画面中央に配置されず動的に左右に寄ってしまう</strong>ため、このあたりは微修正が必要となりそうです。<br>この後もプロンプトを変更してみましたが、あまり改善がされなかったので、今後の宿題にしようと思います！</p><h2 id="h1afe451c43">さいごに</h2><p>今回はChatGPTを使ってプロンプト駆動開発にチャレンジしてみました。<br>結論は冒頭に述べた通り「<span style="background-color:#fff491">出来ないことはなさそう</span>」。<br>いくつか試して分かったのは、「プロンプトにはコツがあり、<span style="background-color:#fff491">なるべく具体的に、かつ解釈の幅を持たせない</span>」ことで期待通りのアウトプットに近づきそうだということです。<br><br>あくまでベースはChatGPTに、最終的なチェックと微修正を手作業にすれば爆速で開発が出来そうですね！<br>一発で期待通りの出力をさせるのが理想なので、引き続きプロンプトの研究は続けようと思います！<br><br>以上。最後までご覧いただきありがとうございました。</p>

今話題のChatGPTを導入してReactのコンポーネント開発にトライしてみました。

ChatGPTを使ったReactカルーセル開発【プロンプト駆動開発】

<h2 id="h8d027c8ed3">はじめに</h2><p>私が運営する【Developers Guild】では定期的にイベントを開催しております。<br>今回から新たに運営として参加してくださったRyoCaさん主催のイベントとなります！<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/5ef94dda51fd4e48a69e84467b8cca36/RyoCa.webp?w=500&amp;h=500" alt=""><br><a href="https://twitter.com/ryocacode" target="_blank" rel="noopener noreferrer">https://twitter.com/ryocacode</a><br>今回は初の個人開発をテーマにした勉強会を開催しました。<br><a href="https://devguil.connpass.com/event/273629/" target="_blank" rel="noopener noreferrer">https://devguil.connpass.com/event/273629/</a><br>LTが面白かっただけでなく、ディスカッション時の意見交換も活発でとても学びが多かったです！<br>下記に登壇者の資料をまとめているので是非ご覧頂ければと思います。</p><h2 id="h0ea4671ca4">LT登壇者</h2><h3 id="h119019e95d">ROM1000「AWS Amplifyに入門して個人開発への意欲を上げてみる」</h3><p><a href="https://speakerdeck.com/rom1000/aws-amplifyniru-men-sitege-ren-kai-fa-henoyi-yu-woshang-getemiru" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/rom1000/aws-amplifyniru-men-sitege-ren-kai-fa-henoyi-yu-woshang-getemiru</a><br><a href="https://twitter.com/rom1000_yksbpn" target="_blank" rel="noopener noreferrer">https://twitter.com/rom1000_yksbpn</a></p><h3 id="h71bd04d1f7">fopiyone「個人で始めるマッチングサービス」</h3><p><a href="https://twitter.com/fopiyone" target="_blank" rel="noopener noreferrer">https://twitter.com/fopiyone</a></p><h3 id="h1c5c624f2a">ohishikaito「相席屋の人数状況をグラフで可視化してみた」</h3><p><a href="https://docs.google.com/presentation/d/1T503eRTuBwS2IrFamEuzYhs__3z-_MujRVGdUJAZJjE/edit" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/1T503eRTuBwS2IrFamEuzYhs__3z-_MujRVGdUJAZJjE/edit</a><br><a href="https://twitter.com/kaito_program" target="_blank" rel="noopener noreferrer">https://twitter.com/kaito_program</a></p><h3 id="hc49645212f">厚木拓哉「個人開発のサービスの広め方」</h3><p><a href="https://twitter.com/takuya911_" target="_blank" rel="noopener noreferrer">https://twitter.com/takuya911_</a></p><h3 id="h6ad69475a7">nozomi_iida0106「個人ブログを自作してみた」</h3><p><a href="https://docs.google.com/presentation/d/1KayMOR0sm5ulpkdUBBaAMV1Dcpwc127QB6QwOwJsZPI/edit#slide=id.p" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/1KayMOR0sm5ulpkdUBBaAMV1Dcpwc127QB6QwOwJsZPI/edit#slide=id.p</a><br><a href="https://twitter.com/nozo_i0106" target="_blank" rel="noopener noreferrer">https://twitter.com/nozo_i0106</a></p><h2 id="h751ccae4f7">参加者の声</h2><blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://t.co/AUiQNI18A9">https://t.co/AUiQNI18A9</a><br>昨日こちらの交流会で、開発途中の相席屋のグラフツールを発表させていただきました！<br>半年ぶりのLTなので緊張しましたが、会場の雰囲気が良く楽しくできました👍<br>思ってたより反応が良くて嬉しい笑<br><br>▼LT資料<a href="https://t.co/NCdagXPnzf">https://t.co/NCdagXPnzf</a><br>（1時間で作ったので圧倒的雑w） <a href="https://t.co/gKgpG1vSi7">https://t.co/gKgpG1vSi7</a></p>&mdash; kaito (@kaito_program) <a href="https://twitter.com/kaito_program/status/1637349842933661696?ref_src=twsrc%5Etfw">March 19, 2023</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">懇親会まで参加して帰宅中〜<br>すーごい楽しかったー！<br>他の人の成果物の話聞くと、個人開発のモチベ上がるなあ🤔<br>懇親会では、美容投資と株式投資の話が学びになった…もっと聞きたかった😂</p>&mdash; ROM専 (@rom1000_yksbpn) <a href="https://twitter.com/rom1000_yksbpn/status/1637041031513534467?ref_src=twsrc%5Etfw">March 18, 2023</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日は個人開発をテーマにしたエンジニアのオフラインイベントに参加してきました✨<br><br>LT会では初めて知った技術やツールもあって勉強になったし<br>面白いサービスを開発されている方もいて刺激になったな🔥<br>ディスカッションや懇親会でも色んな方とお話できて楽しかったです😊<br> <a href="https://twitter.com/hashtag/DevelopersGuild?src=hash&amp;ref_src=twsrc%5Etfw">#DevelopersGuild</a></p>&mdash; ナス🍆Webエンジニア (@nasuB7373) <a href="https://twitter.com/nasuB7373/status/1637052133945270272?ref_src=twsrc%5Etfw">March 18, 2023</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">エンジニア飲み会で技術的な事を教えて頂くので、私が出来る事として<br><br>エンジニアの給与バブルがなぜ起きたのか、コロナと各国の金利を見れば見えて来ると言う事をお話しさせて頂いた。<br><br>今日も本当に楽しかった✨</p>&mdash; TAKE_CC6 (@TAKE_CC6) <a href="https://twitter.com/TAKE_CC6/status/1637042894975672321?ref_src=twsrc%5Etfw">March 18, 2023</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日もエンジニア交流会参加💻<br><br>なんだかんだオフラインで交流してナンボよね。</p>&mdash; takuya⛩@フリーランスエンジニア (@takuchan9104) <a href="https://twitter.com/takuchan9104/status/1637059142983774211?ref_src=twsrc%5Etfw">March 18, 2023</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">勉強会は色々な人と話せて楽しいな〜。<br>来月の勉強会に向けてNext.jsのApp Dir勉強する。</p>&mdash; Reactおじさん (@react_nextjs) <a href="https://twitter.com/react_nextjs/status/1637085079204933633?ref_src=twsrc%5Etfw">March 18, 2023</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><h2 id="h8d78e14043">感想</h2><p>個人開発に絞って開催してみましたが、皆さん使ってるツールもバラバラで興味も様々だったことに驚きました。<br>ただ、皆さん口を揃えて<span style="background-color:#d1ecf3">「開発より集客が大変」</span>って仰っていたので、やはり個人開発をするには技術力だけではなく、企画力やマーケティング能力といった開発以外の能力が必要なんだなと改めて認識しました。<br>その他にも<span style="background-color:#fff8b6">「モチベーション維持」</span>に関して言及してる人が多かったので、個人開発者同士で高めあったりフィードバックし合ったりの場がもっとあっても良いのかなと思ったりしました。<br>このようなオフラインの場が少しでも意見交換やサービス紹介のお役に立てれば幸いです。</p><h2 id="hd2cb4029dc">次回イベント</h2><p>次回はNext.jsに特化した勉強会を開催予定！<br>進化の早すぎるNext.jsですが、このイベントで少しでも知見を出し合って、理解を深められる場に出来たらなと考えています！<br><a href="https://devguil.connpass.com/event/276631/" target="_blank" rel="noopener noreferrer">https://devguil.connpass.com/event/276631/</a><br><br>以上。簡単なイベントレポートとなります。<br>最後までご覧いただきありがとうございます！</p>

私が運営しているDevelopers Guildで初となる個人開発をテーマにした勉強会レポート記事です。

個人開発・勉強会【3月18日(土)@秋葉原】イベントレポート

<h2 id="h8d027c8ed3">はじめに</h2><p>私が運営する【Developers Guild】では定期的にイベントを開催しております。<br>今回から新たに運営として参加してくださったTaigaさん主催のイベントとなります！<br><a style="background-color:#ffffff" href="https://twitter.com/taiga_skg" target="_blank" rel="noopener noreferrer">Taigaさん</a><br>今回もLTのレベルが高く学びの多い会となりました！<br>LT登壇者の皆さま本当にありがとうございました！<br>下記に登壇者の資料をまとめているので是非ご覧ください！<br>(どんどんハードルが上がってやりづらくなってきたのも確かなので、次回以降はネタ枠も設けるつもりです。笑)</p><h2 id="h0ea4671ca4">LT登壇者</h2><h3 id="h0befa3b07a">Sumiren「Next.js 13 App Directory推し機能と仕組み」</h3><p><a href="https://twitter.com/sumiren_t" target="_blank" rel="noopener noreferrer">sumiren</a><br><a href="https://docs.google.com/presentation/d/1JZKbj-I5OCRGIix9RdUdeFQuIJbyelH_3eC7ofnNnwk/edit#slide=id.p" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/1JZKbj-I5OCRGIix9RdUdeFQuIJbyelH_3eC7ofnNnwk/edit#slide=id.p</a></p><h3 id="h5a6b2b4fc2">nozomi_iida0106「Hasuraを使った新しい開発体験」</h3><p><a href="https://twitter.com/nozo_i0106" target="_blank" rel="noopener noreferrer">nozomi</a><br><a href="https://docs.google.com/presentation/d/14cCu_rIrpYCzTlAq2kSi6lsD2L9_3k4t52D3yjafabg/mobilepresent?slide=id.g1fc078525d7_0_202" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/14cCu_rIrpYCzTlAq2kSi6lsD2L9_3k4t52D3yjafabg/mobilepresent?slide=id.g1fc078525d7_0_202</a></p><h3 id="h21f5514297">ユウト「フロントエンドのSEOについてのきほん」</h3><p><a href="https://twitter.com/codeyy_dev" target="_blank" rel="noopener noreferrer">ユウト</a><br><a href="https://www.icloud.com/keynote/064qoYUtHqZDXKs9xkxRZX9iA" target="_blank" rel="noopener noreferrer">https://www.icloud.com/keynote/064qoYUtHqZDXKs9xkxRZX9iA</a></p><h3 id="h15db6d441f">Taiga「トランクベース開発のすすめ」</h3><p><a href="https://twitter.com/taiga_skg" target="_blank" rel="noopener noreferrer">Taiga</a><br><a href="https://speakerdeck.com/taigaskg/torankubesukai-fa-nosusume" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/taigaskg/torankubesukai-fa-nosusume</a></p><h3 id="hef2065a804">renren0825「Webアプリにおけるパフォーマンスチューニング」</h3><p><a href="https://twitter.com/renrenlqqz" target="_blank" rel="noopener noreferrer">れんれん</a><br><a href="https://docs.google.com/presentation/d/1wLYrmVljzwAAOEHXcP_60G9CbemQBiFDjxKxzILysdA/edit#slide=id.p" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/1wLYrmVljzwAAOEHXcP_60G9CbemQBiFDjxKxzILysdA/edit#slide=id.p</a></p><h3 id="h2f1cb09a88">masa「社内SEがアプリを企画した話」</h3><p><a href="https://twitter.com/Masa_Xedge" target="_blank" rel="noopener noreferrer">Masahiro Nishiguchi@よみとくアプリ</a><br><a href="https://www.canva.com/design/DAFYqhsFeYQ/dlStmXzv6aIKBcNmyxtZkQ/edit?utm_content=DAFYqhsFeYQ&amp;utm_campaign=designshare&amp;utm_medium=link2&amp;utm_source=sharebutton" target="_blank" rel="noopener noreferrer">https://www.canva.com/design/DAFYqhsFeYQ/dlStmXzv6aIKBcNmyxtZkQ/edit?utm_content=DAFYqhsFeYQ&amp;utm_campaign=designshare&amp;utm_medium=link2&amp;utm_source=sharebutton</a></p><h2 id="h751ccae4f7">参加者の声</h2><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日の勉強会もとても良い刺激を頂いた。<br><br>技術的なお話以上に、２次会で交流会させて頂いて色々な話しが出来るのがとても楽しい！<br><br>皆様々なバックグラウンドがあり、目指すべき所も色々あるけれど、互いに刺激しあいながら進めるってすごくいい。<br><br>本日もありがとうございました！ <a href="https://t.co/xaFoZw5C23">https://t.co/xaFoZw5C23</a></p>&mdash; TAKE_CC6 (@TAKE_CC6) <a href="https://twitter.com/TAKE_CC6/status/1619284417868107776?ref_src=twsrc%5Etfw">January 28, 2023</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">LT&amp;交流会楽しかったー！！<br>LTやって良かった😊</p>&mdash; nozomi (@nozo_i0106) <a href="https://twitter.com/nozo_i0106/status/1619280004134899712?ref_src=twsrc%5Etfw">January 28, 2023</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><h2 id="hd2cb4029dc">次回イベント</h2><p>次回はRyoCaさんの初主催イベント「個人開発アイディア交換&amp;交流会」を3月に開催します！<br><a style="background-color:#ffffff" href="https://twitter.com/ryocacode" target="_blank" rel="noopener noreferrer">RyoCaさん</a><br><a href="https://devguil.connpass.com/event/273629/" target="_blank" rel="noopener noreferrer">https://devguil.connpass.com/event/273629/</a><br>下記に当てはまる方は是非ご参加ください！！！</p><ul><li>「これから個人開発を始めてみたい！」</li><li>「作ったサービス・アプリを紹介したい！」</li><li>「周りの人がどんなものを作っているのか知りたい！」</li><li>「情報交換したいけど周りに話せる人がいない？」</li></ul><p>また、運営メンバーも絶賛大募集中ですので【勉強会の運営をしてみたい】と思った方は是非お声がけください！<br>以上。最後までご覧くださりありがとうございました！</p>

私が運営しているDevelopers Guildの2023年一発目のイベントまとめ記事となります。

LT＆交流会【1月28日(土)@渋谷】イベントレポート

<h2 id="h8d027c8ed3">はじめに</h2><p>私が運営しているTSLabでは、定期的にTypeScriptやReactの勉強会を実施しております。<br>今回から新たにGraphQLを取り扱っていくことになったので、簡単なログとしてまとめていこうと思います。<br>このGraphQL勉強会も例の如く公式のドキュメントを元にディスカッション。<br>まずは初回ということで、GraphQLの基礎を学習していきました。</p><h2 id="hefb7c37635">実施内容</h2><h3 id="h6d5cff9ff1">Introduction to GraphQL</h3><p>まずばGraphQLの概要。<br>本当に基礎的な内容になるのでサクッと流しつつGraphQLの特徴だけを学習<br><a href="https://graphql.org/learn/" target="_blank" rel="noopener noreferrer">https://graphql.org/learn/</a></p><h3 id="hbbd599d224">Queries and Mutations</h3><p>ここからが本題。<br>GraphQLのメインとなるQueryとMutationの使い方について学習。<br><a href="https://graphql.org/learn/queries/" target="_blank" rel="noopener noreferrer">https://graphql.org/learn/queries/</a><br>具体的には下記の内容について軽くディスカッションをしつつ、概要や使い方をインプット。</p><ul><li>Fields</li><li> Arguments</li><li> Aliases</li><li> Fragments</li><li> Operation name</li><li> Variables</li><li> Directives</li><li> Mutations</li><li> Inline Fragments</li></ul><p>ドキュメント内のプレイグラウンドでクエリを変更すると結果に反映されるので学習教材としてとても良いですね。<br>ポケモンのデータを検索できるサービスを叩いて遊んでる方も数名いらっしゃったのですが、こちらも学習には良さそうなので気になる方は下記のリンクから触ってみてください。<br><a href="https://graphql-pokemon2.vercel.app/" target="_blank" rel="noopener noreferrer">https://graphql-pokemon2.vercel.app/</a></p><h2 id="hbc4d84d553">学習内容</h2><h3 id="h26ec5b198b">オーバーフェッチ、アンダーフェッチを回避できる</h3><p>RESTは決められたフィールドを返すのに対し、GraphQLはクライアント側で必要なフィールドを明示的に要求するため、オーバーフェッチやアンダーフェッチが起こらないのが最大の特徴。<br>データ取得後にクライアント側で不要なフィールドを破棄したり、必要なデータが増えたためにバックエンド側の反映を待つ必要が無いのは良いですね。<br>上記の理由によりクライアント側の事情に引きづられ辛くなるので、バックエンド側の実装においてもメリットが大きいのではないかと思います。</p><h3 id="h1e0ca01b1e">N+1問題について</h3><p>GraphQLを触ってみるとすぐN+1問題にぶち当たるのが想像できると思います。<br>実際どのグループでも議題に上がっていましたしね。<br>問題として話題には上がりましたが解決方法まで議論は進んでいなかったので次回以降の議題に上げても良さそうですね。<br>Prismaを使うことである程度回避できる(?)的な情報もあったので今後触れてみても良いかも。<br><a href="https://www.prisma.io/" target="_blank" rel="noopener noreferrer">https://www.prisma.io/</a></p><h3 id="hdf3ba3ba10">REST から GraphQLに変えることで全てが良くなるという訳でもない</h3><p>当たり前の話になりますが技術には長所と短所があります。<br>どのグループもRESTと比較して話をしていましたが、根本的に考え方が異なるので学習コスト/導入コストは少々高いのかなと感じました。<br>特に「複数箇所から呼ばれたりユーザーの検索クエリによってフィールド構造が大きく変化する場合を除いてはRESTで良くね？」みたいな話も上がっていたので、どういったケースで導入すると良さそうかなどは今後の議題に上げても良さそうですね。</p><h2 id="h8d78e14043">感想</h2><h3 id="h5d25774fc1">触らんとイメージ出来ん</h3><p>当たり前っちゃ当たり前のことですが、ドキュメントだけ読んでも「で？それが何？」になっちゃいますね。笑<br>今回の参加者の内、実際に環境を構築してきた人は30%程。<br>この方々の方が深い議論になるので言うまでもないですね。<br>今回の反省を踏まえつつ、次回の勉強会では実際にGraphQLを触れる環境で遊んでみようかなと考えています。<br>(構築してくれるイケメンさん頼んだ!!)</p><h3 id="h9cd3a7ade5">ツールやライブラリの話に飛びがち</h3><p>今回の主目的は「GraphQLの基礎を一から学習する」としていたのですが、やはりApolloの話に飛んだりが多かったかなといった印象。<br>これはちょっと運営の仕方が良くなかった。ごめんちゃい。</p><h3 id="hc83f6b7cb1">フルスタック寄りの人の方がメリットを感じやすかったかも</h3><p>フロントエンド寄りの参加者が多かったからか「使うイメージが湧かない」といった声がちらほら...<br>ただし、フルスタックに開発している人は導入のメリットやデメリットまで踏み込めていた印象です。<br>GraphQLはクエリ言語かつランタイムの話だから当たり前といえば当たり前ですかね。笑</p><h2 id="h1afe451c43">さいごに</h2><p>初回から色んな疑問が飛び交っていたので会としてはまずまず良かったのかなと思います。<br>事前に触ってきた人はある程度深い議論をされてましたが、ドキュメントを読んだだけの人は割とフワッとしか捉えられていなさそうだなといった印象でした。<br>(私は今の現場で使っているのである程度イメージ出来ますが、最初はよくわからなかったなぁ。)<br>次回は実際の環境を構築して触りながら学習する場にシフトしようと思います！<br>以上。最後までご覧いただきありがとうございます！</p>

当記事はTSLab・GraphQL勉強会のレポート記事になります。

TSLab【第1回 GraphQL勉強会】

<h2 id="h11189aff12">トピックス</h2><h4 id="h054db13ff3">1月</h4><h3 id="hec6c883aa6">TypeScript勉強会 開始</h3><p>TypeScriptを使って2年以上が経っても全然理解できていなかったので輪読会形式の勉強会を開いてみました。<br>当初は50人以上の人が参加していたのですが本気度の高い人だけが徐々に残り、最後は型パズルを披露するほどの変態さん達で熱くディスカッションする勉強会へと変わっていきました。<br>後半はReactやNestJSなどのフロントTS / バックTSのテーマに絞った会も開けるようにようになったので本当にやって良かったと思います。<br>参加してくれてる人たちとは毎週ディスカッションしていたから忘れがちですが、実はまだ会ってから1年も経っていないという。。。嘘だろ。。</p><h4 id="h924bfda0e5">1月〜5月</h4><h3 id="h13fc503823">ブロックチェーンを用いたスキル証明機能の開発</h3><p>某スクールにてカリキュラム受講者に対して発行する修了証の代替となる「Openbadge」の発行機能を開発。<br>通常の修了証と異なり、修了者情報をブロックチェーン上に保存するため、改ざんが難しく情報の透明性も担保できるのが特徴。<br>実装よりもブロックチェーンの概念理解が一番大変でしたね。。。<br>(初のブロックチェーン案件、初の実務Python、なんだかんだで最初のインプットがマジでえげつなかった。。。)<br>あまり詳しいことは話せないので概要だけ簡単にまとめておきます。</p><h4 id="h9707d3a59a">概要</h4><ol><li>アプリケーション側から修了者がオープンバッジの発行申請</li><li>PythonサーバーでBlockcertsを介してブロックチェーンネットワークに起票</li><li>この時に同時にオープンバッジデータも生成</li><li>起票された証明書を配布用に配置</li><li>アプリケーション側から修了者にオープンバッジを配布</li></ol><h4 id="h48162eced8">使用技術</h4><ul><li>Blockcerts</li><li>Openbadge</li><li>Python / Flask</li><li>Ruby / Ruby on Rails</li><li>TypeScript / React</li></ul><h4 id="h5c208a15de">Blockcerts</h4><p><a href="https://www.blockcerts.org/" target="_blank" rel="noopener noreferrer">https://www.blockcerts.org/</a></p><h4 id="hed5c62b3bb">Openbadge</h4><p><a href="https://www.openbadge.or.jp/about-ob" target="_blank" rel="noopener noreferrer">https://www.openbadge.or.jp/about-ob</a></p><h4 id="hc6e3d95856">登壇資料</h4><p><a href="https://speakerdeck.com/weberyota/hurotukutienwohuo-yong-sitasukiruzheng-ming-ji-shu" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/weberyota/hurotukutienwohuo-yong-sitasukiruzheng-ming-ji-shu</a></p><h4 id="hadc792b2f6">5月</h4><h3 id="hc3ac9d5771">オフライン勉強会 再開</h3><p>2〜3年前は頻度高く開いていた勉強会/もくもく会ですが、しばらくコロナの影響で中止をしていました。<br>5月頃にようやく世間の雰囲気が変わってきたので久しぶりに再開してみたところ、2〜3年前に参加してくれてた方々がまた集まってくださいました。<br>この時までは一人で運営をしていたのですが、今では優秀な運営メンバーも集まってくれたので、2023年は毎月開催を目標に運営していこうと思います。</p><h4 id="hd817dfe282">6月</h4><h3 id="ha354732349">Storybook / Swagger 導入</h3><p>コンポーネント開発をしていると当たり前のように使うStorybook。<br>API定義で当たり前のように使うSwagger。<br>当時いた会社ではこのどちらも使用されていなく、かつ仕様書もまともに無かったので「作った本人しか分からない」状態でした。<br>流石にこりゃヤベェと感じてドキュメント整備の観点から、StorybookとSwaggerを導入してみました。</p><h4 id="he44e82f508">7〜9月</h4><h3 id="hff0add6a48">SEO施策 / 新規機能開発</h3><p>LP経由やプロダクトからのユーザー流入数を増やすための施策を頻度高く実施。<br>この案件はマーケターさんとタッグで取り組めたので、マーケターさんの知見を盗むことが出来たとても良い経験でした。<br>特にGAの見方やデータ収集方法、SEOにおいてのセオリーや改善施策など、普段とは違った視点でのタスクを行えたので少しだけ視野が広がった気がします。</p><h4 id="h5eaf20040d">10月</h4><h3 id="hacc8fc953e">フリーランスとして独立</h3><p>独立しました。以上。<br>手取りがバカみたいに増えました。<br>もっと早くすれば良かったです。</p><h4 id="h71d61d1928">10月〜12月</h4><h3 id="h0986c6b911">Electron × React デスクトップアプリ開発</h3><p>フリーランスとしての初案件でデスクトップアプリ開発案件に参画。<br>シンプルにElectronが凄い。だが癖も凄い。<br>特にIPC通信が絡む開発だと一気に複雑性を増すので今だに苦戦中です。<br>レンダラー側(React)はテストコードがゴリゴリに書かれていてカバレッジ率もめちゃくちゃ高い。<br>ここまで堅牢な設計のアプリ開発をさせてもらったのは初なので考え方が大きく変わりました。<br>Reactのテストについては今度勉強会とかでアウトプットしていこうと思います。</p><h4 id="hc6e3d95856">登壇資料</h4><p><a href="https://speakerdeck.com/weberyota/webji-shu-de-desukutotupuapuri-electron-nosusume" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/weberyota/webji-shu-de-desukutotupuapuri-electron-nosusume</a></p><h4 id="h05cb5cb332">12月</h4><h3 id="hf5005b1f06">Astro × Svelte × Cloudflare ポートフォリオ作成</h3><p>最近いろんな方とお会いするようになり自己紹介をするシーンが増えてきたので、いっそ名刺代りのサイトを作っちゃおうということでAstro × Svelte × Cloudflareでポートフォリオを作ってみました。<br>とりあえず言えることはバカ早い。マジでパフォーマンスが良い。<br>簡単なサイトならしばらくこの構成でいい気がしてきてます。<br>今回はサクッと適当に作ったので、どこかのタイミングでデザインをしっかりしてリプレイスしようと思います。</p><h2 id="h8d78e14043">感想</h2><h3 id="h99b75dc5cb">勉強会やりすぎ</h3><p>今年だけで27回もやってる。流石にやりすぎ。<br>ただそのおかげで企画・開催・運営が安定してきましたし、安定して人が集まって頂ける状態になったのは事実です。<br>冷静に考えるとオンライン/オフライン合わせて今年だけで100人以上の方とお会いしてるのはヤバい。。。</p><h3 id="hd33fbfb67a">フリーランス転向</h3><p>正直な感想は「あまり変わらねぇ」。<br>ただ契約が違うだけで働き方は全く変わらないですね。</p><h3 id="hc52cd8ea9d">収入が増えた</h3><p>フリーランス転向したことで収入は確実に上がりました。<br>去年の抱負で書いた「エンジニア収入だけで200万アップさせる」は余裕でクリア。<br>むしろ目標が低すぎたかもしれません。<br>本気でお金の勉強をしないとマズいなと思う今日この頃です。</p><h3 id="ha69c9333be">フロントエンド寄りに</h3><p>去年まではバックエンドやインフラ構築が主戦場でしたが、今年は完全にフロント寄りになってきました。<br>全てが中途半端だったので、一旦フロント中心に力を付けちゃうのも良いかもしれないと思う今日この頃です。<br>ただフロントの技術進化が早すぎて着いていけないのも事実なので、ある程度の所まで行ったら路線変更するかもしれません。</p><h2 id="h1afe451c43">さいごに</h2><p>今年は独立したり勉強会を開きまくったりと色々あったので、そこそこまぁまぁな一年だったかなと思います。<br>勉強会を通じてTypeScriptの理解が一段深まったので、開いて本当に良かったと思います。<br>来年の勉強会は毎月Mustでやりつつも、新しい企画をぶっ込んでいく予定です。<br>来年はエンジニア事業以外にもう一つ事業を増やしたいのでそっちにパワーを割いていきつつ、プライベートではビリヤードをガチっていこうと思います！<br>以上。簡単な振り返りとなります！<br>最後までお付き合いいただきありがとうございました！</p>

エンジニア3年目となり環境も収入も大きく変化したので簡単に振り返ってみたいと思います。
※この記事は自分に向けたログでもあるので完全に自己満的な記事になります。

2022年の振り返り【Webエンジニア3年目】

<h2 id="h8d027c8ed3">はじめに</h2><p>タイトル通りとなりますが、React で select フィールドの型を縛ってみました。<br>結論から言うと<strong style="background-color:#fff8b6">Type Guard</strong>を挟むことで特定の値しか受け付けず、string型の許容を排除した内容となります。<br>なんて事のない、ただのselectフィールドがこちら<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/c5b9fb3c320e49c09c55e4cddc1e06ea/react-type-guard-1.webp" alt=""></p><pre><code>const [selectValue, setSelectValue] = useState('hoge')

&lt;select value={selectValue} onChange={(e) =&gt; setSelectValue(e.target.value)}&gt;
  &lt;option value="hoge"&gt;hoge&lt;/option&gt;
  &lt;option value="fuga"&gt;fuga&lt;/option&gt;
  &lt;option value="piyo"&gt;piyo&lt;/option&gt;
&lt;/select&gt;</code></pre><p>要はこの<strong>selectValue</strong>にhoge / fuga / piyo 以外の値が入らないように型を縛ったということですね。<br>上記では分かりやすくoptionを並べましたが、一旦optionsを定数化してmapで並べる一般的な形に変換しましょう。<br>(通常この手の定数はconstants等にまとめますが、今回はわかりやすく同一ファイルに書いています。)</p><pre><code>const SELECT_OPTIONS = ['hoge', 'fuga', 'piyo'] as const

const [selectValue, setSelectValue] = useState('hoge')

&lt;select value={selectValue} onChange={(e) =&gt; setSelectValue(e.target.value)}&gt;
  {SELECT_OPTIONS.map((v) =&gt; (
    &lt;option key={v} value={v}&gt;{v}&lt;/option&gt;
  ))}
&lt;/select&gt;</code></pre><p>ではこの状態から始めましょう。</p><h2 id="h3988ee878e">第一段階: useStateの型を縛る</h2><p>まずはSELECT_OPTIONSのリストからユニオン型のTSelectFieldを生成しておきます。</p><pre><code>const SELECT_OPTIONS = ['hoge', 'fuga', 'piyo'] as const
type TSelectField = typeof SELECT_OPTIONS[number]
// -&gt; type TSelectField = "hoge" | "fuga" | "piyo"</code></pre><p>そんでもってこのTSelectFieldをuseStateに割り当ててあげます。<br>そうすると当然ですがselectValueが"hoge" | "fuga" | "piyo"に型補完されてますね。(そりゃそうじゃ)</p><pre><code>const [selectValue, setSelectValue] = useState&lt;TSelectField&gt;('hoge')
// selectValueをホバー
// -&gt; const selectValue: "hoge" | "fuga" | "piyo"</code></pre><p>ここまでは何の変哲もないuseStateの扱い方ですが、一点問題点が発生しています。<br><img src="https://images.microcms-assets.io/assets/968175a6ae1f429a923f393a5fa133a4/df7721d50875407a964e66006afb0d0c/react-type-guard-2.webp?w=800&amp;h=217" alt=""><br>はいエラってますね。<br>そうです。useState&lt;TSelectField&gt;で型を縛ったことによって、selectのonChage Eventとの型にズレが生じています。<br>こいつを解決するのが今回の主目的です。</p><h2 id="h3a5c816706">第二段階: 型アサーションで強引に割り当てる</h2><p>手取り早く、型アサーション( as )で無理やり型を割り当ててあげます。</p><pre><code>// as TSelectField 追加
&lt;select value={selectValue} onChange={(e) =&gt; setSelectValue(e.target.value as TSelectField)}&gt;
  {SELECT_OPTIONS.map((v) =&gt; (
    &lt;option key={v} value={v}&gt;{v}&lt;/option&gt;
  ))}
&lt;/select&gt;</code></pre><p>これでエラーも消えて解決！！！<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>・<br>否！そうは問屋が卸しません！！<br>asを使うとコンパイルエラーを握りつぶすことが出来ますが、実行時エラーを出すケースがあります。<br>as はコンパイラの型推論を強制的に上書いているに過ぎないので、注意しないと予期せぬバグを孕む危険性があります。<br>実際に私が現在参画している案件では as の使用を固く禁じています。<br>as の危険性については調べると山ほど記事が出てくるので是非ご自身でも調べてみてください。</p><h2 id="h1d8c748fe9">第三段階: Type Guard を仕込んでみる</h2><p>お待たせしました。ここからようやく本題です。笑<br>やることは非常にシンプルです。<br><em>e</em>.target.valueがTSelectField ("hoge" | "fuga" | "piyo")とマッチしているかを事前にチェックすることで、TSelectField以外のstring型が入る余地を無くしてあげれば良いのです。<br>実はselectのeventの型ChangeEvent&lt;HTMLSelectElement&gt;は変更が出来ないので、stringとして受け取ってType Guardでチェックする関数を定義します。</p><pre><code>const onChangeSelect = (event: ChangeEvent&lt;HTMLSelectElement&gt;) =&gt; {
  // as を使わず Type Guard で 型チェックする
  setSelectValue(event.target.value as TSelectField)
}

&lt;select value={selectValue} onChange={onChangeSelect}&gt;
  {SELECT_OPTIONS.map((v) =&gt; (
    &lt;option key={v} value={v}&gt;{v}&lt;/option&gt;
  ))}
&lt;/select&gt;</code></pre><p>ここまで出来たら後はsetSelectValueの前でType Guardしてあげるだけです。</p><pre><code>const isTSelectField = (value: string): value is TSelectField =&gt;
  Object.values(SELECT_OPTIONS)
    .map&lt;string&gt;((value) =&gt; value)
    .includes(value)

const onChangeSelect = (event: ChangeEvent&lt;HTMLSelectElement&gt;) =&gt; {
  // Type Guardを追加
  if (isTSelectField(event.target.value)) setSelectValue(event.target.value)
  // 後ろのvalueをホバー: -&gt; (property) HTMLSelectElement.value: "hoge" | "fuga" | "piyo"
}</code></pre><p>おりゃ！<br>asを使っていませんがevent.target.valueの方が"hoge" | "fuga" | "piyo"に補完されてますね！<br>isTSelectFieldを分解すると</p><pre><code>// SELECT_OPTIONS から string配列型 の新たな配列を生成
// 新しい配列を生成することでエラーを回避 (型 'string' の引数を型 '"hoge" | "fuga" | "piyo"' のパラメーターに割り当てることはできません。)
Object.values(SELECT_OPTIONS)
  .map&lt;string&gt;((value) =&gt; value)

// 配列内に value が含まれているかチェックし boolean を返す
  .includes(value)

// true の場合 value は TSelectField型 であるとコンパイラに伝える
const isTSelectField = (value: string): value is TSelectField =&gt;</code></pre><p>こんな感じ。<br>as で無理やり割り当てるのではなく、<strong>is演算子(User-Defined Type Guards)</strong>でコンパイラに対して教えてあげるのが正しいやり方となります。<br>以上！解決！！！</p><h2 id="ha214098e44">まとめ</h2><p>今回はReactでselectフォームを取り扱う際のType Guardについて解説しました。<br>基本的にはasで無理やり型を割り当てるのではなく、<strong>is演算子(User-Defined Type Guards)</strong>で型安全なフォームの値を取り扱うのが良いと思います。<br>Reactを使っていると割と使う頻度が高いと思うので、この際に是非マスターしてみてください。<br>今回使った isTSelectField はジェネリクスで汎用的なType Guard関数にしても良いかもしれませんね。<br>(気が向いたら今度記事にします。)<br>以上。最後までご覧くださりありがとうございました！</p>

React × TypeScriptでselectフィールドの型制御を行なった際の備忘録として、実装方法を簡単にまとめた記事となります。

【React】string型に甘えずselectフィールドの型をType Guardで縛ってみる

<h2 id="h8d027c8ed3">はじめに</h2><p>私が運営する【Developers Guild】では定期的にイベントを開催しております。<br>今回は初の試みとしてフロントエンドエンジニアに特化したイベントを開催いたしました。<br>参加者の皆さま、ありがとうございました！<br>今回もLTのパートを交流会のパートに分けて実施。<br>LT発表資料は下記にまとめておりますので、気になる方は是非ご覧くださいませ。</p><h2 id="h0ea4671ca4">LT登壇者</h2><h3 id="hb75f9fe312">RyoCa「今日から使える ECMAScript 2023」</h3><p><a href="https://twitter.com/RyoCa_dev" target="_blank" rel="noopener noreferrer">RyoCa</a><br><a href="https://docs.google.com/presentation/d/e/2PACX-1vRleBEI8XnizcfRdgulikP6BR2R0G9YdijxZj_EBWk0znGZAeMabbuhrvlpRjilxvLmTQV-M56Wp2ws/pub?start=false&amp;loop=false&amp;delayms=3000&amp;slide=id.p" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/e/2PACX-1vRleBEI8XnizcfRdgulikP6BR2R0G9YdijxZj_EBWk0znGZAeMabbuhrvlpRjilxvLmTQV-M56Wp2ws/pub?start=false&amp;loop=false&amp;delayms=3000&amp;slide=id.p</a></p><h3 id="h14f9aab79e">RYOTA「Web技術でデスクトップアプリ!!? 〜 Electron のすすめ〜」</h3><p><a href="https://twitter.com/WEBERYOTA" target="_blank" rel="noopener noreferrer">RYOTA</a><br><a href="https://speakerdeck.com/weberyota/webji-shu-de-desukutotupuapuri-electron-nosusume" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/weberyota/webji-shu-de-desukutotupuapuri-electron-nosusume</a></p><h3 id="h6ab6796965">Reactおじさん「Jotaiをプロジェクトに導入してみた」</h3><p><a href="https://twitter.com/react_nextjs" target="_blank" rel="noopener noreferrer">Reactおじさん</a><br><a href="https://docs.google.com/presentation/d/1hzhFdF_A4th1eIyb-vMWaTehva2u92ycRxXvAe0gJZA/edit#slide=id.p" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/1hzhFdF_A4th1eIyb-vMWaTehva2u92ycRxXvAe0gJZA/edit#slide=id.p</a></p><h3 id="h487ddaccec">sammiya「Mantine が実現するスタイル拡張に対して開かれた汎用コンポーネント」</h3><p><a href="https://speakerdeck.com/sammiya/mantine-gashi-xian-suru-sutairukuo-zhang-nidui-sitekai-karetafan-yong-konponento" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/sammiya/mantine-gashi-xian-suru-sutairukuo-zhang-nidui-sitekai-karetafan-yong-konponento</a></p><h3 id="h09789906ff">MarkLee「react-hook-formとMUIについて」</h3><p><a href="https://twitter.com/Mark_with_M" target="_blank" rel="noopener noreferrer">丸の内でパーカー</a><br><a href="https://docs.google.com/presentation/d/1Z7VhHU5iubAQNhe39Qc4an-eRUtPyivn/edit#slide=id.p1" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/1Z7VhHU5iubAQNhe39Qc4an-eRUtPyivn/edit#slide=id.p1</a></p><h3 id="h4e6bce59cf">カルキチ副島「Tanstack Queryを使ってデータの取得や変更以外の情報もグローバルステートとして管理する」</h3><p><a href="https://twitter.com/karukichi_yah" target="_blank" rel="noopener noreferrer">カルキチ 副島</a><br><a href="https://speakerdeck.com/soejima0124/management-global-state-using-to-tanstack-query" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/soejima0124/management-global-state-using-to-tanstack-query</a></p><h2 id="h751ccae4f7">参加者の声</h2><p>今回も<strong>丸の内でパーカーさん</strong>が感想記事を書いてくださった！！！<br><a style="background-color:#ffffff" href="https://twitter.com/Mark_with_M" target="_blank" rel="noopener noreferrer">Twitter</a><br>マジ感謝です！！！<br><a href="https://note.com/byungsoo_lee/n/n8eb50410fe17" target="_blank" rel="noopener noreferrer">https://note.com/byungsoo_lee/n/n8eb50410fe17</a><br>下記はTwitterでの反応となります♪</p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日のフロントエンジニア勉強会はとても良い時間だった。<br><br>皆んな親切で優しい✨<br><br>不動産と税務と投資の事しか役立つ情報提供が出来なかった気もするけど🤣<br><br>フロントエンドの勉強頑張ります！</p>&mdash; TAKE_CC6 (@TAKE_CC6) <a href="https://twitter.com/TAKE_CC6/status/1601572144940429313?ref_src=twsrc%5Etfw">December 10, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日の交流会まじですごかった。。圧巻すぎて全然ついていけなかった😇🤟<br>余韻がやばすぎて脳汁出てしまったので会社で自分のプロジェクト進めてるなう🥹<br>また行きますッ！<a href="https://t.co/4GCFVDq4sG">https://t.co/4GCFVDq4sG</a></p>&mdash; あむ🇨🇦@カナダ移住予定 (@fakeCanadianAmy) <a href="https://twitter.com/fakeCanadianAmy/status/1601535522132090880?ref_src=twsrc%5Etfw">December 10, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">本日はありがとうございました！🙇‍♂️<br><br>2年ぶりくらいのオフラインLTでめっちゃ緊張した🥶<br>もっと人前で話す機会を作っていきたい</p>&mdash; RyoCa | Web engineer (@ryocacode) <a href="https://twitter.com/ryocacode/status/1601578074872885249?ref_src=twsrc%5Etfw">December 10, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日勉強会楽しかったです。登壇してみるのもたまにはいいですね！<br>今日仲良く話してくださった皆様、ありがとうございました！<br>あとdisってると勘違いしてる人いて心外ですが、僕言った事全部褒め言葉です！<br>あとみんな東宝映画見ましょう！！</p>&mdash; 丸の内でパーカー🇰🇷 (@Mark_with_M) <a href="https://twitter.com/Mark_with_M/status/1601526845115027457?ref_src=twsrc%5Etfw">December 10, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">めちゃくちゃ勉強のモチベーション上がりました！☺️<br>運営の方々、ありがとうございました♪ <a href="https://t.co/suile0Gbrv">https://t.co/suile0Gbrv</a></p>&mdash; りょた.tsx@frontend (@Ryo54388667) <a href="https://twitter.com/Ryo54388667/status/1601485932124700672?ref_src=twsrc%5Etfw">December 10, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">めちゃ勉強になったし、アイスブレイクもあって話が弾みました！フロントエンドに特化した話が十分にできて、個人的にはすごく楽しかった笑<br><br>勉強会後の飲み会、次回は予定空けておいて参加したい、、！<br> <a href="https://t.co/QVRQA7szGV">https://t.co/QVRQA7szGV</a></p>&mdash; けんや (@k_e1sh1n) <a href="https://twitter.com/k_e1sh1n/status/1601556870853890053?ref_src=twsrc%5Etfw">December 10, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">TanStackQueryのキャッシュを使って、グローバルステートを管理する方法についてしゃべってきました。<br><br>LTのレベルも高くとても刺激になりました！<br>企画していただいたRYOTAさん（<a href="https://twitter.com/WEBERYOTA?ref_src=twsrc%5Etfw">@WEBERYOTA</a>）とReactおじさん（<a href="https://twitter.com/react_nextjs?ref_src=twsrc%5Etfw">@react_nextjs</a>）ありがとうございました！<a href="https://t.co/oPDtrNvoiX">https://t.co/oPDtrNvoiX</a></p>&mdash; カルキチ 副島｜Karukichi Soejima (@karukichi_yah) <a href="https://twitter.com/karukichi_yah/status/1601562351534149637?ref_src=twsrc%5Etfw">December 10, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><h2 id="h8d78e14043">感想</h2><h3 id="hf59e088c5b">情報共有の好循環が生まれている!!</h3><p>過去の勉強会で情報共有された内容が実際に現場で導入され、さらに導入した人が情報を共有するという好循環が生まれ始めていて超感動しました!!<br>5月のイベントでReactおじさんが共有してくださったUIライブラリのMantine。<br><a href="https://onedrive.live.com/view.aspx?resid=7646A55D8C12B970!12652&amp;ithint=file%2cpptx&amp;authkey=!ALnsoVf_iYEzyxw" target="_blank" rel="noopener noreferrer">https://onedrive.live.com/view.aspx?resid=7646A55D8C12B970!12652&amp;ithint=file%2cpptx&amp;authkey=!ALnsoVf_iYEzyxw</a><br>sammiyaさんが現場でMantineを実際に導入し、かつ汎用性の高いコンポーネントを作成。<br>その内容を今回のLTで発表してくださるという胸熱な展開に!!<br><a href="https://speakerdeck.com/sammiya/mantine-gashi-xian-suru-sutairukuo-zhang-nidui-sitekai-karetafan-yong-konponento" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/sammiya/mantine-gashi-xian-suru-sutairukuo-zhang-nidui-sitekai-karetafan-yong-konponento</a><br><strong><em>情報共有→実践導入→情報共有</em></strong>の流れができてとても良い!!<br>こういうケースをもっと増やしたいなと思いました!!</p><h3 id="h4c5121162e">キャッチアップ早ッ!!</h3><p>LTの発表内容を翌日には自分で試しちゃう猛者が...!!<br>このキャッチアップ速度は見習わねば!!</p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">昨日の交流会でRYOTAさん（<a href="https://twitter.com/WEBERYOTA?ref_src=twsrc%5Etfw">@WEBERYOTA</a>）が紹介されてたElectron触ってみました☺️<br>簡単にセットアップできて驚き🤟<br>年末のいい遊び相手になってくれそう！笑<a href="https://twitter.com/hashtag/Electron?src=hash&amp;ref_src=twsrc%5Etfw">#Electron</a> <a href="https://t.co/SzfTYyMrmf">pic.twitter.com/SzfTYyMrmf</a></p>&mdash; あむ🇨🇦@カナダ移住予定 (@fakeCanadianAmy) <a href="https://twitter.com/fakeCanadianAmy/status/1601863118652551168?ref_src=twsrc%5Etfw">December 11, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><h3 id="h788afc5738">ディスカッションがアツい!!</h3><p>各テーブルを回らせて頂きましたが、LT登壇者への質問や周辺技術を深ぼる会話がなされてとても良きでした!!<br>ライブラリの作成方法やpackage.jsonのプロパティといったニッチな会話もされていて、フロントエンド限定で開いた効果が一定現れていたのかなと感じました!!<br>ある程度技術スタックを揃えると会話の深みが増すと感じたので、今後はReactに絞ったりバックエンドの特定の技術に絞ったりと色々試していこうと思います。</p><h2 id="h1afe451c43">さいごに</h2><p>簡単ではございますが12月のイベントのまとめとなります。<br>今回は初のフロント特化イベントを開いてみましたが、技術を絞った方が深い会話が出来るのでまたテーマを絞って開催しようと思います！<br>2023年の一発目は初のTaigaさん主催イベント！気になる方は是非ご参加くださいませ！<br><a href="https://devguil.connpass.com/event/266910/" target="_blank" rel="noopener noreferrer">https://devguil.connpass.com/event/266910/</a><br>また、【<strong>運営メンバーを絶賛大募集中</strong>】ですので"勉強会の運営をしてみたいなぁ"と思った方は是非私までお声がけください！<br>以上。最後までご覧くださりありがとうございました！</p>

フロントエンドエンジニア限定のイベントを開催しましたので簡単なレポートとしてまとめております！

モダンフロントエンド交流会【12月10日@秋葉原】LT＆交流会・イベントレポート

<h2 id="h8d027c8ed3">はじめに</h2><p>私が運営する【Developers Guild】では定期的にイベントを開催しております。<br>コロナの影響でしばらく休止していましたが、11月12日に新宿で<strong>LT&amp;交流会</strong>を開催いたしました。<br>今回は企画から運営までを<strong>Reactおじさん</strong>が実施してくださいました！<br><a style="background-color:#ffffff" href="https://twitter.com/react_nextjs" target="_blank" rel="noopener noreferrer">Reactおじさん(@react_nextjs)</a><br>おじさん！ありがとうございました🎉<br><br>今回のイベントもいつも通りLTパートと交流会パートに分けて実施。<br>LTのレベルがどんどん上がっているので参加者の皆さんも刺激を受けたのではないでしょうか。</p><h2 id="h0ea4671ca4">LT登壇者</h2><h3 id="h0bf2b79d6d">m.hirasaki「redux使うのやめました」</h3><p><a href="https://twitter.com/m_hirasaki1985" target="_blank" rel="noopener noreferrer">ひらさ</a><br><a href="https://speakerdeck.com/hirasa/reduxshi-unoyamemasita" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/hirasa/reduxshi-unoyamemasita</a></p><h3 id="h9a13e79ac2">kamaji_tomoya「デザインドックから学ぶ開発手法」</h3><p><a href="https://twitter.com/tomoya_sakusaku" target="_blank" rel="noopener noreferrer">もや(釜地智也)＠SWE</a><br><a href="https://speakerdeck.com/tomoyakamaji/dezaindotukukaraxue-bukai-fa-shou-fa" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/tomoyakamaji/dezaindotukukaraxue-bukai-fa-shou-fa</a></p><h3 id="h66586e0328">Reactおじさん「激戦区東京でフリーランスとして生き残った方法3選」</h3><p><a href="https://twitter.com/react_nextjs" target="_blank" rel="noopener noreferrer">Reactおじさん</a><br><a href="https://onedrive.live.com/view.aspx?resid=7646A55D8C12B970!12727&amp;ithint=file%2cpptx&amp;authkey=!AKP-bgKBK67D2UE" target="_blank" rel="noopener noreferrer">https://onedrive.live.com/view.aspx?resid=7646A55D8C12B970!12727&amp;ithint=file%2cpptx&amp;authkey=!AKP-bgKBK67D2UE</a></p><h3 id="hd2b1fc7a1d">yuta_for「オブザーバビリティを高めよう」</h3><p><a href="https://twitter.com/Y0u281" target="_blank" rel="noopener noreferrer">Yuta</a><br><a href="https://speakerdeck.com/yuhta28/obuzababiriteiwogao-meyou" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/yuhta28/obuzababiriteiwogao-meyou</a></p><h3 id="hb8c3ea2773">カルキチ副島「Rust製のクロスプラットフォームターミナル / about-wezterm」</h3><p><a href="https://twitter.com/karukichi_yah" target="_blank" rel="noopener noreferrer">カルキチ 副島</a><br><a href="https://speakerdeck.com/soejima0124/about-wezterm" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/soejima0124/about-wezterm</a></p><h3 id="h37b4cd7a21">Taiga「gRPC入門」</h3><p><a href="https://twitter.com/taiga_skg" target="_blank" rel="noopener noreferrer">Taiga</a><br><a href="https://speakerdeck.com/taigaskg/grpcru-men" target="_blank" rel="noopener noreferrer">https://speakerdeck.com/taigaskg/grpcru-men</a></p><h3 id="h415158bcab">RIO「超速入門 GraphQL」</h3><p><a href="https://twitter.com/front_to_dev" target="_blank" rel="noopener noreferrer">RIO</a><br><a href="https://docs.google.com/presentation/d/15ZHjd5gijd0Oi6LHYsNmvqLvU6pinX_8L8qfHM3KxlU/edit#slide=id.p" target="_blank" rel="noopener noreferrer">https://docs.google.com/presentation/d/15ZHjd5gijd0Oi6LHYsNmvqLvU6pinX_8L8qfHM3KxlU/edit#slide=id.p</a></p><h2 id="h751ccae4f7">参加者の声</h2><p>今回のイベント参加者の<strong>丸の内でパーカーさん</strong>が感想記事を書いてくださいました！！！<br><a style="background-color:#ffffff" href="https://twitter.com/Mark_with_M" target="_blank" rel="noopener noreferrer">Twitter</a><br>とてもありがたいです！！！<br>これからも、よりご満足頂けるよう運営してまいります🙌<br>気になる方は下記の記事をご覧くださいませ♪<br><a href="https://note.com/byungsoo_lee/n/n5192dac06394" target="_blank" rel="noopener noreferrer">https://note.com/byungsoo_lee/n/n5192dac06394</a><br>下記はTwitterの反応となります♪</p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">みんなすごいわ<br>同じ分野でもついていけない話いっぱいあったから、そういうものがあるんだっていう収穫あるだけでもオフラインイベントは大事だなって再認識した<br>あざした！</p>&mdash; おーもと@WebDev (@ohmoto2020) <a href="https://twitter.com/ohmoto2020/status/1591394300528844800?ref_src=twsrc%5Etfw">November 12, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ありがとうございました！<br>次回のイベントも楽しみにしてます👍 <a href="https://t.co/6UqtGk3EYC">https://t.co/6UqtGk3EYC</a></p>&mdash; RIO (@front_to_dev) <a href="https://twitter.com/front_to_dev/status/1591422168344453120?ref_src=twsrc%5Etfw">November 12, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">フロントの人多くて、楽しかった〜🥰<br>次も行きたいな〜 <a href="https://t.co/g00c0BGzLl">https://t.co/g00c0BGzLl</a></p>&mdash; Haruka | フロントエンドエンジニア (@sunny63374783) <a href="https://twitter.com/sunny63374783/status/1591432247374401538?ref_src=twsrc%5Etfw">November 12, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日はオフラインイベントでした。<br><br>コミュニティ系のオフラインイベントに参加するのは初めてだったのですが、レベルの高い方々のビジョンが聞けて、すごく刺激になりました。<br><br>次回が楽しみです！あと、もしLTの枠があれば、なにかしら盛り上げられればと…！</p>&mdash; sumiren (@sumiren_t) <a href="https://twitter.com/sumiren_t/status/1591437132333473794?ref_src=twsrc%5Etfw">November 12, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ヤングなエンジニアに混ざって参加。フロントエンドの話やフリーランスとしての生き残り方などLT面白かった。リアルイベントはめっちゃ刺激になる。自社オフィスでもリアルイベント開催したいお気持ち。<br><br>11/12(土)【もくもく会 @ 新宿】Developers Guild <a href="https://t.co/3LXemQRJ7F">https://t.co/3LXemQRJ7F</a></p>&mdash; 内田太志 | OSSのノーコード・ローコード開発ツール公開中 (@implem_) <a href="https://twitter.com/implem_/status/1591342587033849856?ref_src=twsrc%5Etfw">November 12, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">初のオフライン勉強会めっちゃ楽しかったです！<br>普段社外のエンジニアと話す機会ないし、エンジニアリングの話ばっかで純粋に興味津々だった。笑<br>とりあえずTwitterでも積極的に呟いてこー</p>&mdash; けんや (@k_e1sh1n) <a href="https://twitter.com/k_e1sh1n/status/1591343555833757696?ref_src=twsrc%5Etfw">November 12, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日はデザインドックをテーマにして勉強会でLTしてました<br>最近、見積もりや設計の大切さを身にしみて感じてます<a href="https://t.co/TjsBVoB9rZ">https://t.co/TjsBVoB9rZ</a></p>&mdash; 釜地智也＠ソフトウェアエンジニア (@tomoya_sakusaku) <a href="https://twitter.com/tomoya_sakusaku/status/1591415212548452357?ref_src=twsrc%5Etfw">November 12, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日の登壇資料です。<br>企画していただいたReactおじさん（<a href="https://twitter.com/react_nextjs?ref_src=twsrc%5Etfw">@react_nextjs</a>）ありがとうございました！<a href="https://t.co/XyyieTdSrN">https://t.co/XyyieTdSrN</a></p>&mdash; カルキチ 副島｜Karukichi Soejima (@karukichi_yah) <a href="https://twitter.com/karukichi_yah/status/1591418428484878338?ref_src=twsrc%5Etfw">November 12, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><h2 id="h8d78e14043">感想</h2><h3 id="h0f2d2ac90c">狭すぎた・・・</h3><p>ごめんなさい。これは99.9%私のせいです。。。<br>色々と事故りました申し訳ございません。。。<br>次回はもっと広い会場を押さえます。。。</p><h3 id="ha7ee6fba76">LTの質がどんどん上がっている!!!</h3><p>2年前に開いた勉強会ではキャリアや転職の話がメインでしたが(それはそれで面白いのだが)、最近では技術の話はもちろん設計のお話や開発手法のお話など、さまざまなテーマでお話を頂きました！<br>今回初めて「オブザーバビリティ」という単語も聞けたのでとても学びが多かったです💡</p><h3 id="h2f8e526e74">交流会中のディスカッションがアツい</h3><p>現場で使っている技術を中心に「〇〇使ったらめちゃくちゃ効率上がりましたよ！」「うち〇〇使ってるんですが超おすすめです！」みたいな情報交換がされていたのがとても良かったです！<br>話をしている中で【皆さんこんなこと気になってるんだ】という話もちらほら出てきたので、今後はそのテーマに絞った交流会も企画して行く予定です。(是非お楽しみに...!!)</p><h2 id="h1afe451c43">さいごに</h2><p>簡単ではございますが11月のイベントのまとめとなります。<br>今回はReactおじさんに主催をしてもらいましたが、これからも定期的に開催していくのでご興味ある方は是非ご参加ください！<br><a style="background-color:#ffffff" href="https://twitter.com/react_nextjs" target="_blank" rel="noopener noreferrer">Reactおじさん(@react_nextjs)</a><br><strong>12月はフロントエンドに絞った交流会</strong>を行いますので、気になる方は是非チェックをお願いします！<br>また、運営メンバーも絶賛大募集中ですので【勉強会の運営をしてみたいなぁ】と思った方は是非私までお声がけください！<br>以上。最後までご覧くださりありがとうございました！</p>

30名規模のイベントを開催しましたので簡単なレポートとしてまとめております！

参加者30名！【11月12日@新宿】LT＆交流会・イベントレポート

<h2 id="h8d027c8ed3">はじめに</h2><p>私が運営しているTSLabの第7回・React勉強会の実施ログとなります。<br>第7回のテーマは【メモ化とパフォーマンスの最適化】<br>今回も<strong>Reactおじさん</strong>に講師をして頂きました！<br><a style="background-color:#ffffff" href="https://twitter.com/react_nextjs" target="_blank" rel="noopener noreferrer"><strong>Twitter</strong></a><br>本当にありがとうございます！</p><h2 id="hee779b4dda">勉強会内容</h2><p>今回は<strong>Reactのパフォーマンス</strong>面のお話になります。<br>レンダリングの仕組みから始まり、コンポーネントをメモ化する関数の解説をして頂きました。<br>具体的な内容は下記のドキュメントにまとまっているので気になる方はご覧ください。<br><a href="https://github.com/shogo4131/TSLab-react-study/blob/main/doc/%E7%AC%AC7%E5%9B%9E%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9(%E3%83%A1%E3%83%A2%E5%8C%96)/doc.md" target="_blank" rel="noopener noreferrer">https://github.com/shogo4131/TSLab-react-study/blob/main/doc/%E7%AC%AC7%E5%9B%9E%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9(%E3%83%A1%E3%83%A2%E5%8C%96)/doc.md</a></p><h2 id="hbeca907b4d">サマリー</h2><p>今回触れたのは下記の機能になります。</p><ul><li>React.memo</li><li>useCallback</li><li>useMemo</li></ul><p>これらはコンポーネント内の<strong>DOMや関数を無駄に再生成(再レンダリング)しない</strong>ようReactが公式に提供している機能。<br>使った場合と使わなかった場合とで実際のDOMの差分を見ながら比較して頂きました。</p><h3 id="h6ce25814b7">React.memo</h3><ul><li>propsが変更されない限り最後のレンダリング結果を再利用させる高階コンポーネント</li></ul><p><a href="https://ja.reactjs.org/docs/react-api.html#reactmemo" target="_blank" rel="noopener noreferrer">https://ja.reactjs.org/docs/react-api.html#reactmemo</a></p><h3 id="h4886ea6007">useCallback</h3><ul><li>関数の再生成を防ぐhooks</li><li>React.memoと併用しないと効果を発揮しない</li></ul><p><a href="https://ja.reactjs.org/docs/hooks-reference.html#usecallback" target="_blank" rel="noopener noreferrer">https://ja.reactjs.org/docs/hooks-reference.html#usecallback</a></p><h3 id="h692f02ca4c">useMemo</h3><ul><li>計算結果等をメモ化して無駄な処理をスキップさせるhooks</li></ul><p><a href="https://ja.reactjs.org/docs/hooks-reference.html#usememo" target="_blank" rel="noopener noreferrer">https://ja.reactjs.org/docs/hooks-reference.html#usememo</a></p><h2 id="h7cba51fa78">ディスカッション内容</h2><ul><li>それぞれのパフォーマンス最適化関数を使うタイミング</li><li>とりあえず全てのコンポーネント/関数をメモ化するか否か</li><li>初めからパフォーマンスを考慮して実装するか否か</li></ul><h2 id="h1afe451c43">さいごに</h2><p>React勉強会シリーズ第7弾終了！<br>私自身、脳死でメモ化をしていたので、実際に使うシーンや必要性について学べたのでとても良かったです！<br>参加者同士でも<strong>とりあえず全てメモ化派</strong>、<strong>遅くなってから考える派</strong>、<strong>一旦動くものを作って後で調整派</strong>でざっくり分かれていたのが印象的でした。(ここは宗教論争になるので結論は控えようと思います。)<br>こればっかりは実際に動かしてみて速度計測してみないとわからないので、場数を踏みましょう！以上！って感じですね。<br>ということで、簡単なまとめになります！<br>最後までご覧くださりありがとうございました！</p>

当記事はTSLab・React定例会のレポート記事になります！