<h2 id="h37ba1a78d1">callback関数とは</h2><blockquote>callback is just a function that you pass as a parameter to another function that function will do some work and then call that callback function back</blockquote><p><a href="https://www.youtube.com/watch?v=kz_vwAF4NHI" target="_blank" rel="noopener noreferrer">JavaScript Callbacks Explained in 5 Minutes (Essential for asynchronous code!)</a>より<br><br>↓<br>コールバック関数は、<br><strong>他の関数の引数として渡す関数</strong>で、<br>その関数の処理が終わった後にコールバック関数が呼ばれる。<br></p><h2 id="h512de7d259">使用例</h2><p>setTimeoutは引数にコールバック関数を持つ。<br>js↓</p><pre><code>setTimeout(()=&gt;{
      console.log('1秒後に実行');
},1000);

//同じ意味
const cb = ()=&gt;{
    console.log('1秒後に実行');
}
setTimeout(cb,1000);</code></pre><p><br>↓結果をコンソールで確認（実行後、1秒後にコンソールに表示される）<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/7420b0c2480d4a29bed29c6a8e4b36c3/%202023-02-09%20at%2017.47.55.jpg" alt=""></p><h2 id="hc87d90e3cb">コールバック関数が実行される仕組み</h2><h3 id="hbfffda0a6a">例</h3><pre><code>                    //→説明1
console.log('1');　 //→説明2 //→説明4

setTimeout(()=&gt;{
    console.log('2'); //→説明3 //→説明5
},0);

console.log('3');   //→説明2 //→説明4</code></pre><p>↓結果</p><pre><code>//→1,3,2の順で表示される</code></pre><h3 id="h293f170a56"><br>仕組み</h3><p>1.コードの実行開始<br>2.グローバルコンテキストがコールスタックに積まれる<br>3.タスクが登録される<br>　コールバック関数がタスクキューに登録される<br>4.コールスタックが空になるまで実行される<br>5.コールスタックが全て消滅した後に、タスクキュー内のタスクが実行される。<br>　（コールバック関数が実行される。）<br><br>非同期処理の後に実行したい処理がある場合は、<br>コールバック関数の中にコールバックを入れる必要がある。<br>（コールバック関数は、グローバル関数が全て実行された後に実行されるため）<br><br>→順に実行したい処理がたくさんあると、コールバック地獄となる可能性<br>→解決方法として、非同期処理を扱うためのオブジェクトPromiseが追加された。（ES6）<br></p><h2 id="h335a87b5ef">参考サイト</h2><p>一番しくっりきた解説ビデオ↓</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fkz_vwAF4NHI%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dkz_vwAF4NHI&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2Fkz_vwAF4NHI%2Fhqdefault.jpg&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=youtube" width="560" height="315" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p>

callback関数

