<h1 id="hc9a634bb89">Next.js12.2 + Emotion 環境構築</h1><p><br>Next.jsのバージョン12.2からEmotionの@emotion/babel-pluginが不要になったらしいのでその設定を行う。<br></p><h2 id="hada1924547">Create Next-app</h2><pre><code>yarn create next-app --typescript</code></pre><p>yarnじゃなくてnpmでも良い<br>対話でプロジェクト名聞かれるので適当につける</p><pre><code>cd プロジェクト名</code></pre><h2 id="h5507faed53"><br>mkdir src</h2><p>pagesとstylesをsrc配下に移動する。<br>この手順は別に飛ばしてもいい</p><pre><code>mkdir src
mv pages src/pages
mv styles src/styles</code></pre><p><br>tsconfig.jsonに以下を追記</p><pre><code>{
&nbsp; "compilerOptions": {
&nbsp; &nbsp; "baseUrl": "./",
&nbsp; &nbsp; "paths": {
&nbsp; &nbsp; &nbsp; "@/*": ["./src/*"],
&nbsp; &nbsp; &nbsp; "/*": ["*"]
&nbsp; &nbsp; },
&nbsp; &nbsp;....略
}</code></pre><p><br></p><h2 id="hac0c15f028">add emotion</h2><p>emotionをインストールする</p><pre><code>yarn add @emotion/react</code></pre><p><br>css 属性を使用するためにtscongfig.jsonに以下を追記</p><pre><code> {
    "compilerOptions": {
      "baseUrl": "./",
      "paths": {
        "@/*": [ "./src/*" ],
        "/*": [ "*" ]
      },
     "jsxImportSource": "@emotion/react",　// 追記
      .....略
  }</code></pre><p><br></p><h2 id="h253cadcae5">END</h2><p>以上で環境構築は終わりです。<br>.babelrcファイルなどを作成しなくてよくなったみたいなので、少し手間が省けました。<br><br>Emotionについては自分もまだ経験があまりないので、これから覚えていきたいと思います。<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>

Next.js + Emotion

<h2 id="h8d027c8ed3">はじめに</h2><p>この記事は複数に分かれています。<br>前回までの記事をご覧になっていない場合はそちらの記事を読んでいただいた方が流れがわかると思います。<br></p><h2 id="h36d2caf651">今回やること</h2><ul><li>Styled-componetsのインストール</li><li>Headerの作成</li><li>Fotterの作成</li><li>Layoutの作成</li><li>Headの設定</li></ul><p><br></p><h2 id="h9460a4c88f">Styled-components</h2><p>Next.jsのプロジェクトでは様々なスタイルの適用方法があります。<br>今回はCSS in JSの中でも有名なStyled-componentsというものを使用します。</p><h3 id="hd8d793506b">インストール</h3><pre><code>npm install --save styled-components</code></pre><p>型定義ように以下もインストールしておきます</p><pre><code>npm install --save-dev @types/styled-components</code></pre><p>Styled-componentsはサーバーサイドでは動かないためサーバーサイドでも動くように設定をしていきます</p><pre><code>npm install --save-dev babel-plugin-styled-components</code></pre><p>.babelrcファイルをルートディレクトリ(package.jsonを同じ階層)に作成します。<br>中に以下を記述<br><strong><em>.babelrc</em></strong></p><pre><code>{
  "presets": ["next/babel"],
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "ssr": true,
        "displayName": true
      }
    ]
  ]
}</code></pre><p>これでStyled-componentsの設定は以上です。<br></p><h3 id="h8b6bf20b90">GlobalStylesの作成</h3><p>stylesディレクトリの下にGlobalStyles.jsを作成<br><strong><em>src &gt; styles &gt; GlobalStyles.js</em></strong></p><pre><code>import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  :root{
    --primary: #707070;
    --subprimary: #DFDFDF;
    --blue: #007ACC;
    --white : #ffffff;
    --black: #000000;
  }
  html{
    font-size: 10px;
    height: 100vh;
  }
  body{
    background-color: var(--white);
    font-family: 'Roboto Mono';
    color: var(--black);
    letter-spacing: 0.1em;
  }
  ul,li{
    list-style: none;
  }
  a{
    text-decoration: none;
    color: var(--black);
  }
  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  button{
    outline: none
  }
