<h3 id="h81b8e1d601">コンポーネント化</h3><pre><code>import React from "react";
import ReactDom from "react-dom";

const App = () =&gt; {

&nbsp;return (

&nbsp;&lt;&gt;&nbsp;

&nbsp;&nbsp;&lt;h1&gt;こんにちは！&lt;/h1&gt;

&nbsp;&nbsp;&lt;p&gt;お元気ですか？&lt;/p&gt;

&nbsp;&lt;/&gt;

&nbsp;);

};



// コンポーネントをエクスポートして、他のファイルでインポートできるようにする。

export default App;</code></pre><p><br></p><h3 id="ha214098e44">まとめ</h3><p>・コンポーネントとは画面要素の1単位。大（1画面）から小（1つのテキストボックス）まで様々。<br>・コンポーネント名は必ず先頭を大文字から始めるようにする。<br>・コンポーネントをエクスポートして、他のファイルでインポートできるようにする。</p>

React チュートリアル【コンポーネント】

<h2 id="h8d027c8ed3">はじめに</h2><p><br>本サイトでもある「Tech Blog」のディレクトリ構造をなんとなくで運用していたので<br>今回は自分でも確認しつつ簡単に説明できればと思います。<br></p><h2 id="h9ff89bd48f">ディレクトリ構成</h2><pre><code>project_root/
├── components/
│&nbsp;&nbsp;└── Header.tsx &nbsp;&nbsp;// Atomic Design準拠 UIコンポーネントを配置する。
├── libs/
│&nbsp;&nbsp;└── client.ts&nbsp;&nbsp;&nbsp;// 使用しているライブラリ固有のコードで、初期化や設定のコードなど、自分はmicroCMSとの接続設定書いてます
├── pages/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Nextjsでルーティングされるページコンポーネントを配置する。
│ &nbsp;├── api/
│ &nbsp;│ &nbsp;└── hello.ts &nbsp;&nbsp;// WebApi等の外部APIのクライアントを配置する。*hello.tsは初期配置
│ &nbsp;├── blog/
│ &nbsp;│ &nbsp;└── [id].tsx &nbsp;&nbsp;// Blogページにまつわるディレクトリ 記事詳細ページの処理など
│ &nbsp;├── _app.tsx &nbsp;&nbsp;&nbsp;&nbsp;// 全ページで必要な処理 (ページ間共通レイアウト, 共通のstate)
│ &nbsp;└──&nbsp;index.tsx &nbsp;&nbsp;&nbsp;// indexページ
├── public/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 静的ファイル(画像など)を配置する。
│ &nbsp;├── favicon.ico
│ &nbsp;└── vercel.svg
├── styles/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// 全体のスタイルを配置する。
│ &nbsp;└── globals.css // 全ページに適用されるcssファイル
├── types/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// typescriptのカスタム型定義
│ &nbsp;├── blog.ts
│ &nbsp;└── highlightbody.ts
├── .gitignore
├── .prettierrc.yml
├── README.md &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// リポジトリの説明書
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json</code></pre><p><br></p><h2 id="h1afe451c43">さいごに</h2><p><br>あくまで、自身の「TechBlog」一例なのでプロジェクトに合わせて構築することが重要だと思われます。<br>また、ディレクトリの定義も自分の中で調べた知識による解釈になるのでご容赦いただけると幸いです。。。<br>いやぁでも、Nextjsは良いですね、使いやすいし、早いしで、とても良い！！！！<br></p><h3 id="h6cdab1c097">さぁあなたも Nextjs最高！　Vercel最高！！ SSG最高！！！！！！</h3>

Next.js-Projectディレクトリ構造