<p>window.fetch()について確認と備忘録です。<br></p><h2 id="haa98c475df">fetch()でできることの例</h2><h3 id="h60ef2b3c3f">ポケモンのデータを取得してみる</h3><p>index.htmlのscript内に下記を記載して、コンソールで確認。</p><pre><code>fetch('https://pokeapi.co/api/v2/pokemon/1')
    .then((response) =&gt; response.json())
    .then((data) =&gt; console.log(data));</code></pre><p><br>↓結果、フシギダネの情報が取れた。<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/952ea31ab04247a4b410bfbb5678e782/%202023-02-09%20at%2016.53.36.jpg" alt=""></p><h2 id="hdf2b70b32e">fetch()とは</h2><p>・グローバルのメソッド（window.fetch()）<br>・リソースを取得するためのインターフェース<br>　→上記例のようにHTTPリクエストを送信して外部データを取得したり、外部にデータを送信したりできる。<br>　→内部のjsonファイル取得なども可能。<br>・Promiseを返す<br></p><h2 id="h44cce4849e">fetch()の使い方</h2><p>async/awaitを使う方法と使わない方法がある</p><h3 id="ha95e1a2cdf">async/awaitを使う方法</h3><p>async/awaitを使うことでResponseオブジェクトが返ってくるので、jsonメソッドで処理。</p><pre><code>const getPokemon = async() =&gt;{
    const response = await fetch('https://pokeapi.co/api/v2/pokemon/1');
    const pokemonData = await response.json();
    console.log(pokemonData);
}
getPokemon();</code></pre><p>↓結果(async/awaitを使わない方法と同じ)<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/83acb51c8df3405993ed6d76f111b718/%202023-02-09%20at%2017.10.48.jpg" alt=""></p><h4 id="hb4d1877a26">エラー処理ありverのコード↓</h4><pre><code>const getPokemon = async() =&gt;{
    try{
        const response = await fetch('https://pokeapi.co/api/v2/pokemon/1');
        const pokemonData = await response.json();
        console.log(pokemonData);
    }catch(error){
        // エラーが出た時の処理
        console.log(`エラー：${error}`);
    }
}
getPokemon();</code></pre><p><br></p><h3 id="hc6b82d602e">async/awaitを使わない方法</h3><p>Promise(※)が返ってくるので、thenメソッドで処理。</p><pre><code>fetch('https://pokeapi.co/api/v2/pokemon/1')
    .then((response) =&gt; response.json())
    .then((pokemonData) =&gt; console.log(pokemonData));</code></pre><p>↓結果(async/awaitを使う方法と同じ)<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/b4d90fbb0f9d42b685cbba0beb40fda8/%202023-02-09%20at%2017.10.48.jpg" alt=""></p><h4 id="hb4d1877a26">エラー処理ありverのコード↓</h4><pre><code>        fetch('https://pokeapi.co/api/v2/pokemon/1')
            .then((response) =&gt; response.json())
            .then((data) =&gt; console.log(data))
            .catch((error) =&gt; console.log(error.message));</code></pre><h4 id="h22688e2c6f"><br>※Promiseとは</h4><p>非同期処理を扱うためのオブジェクト。<br>（これがないと、コールバック関数を使用して非同期処理完了後に実行したい関数を渡す必要があるため、コールバック地獄になりうる。）<br>async/awaitを使用することによって、非同期処理を扱いやすくしている。<br></p><h2 id="ha739b3b8f6">その他</h2><p>fetch()を使用できない古いブラウザでは、XMLHttpRequestやBabelを使ってトランスパイルする必要がある。<br></p><h2 id="h335a87b5ef">参考サイト</h2><p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank" rel="noopener noreferrer">MDN</a><br><a href="https://www.webdesignleaves.com/pr/jquery/fetch-api-basic.html" target="_blank" rel="noopener noreferrer">Fetch API fetch() の使い方</a><br><br><br><br></p>

Fetch API(JavaScript)

<h2 id="hda87e93d7b">実装イメージ</h2><p>コードにスタイルがないので味気ない<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/09f191ddbc624b8aa299e13b5a0ff86e/%202022-12-02%20at%2017.06.54.jpg" alt=""><br>↓↓<br>ハイライトさせる<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/396a808786744e67b0dc62e5f471a3ab/%202022-12-02%20at%2016.44.52.jpg" alt=""><br>microCMSから取得できるデータから、<br>cheerioを使用してコード部分の文字列を取り出し、<br>highlight.jsでスタイルをつけ表示させるイメージです。</p><h2 id="h86ee44ea6a">使用ライブラリ</h2><p>cheerio<br>highlight.js</p><h2 id="h6e73ffe2c2">実装ステップ</h2><h3 id="h2beb075646">ライブラリの導入</h3><pre><code>yarn add cheerio highlight.js
yarn add --dev @types/highlightjs @types/cheerio</code></pre><h3 id="h922edff87b">実装</h3><p>①関数を作成<br>引数にブログのコンテンツをセットすることで、<br>コードに色付きのクラスを当てて返却してくれる関数(renderHighlightedBody)を作ります。<br><br><a href="https://github.com/emi-h/my-blog/blob/main/src/libs/render-toc.js" target="_blank" rel="noopener noreferrer">src/libs/render-toc.js</a>↓</p><pre><code>import * as cheerio from "cheerio";
import hljs from "highlight.js";

export const renderHighlightedBody = (body) =&gt; {
  const $ = cheerio.load(body);

  $("pre code").each((_, elm) =&gt; {
    const result = hljs.highlightAuto($(elm).text())
    $(elm).html(result.value)
    $(elm).addClass("hljs")
  })
  return $.html();
};</code></pre><p><br>②関数を実行して変数に格納・出力<br><a href="https://github.com/emi-h/my-blog/blob/main/src/pages/blog/%5Bid%5D.tsx" target="_blank" rel="noopener noreferrer">src/page/blog/[id].tsx</a>↓</p><pre><code>type Props = Blog &amp; MicroCMSContentId &amp; MicroCMSDate;