`;
export default GlobalStyles;</code></pre><p>共通のスタイルはここに書いておきます<br>使用する色はこのように管理しておきます。</p><pre><code>  :root{
    --primary: #707070;
    --subprimary: #DFDFDF;
    --blue: #007ACC;
    --white : #ffffff;
    --black: #000000;
  }</code></pre><p>呼び出し方</p><pre><code>color:var(--primary)</code></pre><p>var()の中に:rootの内で管理している色を呼び出します<br></p><h2 id="hc36c636162">Headerコンポーネントを作成する</h2><p>src以下にcomponensディレクトリを作成<br>componentsの中にLayoutディレクトリを作成<br>その下に全ページで共通して表示するものを入れていきます<br>Header.tsxをLayoutディレクトリの下に作成する<br><strong><em>src &gt; components &gt; layout &gt;Header.tsx</em></strong></p><pre><code>import Link from 'next/link';
import styled from 'styled-components';
// --------------- Function ---------------
export default function Header() {
  return (
    &lt;HeaderStyles&gt;
      &lt;Link href='/'&gt;
        &lt;a&gt;LOGO&lt;/a&gt;
      &lt;/Link&gt;
    &lt;/HeaderStyles&gt;
  )
}
// --------------- Styles ---------------
const HeaderStyles = styled.header`
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 4rem;
`;</code></pre><p><br></p><h2 id="hf3551bcce9">Footerコンポーネントを作成</h2><p>layoutディレクトリの下にFotter.tsxを作成<br><strong><em>src &gt; components &gt; layout &gt;Footer.tsx</em></strong></p><pre><code>import styled from 'styled-components';
// --------------- Function ---------------
export default function Footer() {
  return (
    &lt;FooterStyles&gt;
      &lt;p&gt;&lt;small&gt;&amp;copy;2021 TestBlog&lt;/small&gt;&lt;/p&gt;
    &lt;/FooterStyles&gt;
  )
}

// --------------- Styles ---------------
const FooterStyles = styled.footer`
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
  color: var(--white);