<h1 id="hb24d3adf1c">ブランチ運用ルール</h1><p><br></p><h2 id="he4bfbf1fe7">TL;DR</h2><p>個人開発においても常にチーム開発を意識する。<br><strong>"ロール"</strong>を意識した開発、運用をする。<br>いわゆるGit-flow<br></p><h2 id="h52e8b9f495">開発フロー</h2><p>1. GitHub にリポジトリを作る<br>2. 開発で取り組む ToDo リストを Issues に細かくまとめる<br>3. main ブランチから新たに feature/*** という機能追加のためのブランチを切って作業を始める<br>4. 完了したら feature/*** を GitHub リポジトリの origin に Push する<br>5. GitHub の画面で Pull Request を新たに作成し、ヘッダーの作成 fix #1 のように対応する Issue の番号と合わせてコメントする<br>6. Pull Request 上で自分のコードをレビュー（チームの場合は他の人）し、良ければ main ブランチに merge して Issue が閉じられていることを確認<br>7. 手元のブランチを main に戻し、origin から最新版のコードを Pull してくる<br>8. 3~7 を繰り返す<br></p><h2 id="h5fcec0cf90">所感</h2><p>どんなにしょぼい個人開発でもチーム開発を意識するとなんか楽しい！！！<br><br>はい、、最近TechBlogの開発を行っていく上でブランチ運用ルールを自分なりに見直す機会があったので<br>初心に戻ってフローを備忘録として、また"戒め"として残します。<br><br><img src="https://images.microcms-assets.io/assets/661f51695d9d4fb590c322a7cdea4bf7/5039d70ffcea426292e28ffc07ae5ff3/The%20main%20tranch.png" alt=""><br></p>

ブランチ運用ルール

<h1 id="h5e015cd3e6">React</h1><h2 id="h8d027c8ed3">はじめに</h2><h3 id="h0aa4eee83f">Reactとは</h3><p><br><a href="https://ja.reactjs.org/docs/getting-started.html" target="_blank" rel="noopener noreferrer">公式ドキュメント</a><br></p><h2 id="h988a96138d">JSX記法のルール</h2><pre><code>// Reactコンポーネントを書く場合、お作法としてreactのインポートが必要（React17のアップデートでJSXを使用するだけの場合は記述不要になった）

import React from "react";

// htmlにコンポーネントを反映するために、react-domをインポートする

import ReactDom from "react-dom";




// Reactでは関数を使用して画面の要素であるコンポーネントを表現していけるので、アロー関数を書いていく

const App = () =&gt; {

&nbsp;return (

&nbsp;&nbsp;&lt;&gt;&nbsp;

&nbsp;&nbsp;&nbsp;&lt;h1&gt;こんにちは！&lt;/h1&gt;

&nbsp;&nbsp;&nbsp;&lt;p&gt;お元気ですか？&lt;/p&gt;

&nbsp;&nbsp;&lt;/&gt;

&nbsp;);

};




// Appをコンポーネントとしてレンダリングする

// 第一引数にレンダリングしたいコンポーネント、第二引数に反映箇所を指定する

ReactDom.render(&lt;App /&gt;, document.getElementById("root"));</code></pre><p><br></p><h2 id="ha214098e44">まとめ</h2><p>jsxはjavascriptの中にHTMLを書いていく。<br>ファイル拡張子はjsxとする。<br>returnの内容が複数になる場合は（）で囲う必要がある。<br>returnしていく内容は1つのタグで囲わないとエラーになるので、フラグメント（&lt;&gt;&lt;/&gt;）で囲ってあげる。</p>

React チュートリアル【JSX記法のルール】

<h1 id="hcb2cc14d43">Failed to load SWC binary for darwin/x64 エラー対処</h1><p><br>こんばんは！<br>テックブログ(仮)の開発進めようとした時にそれは起こりました。。。<br><br>いつも通りnpm run devで挙動確認しようとしたところ<br>Failed to load SWC binary for darwin/x64上記のエラーが現れました。。。<br><br>なんで、前は普通にnpm run devが出なかったのに急に現れるんだと思いましたが<br>単純に自分のスキル不足を痛感し、エラーログを素直に確認します。<br></p><pre><code>(base) ~/Desktop/dev/nextjs/microcms-next-jamstack-blog $ npm run dev&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;


&gt; microcms-next-jamstack-blog@0.1.0 dev
&gt; next dev


ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info&nbsp; - Loaded env from /Users/{マイPCだよ＊＊＊＊＊＊＊}/Desktop/dev/nextjs/microcms-next-jamstack-blog/.env.local
warn&nbsp; - Attempted to load @next/swc-darwin-x64, but it was not installed
error - Failed to load SWC binary for darwin/x64, see more info here: https://nextjs.org/docs/messages/failed-loading-swc</code></pre><p><br>自分のPC名が本名モロバレなので編集しております。。<br>語丁寧にエラー解消に関係ありそうなリンクが表示されていたので遷移して確認しましたが、<br>https://nextjs.org/docs/messages/failed-loading-swc<br><br><strong style="color:#111111">swc 依存関係</strong><span style="color:#111111">に問題があると書いてあり、nodeモジュールの再インストールとかすれば良いとのことで</span></p><pre><code>$ npm i --force</code></pre><p><br>上記のコマンドを適当に実行してみましたが、特に治るわけではなく<br>諦めてGoogle先生にエラーコード投げつけたら<br>https://tutorial.tips/how-to-fix-failed-to-load-swc-binary-nextjs/<br>上記の記事に辿り着きました。<br><br>潔論として自分が解決した方法として</p><pre><code>$ npm install next@canary</code></pre><p><br>上記のコマンドで治りました。。<br><span style="color:#4a5568;font-family: Monaco, Courier New, monospace">canaryという</span>nextのバージョンをインストールすれば良かったようです。。<br><br>とりあえずこれで解決しますが、根幹の部分が理解できていないので<br>今後理解できるように精進したいと思います。<br><br><strong>追記</strong><br>上記のコマンドでもupできない場合</p><pre><code>npm install -E --save-optional @next/swc-linux-x64-gnu</code></pre><p><br></p>

記事一覧