const Post: NextPage&lt;Props&gt; = (props) =&gt; {
  //①で作成した関数を使用して、ハイライトされたコードを変数に格納
  const highlightedBody = renderHighlightedBody(props.content);

  return (
    &lt;&gt;
        &lt;article&gt;
          &lt;h1&gt;{props.title}&lt;/h1&gt;
          &lt;div
            className={styles.blog_post}
            dangerouslySetInnerHTML={{ __html: highlightedBody }}
          /&gt;
        &lt;/article&gt;
    &lt;/&gt;
  );
};

export const getStaticPaths: GetStaticPaths&lt;{ id: string }&gt; = async () =&gt; {
  const data = await client.getList&lt;Blog&gt;({ endpoint: "blog" });
  const paths = data.contents.map((content) =&gt; `/blog/${content.id}`);

  return { fallback: "blocking", paths };
};

export const getStaticProps: GetStaticProps&lt;Props, { id: string }&gt; = async (
  context
) =&gt; {
  if (!context.params) {
    return {
      notFound: true,
    };
  }

  const data = await client.getListDetail&lt;Blog&gt;({
    contentId: context.params.id,
    endpoint: "blog",
  });

  return {
    props: data,
    revalidate: 10,
  };
};

export default Post;</code></pre><h2 id="h335a87b5ef">参考サイト</h2><p><a href="https://qiita.com/cawauchi/items/ff6489b17800c5676908" target="_blank" rel="noopener noreferrer">next.js+microcmsでシンタックスハイライトの導入</a><br><br>以上です！</p>

cheerioとhighlight.jsを使用してシンタックスハイライトを導入しました。

シンタックスハイライトでコードにいい感じに色をつけてみた