`;</code></pre><p><br></p><h2 id="h52d25dad6c">Layoutの作成</h2><p>Layoutはどのページでも共通して表示するものです。<br>例えばheaderやfooter、お問い合わせのコンポーネントはどのページでも共通して表示してあることが多いと思います。<br>Layoutを使わない場合はpage以下にあるファイル全てにheaderコンポーネント等をインポートしなければなりせん。<br>layoutディレクトリ以下にLayout.tsxを作成<br><strong><em>src &gt; components &gt; layout &gt;Layout.tsx</em></strong></p><pre><code>import { PropsWithChildren } from 'react';
import GlobalStyles from '../../styles/GlobalStyles';
import Footer from './Footer';
import Header from './Header';
// --------------- Function ---------------
export default function Layout({ children }: PropsWithChildren&lt;any&gt;) {
  return (
    &lt;&gt;
      &lt;GlobalStyles /&gt;
      &lt;Header /&gt;
      &lt;main&gt;{children}&lt;/main&gt;
      &lt;Footer /&gt;
    &lt;/&gt;
  );
}</code></pre><p>Layoutコンポーネントのpropsをchildrenとして、mainタグの中で呼び出します。<br>こうすることでLayoutコンポーネントで囲んだ中身がchildrenとしてLayoutに渡されます。<br>GlobalStylesコンポーネントを呼び出しておくことでスタイルが適用されます。</p><h3 id="hcf83e1357e"><br></h3><h2 id="h31b4b84ff7">全ページに適用させる</h2><p>_app.tsxは全ページに適用させたい処理などを書くときに使用されます<br>そのため、ここで使用されているコンポーネントをLayoutコンポーネントで囲むことで全ページに適用させます<br><strong><em>pages &gt; _app.tsx</em></strong></p><pre><code>import type { AppProps } from 'next/app';
import Layout from '../components/layouts/Layout';
function MyApp({ Component, pageProps }: AppProps) {
  return (
    &lt;Layout&gt;
      &lt;Component {...pageProps} /&gt;
    &lt;/Layout&gt;
  );
}
export default MyApp;</code></pre><p><br></p><h2 id="hc37038ca0e">index.tsxを編集</h2><p>トップページに当たるindex.tsxを編集します。<br><strong><em>pages &gt; index.tsx</em></strong></p><pre><code>export default function Home() {
  return (
    &lt;div&gt;
      &lt;h1&gt;Hello&lt;/h1&gt;
    &lt;/div&gt;
  )
}</code></pre><p>とりあえずHelloとだけ表示させておきましょう。<br>開発サーバーを立ち上げ、headerとfooter、スタイルが適応されていることを確認しましょう</p><pre><code>npm run dev</code></pre><p><br></p><h2 id="habd14d76e1">Headの設定</h2><p>HTMLではheadタグに当たるものがNext.jsにはありません。<br>そのためサイトタイトルやメタデータを記述するためにはHeadを読み込む必要があります<br>今回は全ページ共通のHeadを作成するため、Layoutに設置していきます。<br><strong><em>src &gt; components &gt; layout &gt;Layout.tsx</em></strong></p><pre><code>// 追加
import Head from 'next/head';

import { PropsWithChildren } from 'react';
import GlobalStyles from '../../styles/GlobalStyles';
import Footer from './Footer';
import Header from './Header';
// --------------- Function ---------------
export default function Layout({ children }: PropsWithChildren&lt;any&gt;) {
  return (
    &lt;&gt;
      &lt;Head&gt;
        &lt;title&gt;Next Blog&lt;/title&gt;
        &lt;meta name='description' content='Generated by create next app' /&gt;
        &lt;link
          rel='icon'
          href='https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/whale_1f40b.png'
        /&gt;
      &lt;/Head&gt;
      // 省略
   &lt;/&gt;
    );
  }</code></pre><p>Headコンポーネントの中にHTMLで書いているのと同じように記述することができます。<br>faviconは<a href="https://emojipedia.org/" target="_blank" rel="noopener noreferrer">こちら</a>のサイトを使用させていただいています。<br>画像のURLをコピーして貼り付けています。<br></p><h2 id="ha214098e44">まとめ</h2><p>今回から本格的に作成に入っていきました。<br>これから少し難しくなりますが、頑張りましょう。<br></p>

Next.js + Typescript + microCMSでJamstackブログを作ってみた Part2

<h2 id="h466509ec71">やること</h2><ul><li>Next.jsのプロジェクト作成</li><li>gitの初期化</li><li>Typescriptの設定</li><li>Prettierの設定</li><li>ESLintの設定</li></ul><p><br></p><h2 id="hfce1a2d0ed">create-next-app</h2><p>next.jsのプロジェクトは1から作成することも可能なのですが、ある程度設定されたテンプレートが多く用意されています。<br>そのためコマンド1つで簡単にプロジェクトが作成できてしまいます。<br><br>プロジェクトを作成していきますが、プロジェクトを作成するにはnodeがインストールされている必要があります。<br>今回はインストールの説明は省かせていただきます。<br>インストールするだけならそんなに難しいことではないので、こちらの記事を参考にインストールしてください<br><br>プロジェクト作成に戻ります。<br>コマンドで以下を実行</p><pre><code>npx create-next-app next-myblog-tutorial --typescript</code></pre><p>npx create-next-appでプロジェクトを作成できる<br>next-myblog-tutorialはプロジェクトの名前<br>--typescriptをつけることでtypescriptの設定がある程度された状態でプロジェクトを作成することができます。<br><br>作成したらプロジェクトに移動してエディタで開いて中身を確認してみましょう。<br>私はVscodeを使用しています。</p><pre><code>cd next-myblog-tutorial</code></pre><p><br></p><h3 id="hfddae80311">srcファイルを作成</h3><p>srcファイルを作成し、その中に</p><pre><code>pages
styles</code></pre><p>を入れてください<br><br><img src="https://images.microcms-assets.io/assets/44cececc4a0d4daf808d11650bd2a04c/f477578400064eff97e9645f789cb44f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-09-03%2019.20.15.png" alt=""><br></p><h2 id="h3e97871681">gitの初期化</h2><p>プロジェクトを作成すると最初から.gitファイルが作成されているので一度削除して初期化します</p><pre><code>rm -rf .git
git init
git checkout -b main
git add .
git commit -m 'first-commit'</code></pre><p><br></p><h2 id="hbf38e45b3d">開発サーバーを立ち上げる</h2><pre><code>npm run dev</code></pre><p><br>開発サーバーはホットリロードに対応していたりと、開発しているときには便利なので基本はこちらで開発を進めていきます。<br>他には、buildやstartといった様なコマンドがありますが、それは後に出てきます。<br><a href="http://localhost:3000/" target="_blank" rel="noopener noreferrer">localhost:3000</a>dで以下の様なページが確認できたら成功です。<br><br><img src="https://images.microcms-assets.io/assets/44cececc4a0d4daf808d11650bd2a04c/33f72b82d536473e9345f13d48a8cf18/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-09-03%2018.36.03.png" alt=""><br></p><h2 id="h2d6f9e6749">Typescriptの設定</h2><p><strong>tsconfig.json</strong>にbaseUrlを追加します。<br>baseUrlをsrcにします。</p><pre><code>{
  "compilerOptions": {
    "baseUrl": "src"
    // 省略
  }
  // 省略
}</code></pre><p>srcディレクトリで表示させるファイルを管理したいため、baseUrlをsrcに変更しました。<br></p><h2 id="h2625f069f9">Prettierをインストール</h2><pre><code>npm install -D prettier eslint-config-prettier</code></pre><ul><li>prettier  コードをフォーマットする</li><li>eslint-config-prettier  eslintのルールと被らない様にする</li></ul><h3 id="h67bc3ee3f4">Prettierの設定</h3><p>package.jsonに設定を書いていきます。<br>最低限必要だと思う設定をしておきます。<br>他の設定も見てみたい方は<a href="https://prettier.io/docs/en/options.html" target="_blank" rel="noopener noreferrer">公式HP</a>を参考にしてみてください</p><pre><code>{
    // 省略
  "devDependencies": {
    "@types/react": "17.0.19",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2",
    "eslint-config-prettier": "^8.3.0",
    "prettier": "^2.3.2",
    "typescript": "4.4.2"
  },
  "prettier": {
    "trailingComma": "all",
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "jsxSingleQuote": true,
    "printWidth": 100
  }
}</code></pre><p><br></p><h2 id="h39f50e5530">Eslintの設定</h2><p>.eslintrc.jsonファイルを編集していきます。</p><pre><code>{
  "extends": [
    "next",
    "next/core-web-vitals",
    "prettier"
  ]
}</code></pre><p><br>package.jsonファイルを開き以下を追記する</p><pre><code>  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    //--dir srcを追記
    "lint": "next lint --dir src",
    // formatのscript
    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'"
  },</code></pre><p><br></p><pre><code>npm run lint</code></pre><p>を行うとsrcファイル以下をlintにかける<br></p><pre><code>npm run format</code></pre><p>を行うとprettierを走らせフォーマットしてくれる<br>けどいちいちこんなことしてられないので、saveをするたびに実行するように設定していきます。<br></p><h2 id="h4d8b10f598">save時に自動フォーマットを行う</h2><p>ここからはVscodeでの設定になります。<br>左下の歯車を押して設定を開きます<br><br><img src="https://images.microcms-assets.io/assets/44cececc4a0d4daf808d11650bd2a04c/10f84a1b01b749eaa7236412a7360e69/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-09-03%2019.55.54.png" alt=""><br><br>この時ワークスペースを選択していることに注意してください。<br>別にユーザーでもいいのですが、プロジェクトごとに設定が変わったりすることもあるので今回はワークスペースで設定をしていきます。<br><br>ワークスペースを選択したら右上にあるアイコンの一番左を選択することでjson形式で設定を書くことができます。<br>設定内容は以下です。</p><pre><code>{
  // デフォルトのフォーマッタを prettier に設定
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // ファイル保存時、prettier による自動フォーマット
  "editor.formatOnSave": true,
  // ファイル保存時、ESLint による自動フォーマット
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "typescript.tsdk": "node_modules/typescript/lib"
}</code></pre><p><br>これでsaveをしたときにprettierがはしり整形してくれます。<br></p><h2 id="h25d0e20685">おまけ</h2><h3 id="h70f8da49c3">importの順番をアルファベット順にする</h3><p>.eslintrc.jsonを以下に書き換え</p><pre><code>{
  "extends": [
    "next",
    "next/core-web-vitals",
    "prettier",
    "plugin:import/recommended",
    "plugin:import/warnings"
  ],
  "rules": {
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
  }
}</code></pre><p><br>これで保存した時にimportの順番がアルファベット順になります。<br></p><h2 id="ha214098e44">まとめ</h2><p>個人的に設定などは最初から理解する必要はないと思っています。<br>自分も設定についての知識は全くないので、テンプレートを使用することが多いです。<br>慣れてきたら、カスタマイズして自分にあった環境を作りましょう！<br>これもプログラミングの楽しいところだと思います。<br><br>設定がある程度終わったので次回からブログの作成に入っていきます。<br>少しむずかいしいところや理解に苦しむところがあると思いますが、じっくりコードを読めばわかってきます。<br>諦めずに頑張りましょう！<br></p>

Next.js + Typescript + microCMSでJamstackブログを作ってみた Part1

<h2 id="h8d027c8ed3">はじめに</h2><p>タイトルにあるとおりSNSを作ってみたいと思います。<br>私はまだNext.jsとTypescriptを少ししか触っていないため、内容的にはあまり詳しくかけていません。<br>ただの挑戦企画と思って参考にできるところだけ参考にしてください。<br><br>要件定義や設計方法などは全くの素人です。<br></p><h2 id="h9bbb0bca62">開発環境</h2><ul><li>Macbook Pro</li><li>VsCode</li><li>PyCharm</li><li>Anaconda(仮想環境)</li><li>AdobeXD</li></ul><p><br></p><h2 id="h23061a5cab">技術構成</h2><ul><li>React or Next.js</li><li>Typescript</li><li>Django</li><li>Tailwindcss</li></ul><p><br></p><h2 id="h23b452be9f">とりあえず何からするか</h2><p>まだ何も形が作れていないので、とりあえず何を実装、定義していけばいいのかを思い当たるだけ書いてみる<br></p><h3 id="ha31bd80de1">要件</h3><ul><li>どのようなSNSにするか<ul><li>ソースコードをメインにしたSNSを作ってみたい</li></ul></li><li>どのような意図があるか<ul><li>いろんな人のコードを見れるようにしたい</li><li>エンジニア同士の繋がる機会が増えるようにしたい</li></ul></li><li>目的は何か<ul><li>エンジニア同士の交流が増えてくれればいいなと思う</li></ul></li></ul><p><br></p><h3 id="ha0cb2968c7">機能面</h3><ul><li>デザイン<ul><li>シンプルで使いやすく</li><li>見やすいTOP</li><li>ごちゃごちゃしないようにする</li><li>使う流れの意識</li></ul></li><li>アプリ<ul><li>認証機能</li><li>投稿機能<ul><li>テキスト</li><li>ソースコード</li><li>Github URL</li></ul></li><li>Bookmark</li><li>言語別ソート機能</li><li>投稿一覧表示</li><li>個別ページ表示<ul><li>アカウント名</li><li>Github URL</li><li>自身の投稿</li><li>できる言語</li></ul></li><li>コメント機能</li></ul></li></ul><p><br>とりあえず思い当たるのはこれぐらいなので、思いついたら追加していくようにしよう<br><br>次回はデザインをざっくり考えていこうと思います。<br></p>