<h2 id="h8f27fbddf6">ドキュメント</h2><p>この記事はNext.jsドキュメント内、<a href="https://nextjs.org/docs/basic-features/data-fetching/overview" target="_blank" rel="noopener noreferrer">Data Fetching Overview</a>の説明や自分なりに勉強したことの記録です。<br>間違ってたらご指摘ください！</p><h2 id="h5bfb8ebe85">Next.jsでのデータ取得の方法</h2><p>Next.jsのデータフェッチでは、アプリケーションのユースケースに応じて、さまざまな方法でコンテンツをレンダリング※することができる。<br>よって、アプリケーションによってどの方法でレンダリングするのか選択する必要があります。<br>ブラウザからのデータ取得はどの方法とでも組み合わせ可能。<br><br><em>※ここでいうレンダリングはブラウザレンダリング（ブラウザへの描画）の事ではなく、</em><br><em>Reactのレンダリング（Reactがコンポーネントを呼び出す）のことです。</em><br>先日書いた記事：<a href="https://3things.work/blog/react-render" target="_blank" rel="noopener noreferrer">Reactのレンダリングとは</a><br><br>下記4つの方法が紹介されています。</p><h2 id="h3256d733ae">方法4つ</h2><ul><li>SSR(Server-Side Rendering)：サーバーサイドレンダリング</li><li>SSG(Static Site Generation)：静的サイト生成</li><li>CSR(Client Side Rendering)：クライアントサイドレンダリング</li><li>ISR(Incremental Static Regeneration)：インクリメンタル静的生成</li></ul><h2 id="hbc728093b0">4つの方法は何が異なるのか</h2><p>データフェッチ・ファイル生成のタイミングの違い。Next.jsでは関数が用意されている。</p><ul><li>SSR(Server-Side Rendering)：リクエスト時にサーバーでデータ取得＋プリレンダリング→生成ファイル返却。</li><li>SSG(Static Site Generation)：ビルド時にデータ取得＋レンダリング、リクエスト時は生成済の静的ファイルを返される。</li><li>CSR(Client Side Rendering)：リクエスト時にサーバーからファイル返却＋クライアント側でデータ取得。</li><li>ISR(Incremental Static Regeneration)：SSGと同じく生成済ファイルが返される＋一定時間後にリクエストしたらページを再生成してくれる。</li></ul><h2 id="h2195e4bab0">もう少し詳しく</h2><h3 id="hb7cc7f5a19">SSR(サーバーサイドレンダリング)とは</h3><p>データ取得とレンダリングをサーバー側で実行する。（ブラウザでは実行されない）<br><strong style="background-color:#fcf3db">メリット：</strong><br>サーバー側でレンダリングされるので、APIキーなどの露出が防げる。<br>（propsに秘密情報は含めないこと。）<br><strong style="background-color:#fcf3db">デメリット：</strong><br>サーバーに負荷がかかる。<br>サーバー側でデータ取得をするので（クライアント側でデータ取得するのと比較して）時間がかかり、インタラクティブ性が低い。<br>キャッシュが効かない。(stale-while-revalidateオプション有)<br> Vercelではlimitation制限がかかる場合がある。<br><strong style="background-color:#fcf3db">使いどころ：</strong><br>リクエスト時にデータ取得したい時（認証や位置情報によって取得データが変わる時など）<br>SEO indexが重要なサイト<br><strong style="background-color:#fcf3db">使い方：</strong><br>getServerSidePropsを使用。<br>（pageからexportすること。component内で使用できない。）</p><h3 id="h4600ead575">SSG(静的サイト生成)とは</h3><p>ビルド時に静的ファイルを生成しておき、リクエストが来たら静的ファイルを返す。<br>リクエスト前にデータ取得やファイル生成がされているので速い。<br><strong style="background-color:#fcf3db">メリット：</strong><br>キャッシュを効かせたいとき<br><strong style="background-color:#fcf3db">デメリット：</strong><br>ビルド後の更新情報は反映されない。（クライアントデータ取得との組み合わせは可能。）<br>リアルタイムなデータが欲しい場合には不向き。<br><strong style="background-color:#fcf3db">使いどころ：</strong><br>headless CMSとの組み合わせ<br>SEO対策が必要なサイト<br><strong style="background-color:#fcf3db">使い方</strong><br>getStaticPropsを使用。<br>（pageからexportすること。component内で使用できない。）</p><h3 id="h0aca23e5fd">CSR（クライアントサイドレンダリング）とは</h3><p>クライアントサイドでレンダリングを実行する（サーバーサイドでは実行されない）<br><strong style="background-color:#fcf3db">メリット：</strong><br>最新データが反映できる。<br><strong style="background-color:#fcf3db">デメリット：</strong><br>クライアント側の速度に左右される。<br>データはキャッシュされない。（SWR使用でキャッシュなど解決できる）<br>SEOに強くない可能性あり（リクエスト時にサーバーから返却されたhtmlを確認すると、取得データがまだないことがわかる。）<br><strong style="background-color:#fcf3db">使いどころ：</strong><br>SEO indexを気にしなくて良いとき。<br>プリレンダリングが必要ないとき。<br><strong style="background-color:#fcf3db">使い方</strong><br>useEffectなど使用。（getServerSidePropsやgetStaticPropsを使用しない）</p><h3 id="h7f762781d1">&nbsp;ISR（インクリメンタル静的サイト生成）とは</h3><p>SSGで静的ページ生成後に、revalidate（キャッシュを返す時間）を設定すれば、サイト全体を再ビルドせずにページごとに再生成してくれる。<br>revalidate後のアクセスでも先にキャッシュしたページを返す。<br><strong style="background-color:#fcf3db">メリット：</strong><br>SSGのページを更新できる<br>余分なリクエストを発生させない。（リクエストがなければ再生成されない。）<br><strong style="background-color:#fcf3db">デメリット：</strong><br>常に最新のデータが表示されなければならないページでは使えない。<br><strong style="background-color:#fcf3db">使いどころ：</strong><br>更新の入るページ<br><strong style="background-color:#fcf3db">使い方</strong><br>getStaticPropsにrevalidateを追加</p><h2 id="h3de35099b3">参考</h2><p>Vercel:<a style="color:inherit" href="https://vercel.com/docs/concepts/incremental-static-regeneration/overview" target="_blank" rel="noopener noreferrer">https://vercel.com/docs/concepts/incremental-static-regeneration/overview</a><br><br><span style="color:inherit">以上です！</span></p>

Next.jsでのデータ取得方法について

<h2 id="hcb9dacb773">結論</h2><p>「React」のレンダリングと「ブラウザ」のレンダリングは違う</p><h2 id="hb24582eb86">なぜ調べたか</h2><p>Next.jsのドキュメント内Data Fectching <a href="https://nextjs.org/docs/basic-features/data-fetching/overview" target="_blank" rel="noopener noreferrer">overview</a>の項目で<br>SSR(サーバーサイドレンダリング)やCSR(クライアントサイドレンダリング)などの言葉が出てきます。<br>ブラウザのレンダリングとReactのレンダリングについて、違いをわかっておらず混乱したことがあるのでまとめました。</p><h2 id="h8f27fbddf6">ドキュメント</h2><p>この記事はReact(2022.11.17現在BETA版)ドキュメント内<a style="color:inherit" href="https://beta.reactjs.org/learn/render-and-commit" target="_blank" rel="noopener noreferrer">Render and Commit</a>の説明を自分なりに言語化したものです。<br>間違ってたらご指摘ください！</p><h2 id="h27707e3d7d">Reactのレンダリングとは</h2><p>ドキュメントではレンダリングのステップを3つに分けて説明しています。</p><ol><li>Trigger a render（レンダリングのきっかけ）</li><li>React renders your components（コンポーネントのレンダリング）</li><li>React commits changes to the DOM（DOMの反映）</li></ol><h3 id="h47630965ae">Step 1: Trigger a render（レンダリングのきっかけ）</h3><p>コンポーネントがレンダリングするきっかけは下記2つ。</p><ul><li>初回のレンダリング</li><li>コンポネート（または親など祖先コンポーネント）のstateが変わった時</li></ul><h4 id="h09c23ae4bc">初回レンダリング</h4><p>アプリケーション起動→createRootを呼び出す→renderメソッド（レンダリングメソッド）を呼び出す。</p><pre><code>import Image from './Image.js';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'))
root.render(&lt;Image /&gt;);</code></pre><h4 id="hb205337f4a">再レンダリング（stateに変更があったとき）</h4><p>2回目以降のレンダリングは、set関数を使用することで再レンダリングさせることが可能。<br>set関数の例↓</p><pre><code>const [name, setName] = useState('Edward');</code></pre><h3 id="h0a031d3c79">Step 2: React renders your components（コンポーネントのレンダリング）</h3><blockquote>After you trigger a render, React calls your components to figure out what to display on screen. “Rendering” is React calling your components.</blockquote><p>「レンダリング」はReactがコンポーネントを呼び出すこと。</p><ul><li>初回のレンダリングでは、Reactはrootコンポーネントを呼び出す。</li><li>2回目以降のレンダリングは、レンダリングのきっかけとなった関数コンポーネントが呼び出される。</li></ul><p>これらのプロセスは、ネストされたコンポーネントがどんどんレンダリングされていき、処理が終わるまでずっと続く。</p><h3 id="h4b524714b3">Step 3: React commits changes to the DOM（DOMの反映）</h3><p>Reactは、コンポーネントをレンダリング後、DOMを反映する。<br>初回レンダリングでは、appendChild()でDOMノードをスクリーンに表示する。</p><ul><li>再レンダリングでは、必要最小限の操作で、DOMを最新のレンダリングと一致させる。</li><li>レンダリングでDOMに差異がある場合のみDOMが反映がされる。（差分がなければ反映なし）</li></ul><h3 id="hbc0a477c17">Epilogue: Browser paint（エピローグ：ブラウザー描画）</h3><blockquote>After rendering is done and React updated the DOM, the browser will repaint the screen. <br>Although this process is known as “browser rendering”, we’ll refer to it as “painting” to avoid confusion in the rest of these docs.</blockquote><p>レンダリングとReactのDOM生成終了後、ブラウザーがスクリーンに表示します。このプロセスは「ブラウザレンダリング」として知られていますが、私たちは混乱を避けるためにドキュメント内では「描画」と呼びます。</p><h2 id="he45680f0bc">参考記事</h2><p><a style="color:inherit" href="https://zenn.dev/1129_tametame/articles/bf4fc2005bea4d" target="_blank" rel="noopener noreferrer">Reactのレンダリングを理解する</a><br><br><span style="color:inherit">以上です！</span></p>

「React」のレンダリングと「ブラウザ」のレンダリングは違うのです

Reactのレンダリングとは

<h2 id="h9ea529580c">なぜブランチルールが必要？</h2><p>Gitのブランチルール作ってますか？<br>私はずっと個人開発でGitHubを使用してきましたが、ブランチ名は特に意識していませんでした。<br>一人で開発する場合は、それで良いかもしれませんが、<br>共同開発になるとブランチルールを作っておかないと収集がつかなくなります。<br><br>共同開発の際は、まずブランチの運用ルールの確認が必要になりますが、<br>基礎知識としてgit-flowやgithub-flowについて知っておくと役に立ちそうなので下記にまとめました。<br>※概念の話で、コマンドなどは書きません。<br><br>もし間違いなどあれば教えていただけると嬉しいです！</p><h2 id="hcf90b9174b">どんなブランチルールがある？</h2><ul><li>git-flow</li><li>github-flow</li></ul><p>※会社ごとのルールや作るものによっても異なる。</p><h2 id="hd1b339fbad">git-flowについて</h2><h3 id="h89652f3f21">5つのブランチに分かれる</h3><p>下記5つのブランチに分かれます。</p><ul><li>main</li><li>hotfix</li><li>release</li><li>develop</li><li>feature</li></ul><p>masterとdevelopはいつも存在するブランチで、その他は必要に応じて追加分岐する。</p><h3 id="h2a4122d658">イメージ</h3><p><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/4eb6265711674b41b48f382effe0142b/git-flow.jpg" alt=""><br><a style="color:inherit" href="https://nvie.com/posts/a-successful-git-branching-model/" target="_blank" rel="noopener noreferrer">A successful Git branching model</a>を参考に作った図です。</p><h3 id="h88a60cf6ce">各ブランチの意味</h3><h4 id="h0bb93eb21d">main</h4><p>常にデプロイできる状態にしておく。（開発中のものを置かない）<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/b93945689b244b84b2744975a2edcaba/git-flow_main.jpg" alt=""></p><h4 id="h8cbbc4cf59">hotfix</h4><p>リリース後のバグ対応など緊急用。<br>mainから分岐する。mainへのマージ＋developmentへのマージも行う。<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/e21fef03ed074d0c91e3cb9aedbc0abb/git-flow_hotfix.jpg" alt=""></p><h4 id="hc795cea6a1">release</h4><p>リリースの準備用。テストなど行う。<br>developから分岐。リリース準備ができたらmainとdevelopへマージする。<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/5f15a6e3b458442abf2a42539dbbd28d/git-flow_release.jpg" alt=""></p><h4 id="h312be50a1f">develop</h4><p>開発用、このブランチで作業は行わない。<br>（作業はここからfeatureを分岐させる）<br>開発が終わったらリリース準備のためにreleaseへマージする。<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/2225beff0092423ba3b202fb8d0c8bdd/git-flow_develop.jpg" alt=""></p><h4 id="h0b42f62511">feature</h4><p>機能開発用。developから分岐してdevelopにマージする。<br>feature/xxxとして複数存在してOK。<br><img src="https://images.microcms-assets.io/assets/cdab8ababbd2456dbaca807b6f355556/a73edbc1f3774bd2b9e9d5113d49066f/git-flow_feature.jpg" alt=""><br></p><h3 id="h1cd88398e8">簡単な使い方</h3><p><a href="https://www.sourcetreeapp.com/" target="_blank" rel="noopener noreferrer"> SourceTree</a>などgit-flowを簡単に使える機能がついているようです。</p><h3 id="h3ab24f6f50">メリット</h3><ul><li>本番データと開発中データがしっかり分かれる。</li></ul><h3 id="h7e4a670898">デメリット</h3><ul><li>複雑（マージ先が複数あったりする）</li></ul><p><br></p><h2 id="h1a70d413b4">github-flowについて</h2><h3 id="h2a4122d658">イメージ</h3><p>github-flowはgit-flowをもっとシンプルにしたもの、というイメージです。</p><h3 id="h335a87b5ef">参考サイト</h3><p><a href="https://docs.github.com/ja/get-started/quickstart/github-flow" target="_blank" rel="noopener noreferrer">GitHub フロー</a></p><h3 id="hf13b660e68">フロー</h3><ol><li>mainからブランチ（feature-xxなど）を作成。</li><li>ブランチ（feature-xxなど）で開発。</li><li>pull request を作成する</li><li>レビュー コメントに対応する</li><li>pull request をマージする</li><li>ブランチを削除する</li></ol><h3 id="h3ab24f6f50">メリット</h3><ul><li>シンプル</li><li>レビューしてもらえる</li></ul><h2 id="h402c9639b9">git-flowとgithub-flow結局どっち？</h2><p>どちらが優れているということはなく、<br>作るものやプロダクトのリリース方法によって、最適なブランチ管理方法は異なります。<br>上記2つ（github-flow、github-flow）の概念を知っておけば、<br>会社で新たにルールを作ることになった時や初めてのプロジェクトに参加するときも<br>慌てずに済むと思います。<br><br>以上です！<br></p>

console.log(emi);

このサイトについて

Blog記事