{"pageProps":{"blogs":[{"id":"rrmqt_2_ql","createdAt":"2022-02-10T13:55:37.462Z","updatedAt":"2022-03-04T22:07:10.434Z","publishedAt":"2022-03-04T22:07:10.434Z","revisedAt":"2022-03-04T22:07:10.434Z","title":"React(Typescript)\b+Redux+Fireb...","body":"

手順を忘れないように、忘却の空とその彼方へ花束を


パッケージ管理はYarnを使う。
CSSフレームワークにはTailwind CSSを利用。

大まかな流れ↓

create react appコマンドでReact+Typescriptプロジェクトを作成する。
Tailwind CSS導入する
Eslint,Prettierの設定

create react appコマンドでReact+Typescriptプロジェクトを作成する。


❯ node -v\nv16.13.0\n\n~\n❯ yarn -v\n1.22.17\n\n~\n❯ npx create-react-app --version\n5.0.0\n\n~\n❯ npx create-react-app realtime-db-react --template typescript


memo:
yarnがローカルにインストールされているときはパッケージマネージャーにYarnが使われる。
https://zenn.dev/ryuu/articles/force-npm-with-cra

Eslint,Prettierの設定


→https://zenn.dev/jpnasane/articles/d7f44682b74fdc

~/Project/React/react-chatapp master* 22s\n❯ yarn run eslint --init


\"\"

設定はこんな感じ。

Typescript用のパッケージインストール

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser



Airbnbの細かい設定をしてくれるやつをインストール

~/Project/React/react-chatapp master* 22s\n❯ npx install-peerdeps --dev eslint-config-airbnb\n\n...(略)\nSUCCESS eslint-config-airbnb\n  and its peerDeps were installed successfully.


Prettierのパッケージをインストール。

yarn add -D prettier eslint-config-prettier


Tailwind CSS導入する


~\n❯ yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9


これやると、

zsh: no matches found: postcss@^7


が出た。
→
解決方法

create react appコマンドで作成したプロジェクトはwebpackの設定をオーバーライドできない。つまり、PostCSSの設定を上書きできない。
→cracoをインストールする。

yarn add @craco/craco


package.jsonファイル内のスクリプトでcracoを利用するように変更

{\n    // ...\n    \"scripts\": {\n     \"start\": \"craco start\",\n     \"build\": \"craco build\",\n     \"test\": \"craco test\",\n     \"eject\": \"react-scripts eject\"\n    },\n  }


これでyarn startしてみると、、

UnhandledPromiseRejectionWarning: TypeError: match.loader.options.plugins is not a function


的なエラーが出る。
→
解決方法

craco.config.js内にある

postcssの記述をpostcssOptionsに変える。

これで
yarn startでプロジェクト立ち上がる。

次はtailwind CSSの設定

~\n❯ npx tailwindcss init


して、tailwind.config.jsで

purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],


とする。

index.cssに

@tailwind base;\n@tailwind components;\n@tailwind utilities;


を追加。

firebase関連


firebase login

~\n❯ firebase login\nAlready logged in as amahaya0831@gmail.com


すでにログイン済み。

コンソールでプロジェクト作って、webアプリを作成。
Realtime Databaseを作成。


プロジェクト配下で

firebase init


とりま、Realtime Datebase....

のところだけチェックすればok。

database.rules.jsonで全部trueにしておく。
→ のちfirebase deployで設定を反映させる必要あり

firebaseのsdkを利用するため、

yarn add firebase\nyarn add @types/firebase


で、envファイル作成して設定値を埋める。

Redux導入


~/Project/React/react-chatapp main\n❯ yarn add redux react-redux @types/react-redux redux-thunk @types/redux-thunk reselect @types/reselect


","shortCodes":[],"image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/fc42d78ad4d448c7bb98d5325202503b/freerank.jpeg","height":1066,"width":1600},"writer":{"id":"m73jw7s_c5","createdAt":"2021-08-17T08:51:41.536Z","updatedAt":"2022-03-05T03:54:47.547Z","publishedAt":"2021-08-17T08:51:41.536Z","revisedAt":"2022-03-05T03:54:47.547Z","name":"飲茶","image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/bb3a3f10aa364a0f85d158a5d77bdae5/hpfullyamuchalogodeka.png","height":500,"width":500},"position":"代表取締役巡査部長警視総監監査補佐","twitter":"https://twitter.com/hpfull_01","instagram":"https://www.instagram.com/happyfull.jp/","link":"#","comment":"宗教戦争主導権を握り頭脳戦を。。。","email":"ctodayo@hpfull.jp","award":"慶應の文系学部で独学→長期インターンで開発経験→複数の超大手Web企業からエンジニア職で内定。","publications":"「宗教戦争を終わらせたたった1つの方法」など","affiliate":"
\n\n\n\n
","directors":"代表取締役 雨海新太"},"tags":[{"id":"n54oitv4eq","createdAt":"2021-12-23T14:07:39.007Z","updatedAt":"2021-12-23T14:07:39.007Z","publishedAt":"2021-12-23T14:07:39.007Z","revisedAt":"2021-12-23T14:07:39.007Z","name":"開発"},{"id":"qd1vp5v-kor","createdAt":"2021-12-25T01:06:25.588Z","updatedAt":"2021-12-25T01:06:25.588Z","publishedAt":"2021-12-25T01:06:25.588Z","revisedAt":"2021-12-25T01:06:25.588Z","name":"勉強"},{"id":"s2orci1u4gs","createdAt":"2022-03-04T22:06:15.255Z","updatedAt":"2022-03-04T22:06:15.255Z","publishedAt":"2022-03-04T22:06:15.255Z","revisedAt":"2022-03-04T22:06:15.255Z","name":"react.js"}],"noindex":false},{"id":"11_b0nwhu0","createdAt":"2022-01-15T17:07:47.197Z","updatedAt":"2022-03-15T04:00:13.122Z","publishedAt":"2022-01-15T18:08:21.770Z","revisedAt":"2022-03-15T04:00:13.122Z","title":"Next.js×microCMSで自作のポートフォリオサイト...","body":"

こちらで見てください!!



今回は本サイトのようなNext.js×microCMSのサイトが一人で作れるようになるまでのヌクヌクロードマップを解説していきたいと思います。
この記事の通りに学んでいけば自作のホームページやポートフォリオサイトが無料で構築できます！！
ぜひ最後までご覧ください。
※このロードマップはあくまで本ブログのようなほぼ静的なWebサイトを作れるようになるまでのロードマップです。

最初に、ロードマップ作成に参考にしたサイトです。フロントエンドのデベロッパーの開発・運用に必要なスキルや知識、ツールやテクノロジーをステップバイステップのフローにまとめたロードマップです。英語で書いてありますが、時間のある時に見ておいてください。
https://roadmap.sh/frontend
フロントエンドのデベロッパーの開発・運用に必要なスキルや知識、ツールやテクノロジーをステップバイステップのフローにまとめたロードマップです。

0.最初に


まず最初に大まかな流れと使用するツールについて触れておきましょう。

大まかな流れ

\"\"

上記のようなステップを踏んでいくことを頭に入れておきましょう！

使用するツール(エディター)


使用するツールは都度自分で調べて合いそうなものを使用していくのが良いです。
エディターはVisual Studio Code(VSCode)がおすすめですが、AtomやSublime Textを利用するのも良いと思います。

1.Internet


さあここからは実際に勉強に入っていきます。
ここではインターネット上でどのようにしてWebサイトが動くか、その仕組みについて概要を理解します。
Webを支える根幹の記述ですので理解しておくべき事項となります。ただ、プログラマブルに中の設計まで詳細に理解する必用はなく、そもそもそれはなんぞや？と言う点と、大きな流れとして何が動いていて、どの要素がどう働きあっているのかが分かれば良いかと思います。
この章で今回私たちが作るNext.js×microCMSのサイトの仕組みも理解できるかと思います。
CMSやヘッドレスCMSについてはまた別途サイトで調べるなどしましょう。
この章に関しては、書籍を読みつつ並行して2以降に進んでいけば良いかと思います。

Internet 推薦教材


ここで私が推薦する教材は以下の2つの書籍です。
<<internet>>


どちらも名著であり初心者であっても分かりやすいので大変お勧めできる書籍となっています。
※権力なき社団ハッピフルの構成員であれば、福利厚生「CTOの書籍を勝手に拝借しよう」を使うことでオフィス内にあるこちらの書籍を見つけることで無断で持ち出すことが可能です！

2.HTML,CSS


次に学ぶのはHTML,CSSです。
皆さんおなじみかと思いますが、HTML,CSSはwebサイトの画面で表示されているプログラムです。
基本的なことを学び、がっつりここでWeb制作の力などつけたい人は演習で何かしらのサイトの模写をすると良いと思います。

↓私がプログラミング学習を始めて最初に行った模写がツイッターの模写でした。

完全未経験でプログラミング始めた時の懐かしい模写です！
ProgateのHTML,CSSを終えたら軽く模写して何か形にしてみると学びが大きいし何より楽しいですよ！#駆け出しエンジニアと繋がりたい#プログラミング初心者#今日の積み上げ #Progate#相互フォロー#権力なき社団ハッピフル pic.twitter.com/DvEjFD4hcH

— やむちゃ@ハッピフル (@hpfull_01) March 8, 2022


HTML,CSS 推薦教材


<<htmlcss>>

書籍でちゃんと学びたい人は
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
で学ぶと良いでしょう。
または、シンプルにProgateなどでHTML,CSSのコースをするのが手っ取り早いかと思います。僕はHTML,CSSのコースをHTML & CSS Flexbox編までしっかりとやり込みました。
道場コースは時間に余裕があればやっておくと良いかと思います！

3.JavaScript


JavaScript はウェブページにて複雑な機能をできるようにするプログラミング言語です。上記のHTMLやCSSでできたWebサイトに動きをつけることができます。例えば、画像のスライダーやマウスを動かした際のアニメーションなどです。
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 JavaScript

JavaScript 推薦教材


<<javascript>>

Progateでコースを一通り行った上でもっと本格的に学びたいとなった場合は上記書籍やドットインストールの動画を推薦します。

4.パッケージマネージャー


パッケージマネージャーは現代のフロントエンドエンジニアにとって必須の知識ですが、本サイトのようなものを作る上で雰囲気で乗り切ろうと思えば行けちゃうかもしれません。
パッケージマネージャーとは、他の人が作成したパッケージ（package）と呼ばれる『機能をまとめたもの』を管理（manage）するものです。セットで多少の linux コマンドも使えるようになることが望ましいです。
推薦教材とかは特になく、やっていく中で雰囲気を掴んでいきましょう。ちなみに、次に紹介するじゃけえ先生の書籍でパッケージマネージャーについて触れられているのでそこで学ぶのもアリです！
よく分からないエラーが出た、調べても全然分からん、というときはパッケージマネージャーでのエラーであることが経験的に多かったです。
「npm」や「Yarn」といった単語が出てきた際には少し思い出してみてください。

5.JavaScriptライブラリ React.js


JavaScriptのフレームワーク(ライブラリ)は

などがありますが、本サイトでも利用されている、ReactとそのラッパーであるNext.jsを推奨します。
フレームワークってそもそも何？って思ったら定番のこちらのサイトを参照しましょう。
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 フレームワーク

React.js 推薦教材


いきなりReact.jsに触れると、結局これは動いたけど何やってんの？っていう感じになると思うので、そんな時はじゃけえさんという方の以下のUdemy教材(現在は書籍)で学ぶと良いです。
この教材はJavaScriptの復習にもなるためここで相当理解が深まります。

モダンJavaScriptの基礎から始める挫折しないためのReact入門

<<reactsyoseki>>
書籍はこちら

こちらは

JavaScriptへの理解なくしてReactの習得はなし得ません。


というじゃけえ先生の信念のもと作られた教材です。
これを視聴すればReactが裏側でやってくれていることのイメージがしやすくなります。

上記を学んだら、以下のUdemy教材

Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

こちらを視聴しつつ手を動かして楽しくノラリクラリヌクヌクコーディングしていきましょう。

もしReactからいきなり入るのは嫌だというイヤイヤ期の方は、jQueryを学んでから雰囲気を掴むと良いかもしれません。
jQueryはavaScriptを簡単に扱うことができるようにするライブラリ（よく使われる機能やプログラミングの部品を集めてひとまとめにしたもの）です。

例

var testList = document.getElementsByClassName('test-list');


getElementsByClassName('test-list')\tはhtml\b上のtest-listというクラス名のものを配列で取得するという処理です。
jQueryを使えば、この処理が

var testList = $('.test-list');


として書くことができます。

jQueryに関してもProgateで学んでおくので十分だと言えます。

Next.js 推薦教材


Reactについてある程度理解ができたら次はNext.jsを学んでいきましょう。
まずはNext.jsのチュートリアルです。こちらをやることでSSR(サーバーサイドレンダリング)って何？SPA(シングルページアプリケーション)と何が違うの？とかが理解できます。
また、チュートリアルは都度見返すものとなります。全く分からん!となってもさらっと流して進むことが大事です。

さて、これで一通り本サイトのような静的なサイトを構築するための知識には触れました。
では実践として以下の記事を読んで世の中に自分のサイトを無料で公開しましょう!!
Next.js(TypeScript)+ Vercel + TailwindCSS + microCMS で自作ホームページを無料で公開しよう!![ガチテックブログシリーズ]

また、Next.jsのプロジェクトをVercelというホスティングサービスにデプロイ(インターネットに公開的な)するのにGithubというツールを利用します。ここで軽く学んでおきましょう。。
プロダクト開発をチームでする場合も、個人でする場合もソースコードをどこかしらで管理しなければなりません。

Git入門：Git初学習者のための効率的な学習方法を考えてみた

こちらを読んでおきましょう。

最後におまけ


ここまでみてくださり誠にありがとうございました!!
実際には手を動かして学んでいきながら、ここも足りないな、となれば自分で調べて学んでいく姿勢が非常に重要です。
それではまた、ご機嫌よう。

","shortCodes":[{"fieldId":"shortCode","code":"internet","body":"
\n\n\n
"},{"fieldId":"shortCode","code":"htmlcss","body":""},{"fieldId":"shortCode","code":"javascript","body":""},{"fieldId":"shortCode","code":"reactsyoseki","body":""}],"image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/1fae30db14d04c19bbf5d6f0a9615ed7/nextmicroportfolioroadmap.png","height":1240,"width":1748},"writer":{"id":"m73jw7s_c5","createdAt":"2021-08-17T08:51:41.536Z","updatedAt":"2022-03-05T03:54:47.547Z","publishedAt":"2021-08-17T08:51:41.536Z","revisedAt":"2022-03-05T03:54:47.547Z","name":"飲茶","image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/bb3a3f10aa364a0f85d158a5d77bdae5/hpfullyamuchalogodeka.png","height":500,"width":500},"position":"代表取締役巡査部長警視総監監査補佐","twitter":"https://twitter.com/hpfull_01","instagram":"https://www.instagram.com/happyfull.jp/","link":"#","comment":"宗教戦争主導権を握り頭脳戦を。。。","email":"ctodayo@hpfull.jp","award":"慶應の文系学部で独学→長期インターンで開発経験→複数の超大手Web企業からエンジニア職で内定。","publications":"「宗教戦争を終わらせたたった1つの方法」など","affiliate":"
\n\n\n\n
","directors":"代表取締役 雨海新太"},"tags":[{"id":"wni6v6osq","createdAt":"2022-01-02T09:29:42.635Z","updatedAt":"2022-01-02T09:29:42.635Z","publishedAt":"2022-01-02T09:29:42.635Z","revisedAt":"2022-01-02T09:29:42.635Z","name":"福利厚生"},{"id":"qd1vp5v-kor","createdAt":"2021-12-25T01:06:25.588Z","updatedAt":"2021-12-25T01:06:25.588Z","publishedAt":"2021-12-25T01:06:25.588Z","revisedAt":"2021-12-25T01:06:25.588Z","name":"勉強"},{"id":"n54oitv4eq","createdAt":"2021-12-23T14:07:39.007Z","updatedAt":"2021-12-23T14:07:39.007Z","publishedAt":"2021-12-23T14:07:39.007Z","revisedAt":"2021-12-23T14:07:39.007Z","name":"開発"},{"id":"s2orci1u4gs","createdAt":"2022-03-04T22:06:15.255Z","updatedAt":"2022-03-04T22:06:15.255Z","publishedAt":"2022-03-04T22:06:15.255Z","revisedAt":"2022-03-04T22:06:15.255Z","name":"react.js"},{"id":"y3z8g1vqn","createdAt":"2022-03-04T22:06:35.103Z","updatedAt":"2022-03-04T22:06:35.103Z","publishedAt":"2022-03-04T22:06:35.103Z","revisedAt":"2022-03-04T22:06:35.103Z","name":"microCMS"}],"noindex":false},{"id":"b5zqzgp5_y","createdAt":"2021-12-29T17:44:25.246Z","updatedAt":"2021-12-29T17:44:25.246Z","publishedAt":"2021-12-29T17:44:25.246Z","revisedAt":"2021-12-29T17:44:25.246Z","title":"ホームページとは？","body":"

ホームページとは


ホームページとは「家」のページです。なんでもそうです。ホームグラウンド、ホームランなどホームとは、「家」と言う意識が重要です。
この意識があるかないかでは変わってきます。
クライアントにも納得いただけるまで言い続けます。まずはどういった家を作りたいのか、和風なのか洋風なのか、家を意識するのです。家に住むということです。

理解いただけないクライアント様には拳で解決することもあります。それほど家ということが重要なのです。

<<home>>

","shortCodes":[{"fieldId":"shortCode","code":"home","body":""}],"image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/ceff8ed982fa42aba55e7406d9ea914f/Green27_40420141123162504_TP_V.jpeg","height":850,"width":1600},"writer":{"id":"fhrfe02v1s","createdAt":"2021-12-28T13:01:42.429Z","updatedAt":"2022-03-06T15:16:02.030Z","publishedAt":"2021-12-28T13:01:42.429Z","revisedAt":"2022-03-06T15:16:02.030Z","name":"KtaroAtGanon","image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/d6ce125e5bc74a5aa656a4ed4f43d3c9/kotaroicon.png","height":500,"width":500},"position":"麺担当","twitter":"#","instagram":"#","link":"#","comment":"頑張ります。","email":"taroGanon@gmail.com","award":"都内の大学→大手IT企業へ就職。プログラミング勉強中です。","publications":"「関東人の、質量が軽くなっちまうだろう」","affiliate":"
\n\n\n\n
","directors":"帝国理科院 宮島遅刻"},"tags":[{"id":"fjutnje457","createdAt":"2021-12-29T17:40:07.156Z","updatedAt":"2021-12-29T17:40:07.156Z","publishedAt":"2021-12-29T17:40:07.156Z","revisedAt":"2021-12-29T17:40:07.156Z","name":"web制作"},{"id":"qd1vp5v-kor","createdAt":"2021-12-25T01:06:25.588Z","updatedAt":"2021-12-25T01:06:25.588Z","publishedAt":"2021-12-25T01:06:25.588Z","revisedAt":"2021-12-25T01:06:25.588Z","name":"勉強"},{"id":"n54oitv4eq","createdAt":"2021-12-23T14:07:39.007Z","updatedAt":"2021-12-23T14:07:39.007Z","publishedAt":"2021-12-23T14:07:39.007Z","revisedAt":"2021-12-23T14:07:39.007Z","name":"開発"}],"noindex":false},{"id":"qj5rgkpz1pjk","createdAt":"2021-12-24T17:08:10.359Z","updatedAt":"2021-12-26T19:31:27.137Z","publishedAt":"2021-12-24T17:08:19.525Z","revisedAt":"2021-12-26T19:31:27.137Z","title":"Next.js×microCMSでタグ一覧ページを作成。[ネ...","body":"

フィールド作成


作成の仕方自体は、
カテゴリの作成方法
で、microCMSのコンテンツAPIにタグとかカテゴリとかを作成しておきます。
\"\"
こんな感じです。

ブログ側のAPIスキーマに先ほど作成したカテゴリなりタグなりを参照フィールドとして指定したものを追加します。
\"\"
こんな感じです。

ディレクトリ構成


ディレクトリ構成はこんな感じで作りました。

└── tags\n│       ├── [tag]\n│       │   └── page\n│       │       └── [id].js\n│       ├── [tag].js\n│       └── index.js


/tags
がtag一覧ページです。本サイトヘッダーからTAGに行ってみてください。
/tags/[tag]
が特定タグがついている記事の一覧ページです。
/tags\b/[tag]/page/[id]
が特定タグがついている記事のページネーションのための実装です。

ページネーション実装はこちらの記事も参考にしてください。

実装のポイント


getStaticPathsでページネーション用のパスを作成する際に、ネストされた動的なルーティングを実装する部分で少し詰まりました。
出てきたエラー文:

Error: Extra keys returned from getStaticPaths in /tags/[tag]/page/[id] (resPaths) Expected: { paths: [], fallback: boolean } See here for more info: https://nextjs.org/docs/messages/invalid-getstaticpaths-value



結論、

export const getStaticPaths = async () => {\n  const tags = await client.get({ endpoint: \"tags\", queries: { limit: 100 } });\n\n\n  const resPaths = await Promise.all(\n    tags.contents.map((tag) => {\n      const result = client\n        .get({\n          endpoint: \"blogs\",\n          queries: {\n            filters: `tags[contains]${tag.id}`,\n            limit: 100,\n          },\n        })\n        .then(({ totalCount }) => {\n          const range = (start, end) =>\n            [...Array(end - start + 1)].map((_, i) => start + i);\n\n\n          return range(1, Math.ceil(totalCount / 4)).map(\n            (i) => `/tags/${tag.id}/page/${i}`\n          );\n        });\n      return result;\n    })\n  );\n  const paths = resPaths.flat();\n  return { paths, fallback: false };\n};


みたいな感じでやりました。
get /tags でtag全部をとり、tagをmapで回して一つの特定のtagに対してその特定のtagがついている記事をgetします。

ポイントは作成した配列をflat化している点です。

何もしない場合:

[\n  [ { params: [Object] } ],\n  [ { params: [Object] } ],\n  [ { params: [Object] } ],\n  [ { params: [Object] } ],\n  [ { params: [Object] }, { params: [Object] } ],\n  [ { params: [Object] }, { params: [Object] } ],\n  [ { params: [Object] }, { params: [Object] } ]\n]


となるので、以下の形にしなければいけないので、flat()で配列をflat化する。

[\n  { params: { tag: 'a__qj7f004qi', id: 1 } },\n  { params: { tag: '2e7y_miiq', id: 1 } },\n  { params: { tag: 'pv74k4x3u5', id: 1 } },\n  { params: { tag: 'nsppv8907xeo', id: 1 } },\n  { params: { tag: 'pkcqsc-2qdz', id: 1 } },\n  { params: { tag: 'pkcqsc-2qdz', id: 2 } },\n  { params: { tag: 'e_ylg36dhaj', id: 1 } },\n  { params: { tag: 'e_ylg36dhaj', id: 2 } },\n  { params: { tag: 'n54oitv4eq', id: 1 } },\n  { params: { tag: 'n54oitv4eq', id: 2 } }\n]



参考リンク


Next.js: getStaticPaths for nested dynamic routes

Next.js + microCMSでカテゴリ一覧ページを作る

microCMS + Next.jsでJamstackブログを作ってみよう

アフィリエイトリンク


<<next>>

","shortCodes":[{"fieldId":"shortCode","code":"next","body":""}],"image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/84a5e0bca52e40958a17e7f64727da61/22195784_m.jpg","height":1280,"width":1920},"writer":{"id":"m73jw7s_c5","createdAt":"2021-08-17T08:51:41.536Z","updatedAt":"2022-03-05T03:54:47.547Z","publishedAt":"2021-08-17T08:51:41.536Z","revisedAt":"2022-03-05T03:54:47.547Z","name":"飲茶","image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/bb3a3f10aa364a0f85d158a5d77bdae5/hpfullyamuchalogodeka.png","height":500,"width":500},"position":"代表取締役巡査部長警視総監監査補佐","twitter":"https://twitter.com/hpfull_01","instagram":"https://www.instagram.com/happyfull.jp/","link":"#","comment":"宗教戦争主導権を握り頭脳戦を。。。","email":"ctodayo@hpfull.jp","award":"慶應の文系学部で独学→長期インターンで開発経験→複数の超大手Web企業からエンジニア職で内定。","publications":"「宗教戦争を終わらせたたった1つの方法」など","affiliate":"
\n\n\n\n
","directors":"代表取締役 雨海新太"},"tags":[{"id":"n54oitv4eq","createdAt":"2021-12-23T14:07:39.007Z","updatedAt":"2021-12-23T14:07:39.007Z","publishedAt":"2021-12-23T14:07:39.007Z","revisedAt":"2021-12-23T14:07:39.007Z","name":"開発"}],"noindex":false},{"id":"lxhloxl8860z","createdAt":"2021-12-01T16:32:14.291Z","updatedAt":"2021-12-24T17:57:08.334Z","publishedAt":"2021-12-01T17:24:56.625Z","revisedAt":"2021-12-24T17:57:08.334Z","title":"僕のおすすめの本というか書籍というか書冊というか図書というか","body":"

なんだろう、良書紹介するの辞めてもらっていいすか


お久しぶりです。終身名誉リトルボスの原です。おまいさんにおすすめの本を紹介します。#絶対大丈夫 #うーん、クッキーかなー


Amazon Web Services 基礎からのネットワーク&サーバー構築 改訂3版


<<amazon2>>

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか

<<amazon1>>

イラスト図解式 この一冊で全部わかるWeb技術の基本


<<amazon3>>

Webを支える技術 -HTTP、URI、HTML、そしてREST


<<amazon4>>



","shortCodes":[{"fieldId":"shortCode","code":"amazon1","body":""},{"fieldId":"shortCode","code":"amazon2","body":""},{"fieldId":"shortCode","code":"amazon3","body":""},{"fieldId":"shortCode","code":"amazon4","body":""}],"image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/d979afb6f7164334b5ee89511d1fb433/osusumehonn.png","height":500,"width":500},"writer":{"id":"7zo_fmw2t","createdAt":"2021-08-17T08:53:38.281Z","updatedAt":"2022-03-06T14:16:48.187Z","publishedAt":"2021-08-17T08:53:38.281Z","revisedAt":"2022-03-06T14:16:48.187Z","name":"mjtjuj","image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/dee9f0ec456649db8b80c7cb2788744f/kaitoicon.png","height":500,"width":500},"position":"最年長トレーニー","twitter":"https://twitter.com/minnadeyarou00","instagram":"https://www.instagram.com/happyfull.jp/","link":"#","comment":"営業マン。","email":"hpfull.mjtjuj@gmail.com","award":"成成明学獨國武の大学→都内大手IT企業で営業として働いています。毎日が勉強です。","publications":"「ただ、お茶を汲む。ー激詰めインターン生の日常ー」","affiliate":"
\n\n\n\n
","directors":"最年長課長 田中舘海橘"},"tags":[{"id":"nsppv8907xeo","createdAt":"2021-12-23T14:08:18.998Z","updatedAt":"2021-12-23T14:08:18.998Z","publishedAt":"2021-12-23T14:08:18.998Z","revisedAt":"2021-12-23T14:08:18.998Z","name":"読書"},{"id":"pkcqsc-2qdz","createdAt":"2021-12-23T14:07:59.096Z","updatedAt":"2021-12-23T14:07:59.096Z","publishedAt":"2021-12-23T14:07:59.096Z","revisedAt":"2021-12-23T14:07:59.096Z","name":"日常生活"},{"id":"n54oitv4eq","createdAt":"2021-12-23T14:07:39.007Z","updatedAt":"2021-12-23T14:07:39.007Z","publishedAt":"2021-12-23T14:07:39.007Z","revisedAt":"2021-12-23T14:07:39.007Z","name":"開発"}],"noindex":false},{"id":"zyczmek3gf","createdAt":"2021-09-11T17:28:52.170Z","updatedAt":"2021-12-23T14:46:06.588Z","publishedAt":"2021-09-11T17:43:47.831Z","revisedAt":"2021-12-23T14:46:06.588Z","title":"思い出の地、女神胡で寂しく1人で開発合宿を行いました!!","body":"

ご機嫌よう!!
ハッピフルのエンジニアトレーニー担当配役出身兼アホのT田です。
ハッピフルでは創業以来、年9~10回のペースで日常業務から離れて、業務改善、技術研鑽、バイク探しのために開発合宿を開催しています。
今回は9月10日から12日までの3日間弊社のエンジニアたち(1人)で女神胡へ行ってきました。
※我々は女神胡へ決してスキーをしにきたのではなく、ゴミ拾いをしにきた。
※ご当地グルメもたくさん食べたよ！！

\"\"

カラオケもたくさんしました。
2泊3日で出来上がったのは何もありませんでした。でも楽しかったから良いよね！
来月も開発合宿(旅行)行きたいね！
ワタクシはReactの勉強をしていました。じゃけえ万歳！！

<<amazon1>>

","shortCodes":[{"fieldId":"shortCode","code":"amazon1","body":""}],"image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/f9c6feb8e4f94de7bc5d4968be2b99ab/blog-thumbnail-tanaka.png","height":500,"width":500},"writer":{"id":"jnsif4pc5","createdAt":"2021-08-17T08:50:52.037Z","updatedAt":"2022-03-05T03:06:19.909Z","publishedAt":"2021-08-17T08:50:52.037Z","revisedAt":"2022-03-05T03:06:19.909Z","name":"餃子","image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/42140abc3be3488cbd40409149fcaa9b/hpfull_Chaotzu_Logo.png","height":500,"width":500},"position":"駆出限界診療放射線技師クリエイター","twitter":"https://twitter.com/hpfull_02","instagram":"https://www.instagram.com/happyfull.jp/","link":"#限界診療放射線技師クリエイター","comment":"SEO勉強中!!","email":"hpfull.toranosuke@gmail.com","award":"都内の大学を卒業後、医療従事者として働く傍らブログ書いたりWeb制作したりしています。ぬくぬく生きていくことが目標です。","memberpageImage":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/42140abc3be3488cbd40409149fcaa9b/hpfull_Chaotzu_Logo.png","height":500,"width":500},"publications":"「月収0円の限界ニートから、月20万円稼ぐ診療放射線技師になるまで。」","affiliate":"
\n\n\n\n
","directors":"取締役補佐 高山虎太郎"},"tags":[{"id":"pkcqsc-2qdz","createdAt":"2021-12-23T14:07:59.096Z","updatedAt":"2021-12-23T14:07:59.096Z","publishedAt":"2021-12-23T14:07:59.096Z","revisedAt":"2021-12-23T14:07:59.096Z","name":"日常生活"},{"id":"e_ylg36dhaj","createdAt":"2021-12-23T14:07:48.948Z","updatedAt":"2021-12-23T14:07:48.948Z","publishedAt":"2021-12-23T14:07:48.948Z","revisedAt":"2021-12-23T14:07:48.948Z","name":"イベント"},{"id":"n54oitv4eq","createdAt":"2021-12-23T14:07:39.007Z","updatedAt":"2021-12-23T14:07:39.007Z","publishedAt":"2021-12-23T14:07:39.007Z","revisedAt":"2021-12-23T14:07:39.007Z","name":"開発"}],"noindex":false},{"id":"4f0quc8nn","createdAt":"2021-08-22T04:29:17.029Z","updatedAt":"2022-03-21T14:46:34.896Z","publishedAt":"2021-08-22T04:35:40.620Z","revisedAt":"2022-03-21T14:46:34.896Z","title":"Vercelにホストしてる独自ドメインでメールを作りたい[お...","body":"

こちらでどうぞ!!


本サイトはNext.jsをVercelにホストしています。Vercelのドメイン設定でお名前ドットコムで買った独自ドメインであるhpfull.jpを利用しています。
このたび、この独自ドメインでメールアドレスを作りたいという要望が出ました。×××@hpfull.jpみたいな。
Vercelはホスティングサーバーですので、メールサーバーとしての役割は果たせませんので新たにメールサーバーのためのレンタルサーバーを借りる必要があり設定も少し面倒だったので手記として残しておきます。未来の自分がこれを見て役立たせることを祈ります。

参考


レンタルサーバーからVercelに移転したら独自ドメインのメールが使えなくなってしまった話
Gmail（ウェブブラウザ）を利用する

前提



Vercelでメール送受信する


まずはやることの大まかな流れを。

  1. メールサーバーをさくらのレンタルサーバーで契約
  2. Vercelのネームサーバーのレコードを書き換えメールがきたらメールサーバーへ行くように設定
  3. さくらのメールサーバーで諸々設定
  4. Vercel側でSPFレコード設定
  5. Gmailで諸々設定


ではやっていきましょう。今回作成する独自ドメインはexample@hpfull.jpとします。

1.メールサーバーをさくらのレンタルサーバーで契約


https://www.sakura.ne.jp/

上記サイトの真ん中あたりに「さくらのメールボックス」というのがあるので、こちらから早速契約していきます。とっても安いですね。これには凡庸中人代表破天荒九州男児おじいさんな私も驚きです。\"\"

契約した時、メールサーバーの初期ドメインというものが表示されているので(xxx.sakura.ne.jpの形式)、後ほど使うのでコピーしておきましょう。

2.Vercelのネームサーバーのレコードを書き換えメールがきたらメールサーバーへ行くように設定


Vercelのダッシュボード からDomainsからDNS Recordsの設定へいきましょう。
\"\"

ここに、NAMEは空、TYPEはMX、VALUEは先ほどコピーしておいたメールサーバーの初期ドメインを、TTLは任意、PRIORITYは10を設定し、Addを押します。

3.さくらのメールサーバーで諸々設定


それではまたさくらのサーバーのダッシュボードへいき独自ドメインを設定していきます。
自分はお名前ドットコムで契約していました。
ダッシュボード 画面の、ドメイン/SSL→ドメイン/SSLからドメイン新規追加します。追加したドメインの設定からSPFレコードの使用を利用するにチェックを入れておきます。
SPFレコードってなにって感じだったのですが、ようはなりすましメールを予防してくれるらしいです。設定したほうが良さそうなのでとりま設定しましょう。
詳しいことはこちらへ
このタイミングで、メール→メール一覧からメールアドレスを作成しておきましょう。自分が今回作成するのは、example@hpfull.jpです。

4.Vercel側でSPFレコード設定


2でやったようにDNS Recordsに新たにまた追加します。
NAMEは空、TYPEはTXT、TTLは任意、PRIORITYは空にします。VALUEはどのような書き方が正解かいまいち理解できていないのですが、「v=spf1 +a:さくらの初期ドメイン -all」とするとうまくいきました。
https://mxtoolbox.com/SuperTool.aspx
こちらのサイトにて、ドメインを打ち込んで、
\"\"
こんな感じになっていたら大丈夫だと思います。

これでとりあえず、example@hpfull.jpでメールが送受信できるようになっています。ここからは、このメールアドレスをGmailで使えるように設定していきます。

5.Gmailで諸々設定


まずは任意のGmailアカウントにログインし、Gmailアプリを開きます。画面右上にある設定→すべての設定を表示をクリックします。
\"\"

アカウントとインポートタブの他のアカウントのメールを確認→メールアカウントを追加するをクリックします。
\"\"

こちらに今回設定したいメールアドレスであるexample@hpfull.jpを入力して次へを押します。
次ページにて、「他のアカウントからのメールを読み込む(POP3)」を入れて次へを押します。

\"\"
次ページにて上記のように埋めます。
ユーザー名は今回設定するexample@hpfull.jp、パスワードはメールアドレス作成時に設定したパスワード、POPサーバーはさくらのサーバーの初期ドメイン、上2つをチェックにし、ポートを995に変更して次へを押します。
これでexample@hpfull.jpでメールが受信できるようになりました。

次ページからメールの送信設定を行います。

名前には、メールアドレスの送受信にて使いたい任意の名前を設定します。
次ページにて、
\"\"
SMTPにはさくらの初期ドメイン、ユーザー名は設定したいメールアドレス、パスワードはアドレス作成時のものを入れあとはそのままの設定でアカウント追加を押します。

その後、確認コード入力の画面に移ります。確認コードはさくらのメールサーバーのダッシュボード →メール一覧→該当のアドレスのwebメールをクリックすると届いています！
これを入力すれば晴れてgmailで独自ドメインで作ったメールアドレスを扱えます。

おめでとうございます。それではどんでん返し系ウォーリーによるテックブログシリーズでした。(乙)

","shortCodes":[],"image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/61b718056223443a824462bb6b0122c2/kowai.png","height":500,"width":500},"writer":{"id":"m73jw7s_c5","createdAt":"2021-08-17T08:51:41.536Z","updatedAt":"2022-03-05T03:54:47.547Z","publishedAt":"2021-08-17T08:51:41.536Z","revisedAt":"2022-03-05T03:54:47.547Z","name":"飲茶","image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/bb3a3f10aa364a0f85d158a5d77bdae5/hpfullyamuchalogodeka.png","height":500,"width":500},"position":"代表取締役巡査部長警視総監監査補佐","twitter":"https://twitter.com/hpfull_01","instagram":"https://www.instagram.com/happyfull.jp/","link":"#","comment":"宗教戦争主導権を握り頭脳戦を。。。","email":"ctodayo@hpfull.jp","award":"慶應の文系学部で独学→長期インターンで開発経験→複数の超大手Web企業からエンジニア職で内定。","publications":"「宗教戦争を終わらせたたった1つの方法」など","affiliate":"
\n\n\n\n
","directors":"代表取締役 雨海新太"},"tags":[{"id":"n54oitv4eq","createdAt":"2021-12-23T14:07:39.007Z","updatedAt":"2021-12-23T14:07:39.007Z","publishedAt":"2021-12-23T14:07:39.007Z","revisedAt":"2021-12-23T14:07:39.007Z","name":"開発"}],"noindex":true},{"id":"exkeadgdzgi","createdAt":"2021-08-19T07:28:32.403Z","updatedAt":"2021-12-23T14:46:28.297Z","publishedAt":"2021-08-19T07:28:32.403Z","revisedAt":"2021-12-23T14:46:28.297Z","title":"Next.jsのSSGでsitemapをウォーリーを探しなが...","body":"

皆さんご機嫌よう。
今回のガチテックブログシリーズは「せっかく作ったおばあさんのサイトに人がきてくれない」という悩みを解決する手段の１つを提供する回です。全国のサイトを作成したおばあさんとその愛するお孫さん(ウォーリー読破済み)はご覧あれ。

さっそくやろうか


いつものように戯言はいいからやっていこうね。
そもそもなんでsitemapを作るとSEO的にいいのかって話ではあるけれども、それはあなたのお母さんやお父さんが作ってくれた手作りのジャムを思い出してみよう。

手作りでもいいのですが、大変簡単に導入できるパッケージがあるのでそれを使っていきましょう。

npm install --save-dev next-sitemap

ファイルに設定情報を書く


新たにルートディレクトリに next-sitemap.js を作成し、以下のように書き込んでいきましょう。

module.exports = {\n  siteUrl: 'https://hpfull.jp',\n  generateRobotsTxt: true,\n  sitemapSize: 7000,\n  outDir: './out',\n};


siteUrlのところは各自ご自身の、またはウォーリーのドメインを入れましょう。Next.jsのSSGではビルド後にoutというディレクトリがデフォルトでできるのでその配下に出力します。
sitemap.xml と robots.txtファイルが出来上がります。

それではこの設定が済んだら、build時にサイトマップを更新してくれるようにコマンドを設定します。

// package.json\n\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build && next export && next-sitemap --config next-sitemap.js\",\n    ....


はい、完成です。とっても簡単ですね。
この状態でビルドを行うとサイトマップの自動生成をしてくれますよ。

おまけサイトマップをGoogle Search Consoleへ登録しよう


ついでにせっかく作ったサイトマップなのだからGoogleのクローラーに自慢しよう。
サーチコンソール(以下継承略佐知子)の登録方法自体はここでは省きます。

\"\"

これで完成です。

参考

https://fwywd.com/tech/next-sitemap

","shortCodes":[],"image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/4f007211558d481d92fdb4f5811d7ca1/sitemap.png","height":500,"width":500},"writer":{"id":"m73jw7s_c5","createdAt":"2021-08-17T08:51:41.536Z","updatedAt":"2022-03-05T03:54:47.547Z","publishedAt":"2021-08-17T08:51:41.536Z","revisedAt":"2022-03-05T03:54:47.547Z","name":"飲茶","image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/bb3a3f10aa364a0f85d158a5d77bdae5/hpfullyamuchalogodeka.png","height":500,"width":500},"position":"代表取締役巡査部長警視総監監査補佐","twitter":"https://twitter.com/hpfull_01","instagram":"https://www.instagram.com/happyfull.jp/","link":"#","comment":"宗教戦争主導権を握り頭脳戦を。。。","email":"ctodayo@hpfull.jp","award":"慶應の文系学部で独学→長期インターンで開発経験→複数の超大手Web企業からエンジニア職で内定。","publications":"「宗教戦争を終わらせたたった1つの方法」など","affiliate":"
\n\n\n\n
","directors":"代表取締役 雨海新太"},"tags":[{"id":"n54oitv4eq","createdAt":"2021-12-23T14:07:39.007Z","updatedAt":"2021-12-23T14:07:39.007Z","publishedAt":"2021-12-23T14:07:39.007Z","revisedAt":"2021-12-23T14:07:39.007Z","name":"開発"}],"noindex":false}],"blogTotalCount":11,"tag":{"id":"n54oitv4eq","createdAt":"2021-12-23T14:07:39.007Z","updatedAt":"2021-12-23T14:07:39.007Z","publishedAt":"2021-12-23T14:07:39.007Z","revisedAt":"2021-12-23T14:07:39.007Z","name":"開発"},"sortedAndLimitedTag":[{"id":"n54oitv4eq","createdAt":"2021-12-23T14:07:39.007Z","updatedAt":"2021-12-23T14:07:39.007Z","publishedAt":"2021-12-23T14:07:39.007Z","revisedAt":"2021-12-23T14:07:39.007Z","name":"開発","count":11},{"id":"pkcqsc-2qdz","createdAt":"2021-12-23T14:07:59.096Z","updatedAt":"2021-12-23T14:07:59.096Z","publishedAt":"2021-12-23T14:07:59.096Z","revisedAt":"2021-12-23T14:07:59.096Z","name":"日常生活","count":8},{"id":"e_ylg36dhaj","createdAt":"2021-12-23T14:07:48.948Z","updatedAt":"2021-12-23T14:07:48.948Z","publishedAt":"2021-12-23T14:07:48.948Z","revisedAt":"2021-12-23T14:07:48.948Z","name":"イベント","count":6},{"id":"7jwwhguwz","createdAt":"2022-01-02T09:30:10.790Z","updatedAt":"2022-01-02T09:30:10.790Z","publishedAt":"2022-01-02T09:30:10.790Z","revisedAt":"2022-01-02T09:30:10.790Z","name":"フットサル","count":4},{"id":"qd1vp5v-kor","createdAt":"2021-12-25T01:06:25.588Z","updatedAt":"2021-12-25T01:06:25.588Z","publishedAt":"2021-12-25T01:06:25.588Z","revisedAt":"2021-12-25T01:06:25.588Z","name":"勉強","count":4},{"id":"2e7y_miiq","createdAt":"2021-12-23T14:49:04.318Z","updatedAt":"2021-12-23T14:49:04.318Z","publishedAt":"2021-12-23T14:49:04.318Z","revisedAt":"2021-12-23T14:49:04.318Z","name":"世直し","count":3},{"id":"nsppv8907xeo","createdAt":"2021-12-23T14:08:18.998Z","updatedAt":"2021-12-23T14:08:18.998Z","publishedAt":"2021-12-23T14:08:18.998Z","revisedAt":"2021-12-23T14:08:18.998Z","name":"読書","count":3},{"id":"y3z8g1vqn","createdAt":"2022-03-04T22:06:35.103Z","updatedAt":"2022-03-04T22:06:35.103Z","publishedAt":"2022-03-04T22:06:35.103Z","revisedAt":"2022-03-04T22:06:35.103Z","name":"microCMS","count":2},{"id":"s2orci1u4gs","createdAt":"2022-03-04T22:06:15.255Z","updatedAt":"2022-03-04T22:06:15.255Z","publishedAt":"2022-03-04T22:06:15.255Z","revisedAt":"2022-03-04T22:06:15.255Z","name":"react.js","count":2},{"id":"wni6v6osq","createdAt":"2022-01-02T09:29:42.635Z","updatedAt":"2022-01-02T09:29:42.635Z","publishedAt":"2022-01-02T09:29:42.635Z","revisedAt":"2022-01-02T09:29:42.635Z","name":"福利厚生","count":2},{"id":"fjutnje457","createdAt":"2021-12-29T17:40:07.156Z","updatedAt":"2021-12-29T17:40:07.156Z","publishedAt":"2021-12-29T17:40:07.156Z","revisedAt":"2021-12-29T17:40:07.156Z","name":"web制作","count":2},{"id":"6o6zjhk4q_n","createdAt":"2021-12-28T12:22:15.556Z","updatedAt":"2021-12-28T12:22:15.556Z","publishedAt":"2021-12-28T12:22:15.556Z","revisedAt":"2021-12-28T12:22:15.556Z","name":"新メンバー","count":2},{"id":"a__qj7f004qi","createdAt":"2021-12-23T19:03:43.852Z","updatedAt":"2021-12-23T19:03:43.852Z","publishedAt":"2021-12-23T19:03:43.852Z","revisedAt":"2021-12-23T19:03:43.852Z","name":"ガジェット","count":2},{"id":"pv74k4x3u5","createdAt":"2021-12-23T14:08:55.565Z","updatedAt":"2021-12-23T14:08:55.565Z","publishedAt":"2021-12-23T14:08:55.565Z","revisedAt":"2021-12-23T14:08:55.565Z","name":"ポエム","count":2}],"latestDataBlog":[{"id":"1ve4gsjtq","createdAt":"2022-02-20T16:38:44.982Z","updatedAt":"2022-03-12T20:41:16.035Z","publishedAt":"2022-02-20T17:16:25.740Z","revisedAt":"2022-03-12T20:41:16.035Z","title":"権力なき社団ハッピフル倶楽部の野望を教えてあげます。","body":"

私たち権力なき社団ハッピフル倶楽部は今年で設立10周年を迎えます。
森坂元構成員が脱退したり、一時はそれぞれ個人の目標に向かう時期もあったりとしましたが、今、全員が同じ野望に向かって歩みを進めることができています。
そんな私たちの現状と今後の事業についての展望を教えてあげます。

現在地


私たちは現状主に3つの事業を展開しています。


ファッションブランド製作・販売事業


\"\"

まずは現状のメイン事業となっているファッション・アパレル事業です。
新進気鋭なデザインアイディアを発想し創造しこの世へ送り出す、それはまるで親の気分です。
親です。親とはそれを産んだもの、生み出したもの、そしてそれを養うものです。私たちは確かにデザインを発想し創造し生み出したとは言えますが、果たして養えているのでしょうか。甚だ疑問です。

コンサルティング事業


\"\"

コンサルティング事業は今のところ収益が立っていません。まだ事業への本気度が高くなく、本気を出せていないということがあります。私たちが仮に本気でコンサルティングを行なった場合、コンサルティングします。コンサルティングとはいわゆる相談です。略してコンサル、略さないとコンサルティングと呼ばれます。相談をすることで非常に安心を得られますし、コンサルティングして皆さんの発展を祈り、コンサルティングファームとして解決策をファームします。つまり相談に乗ります。私たちはこれをハッピーコンサルティングと呼んでいます。本当に親身に相談に乗るので、お金もたくさん取ります。


Web製作・Webアプリケーション開発事業

\"\"

Webサイト製作とWebアプリケーションの開発を経営戦略や事業立案からグロースの点まで寄り添って行います。
ホームページ制作を私たちにお願いするなら、ホームページとは家のページだということを絶対に忘れてほしくないです。それに関してだけは譲ることができません。ここについては設立時に声明文を出して以来、10年が経った今でも大事にしている価値観になります。
アプリケーション開発は弊教団のスペシャルエンジニアが頑張ります。

これからの事業展開について


私たちは上記の現在の事業だけでなく、もっと多角的に複数領域に事業展開をしていきたいと考えています。
バーンアウトする前に事業を頑張ります。

飲食店経営


\"\"

弊教団には特別な教育鞭撻訓練を受けたBartenderが存在します。彼は僕と同じで生まれた時からBartenderでした。僕は生まれた時から教祖でしたし、彼は生まれた時からBartenderでした。本当ですよ。
私たちは人間関係に疲れ切った日本人のため、当時のキエフ大公国の皇帝に思いを馳せながら、憩いの場としての提供を行いたいと考えています。なぜなら、人間関係に疲れ切った日本人に憩いの場を提供したいのです。
飲食店と一口にいっても、さまざまです。私たちの教団が考える飲食店は、お昼に喫茶店を展開し、夜にバーを開き、朝には朝マックを勝手にフランチャイズ加盟した上でフランチャイジーとしてお店を展開していきます。朝マックをまとめて購入しそこにマージンを加えてお店に出すことでマージン分の利益を得るビジネスを行います。教団の人間を使えば人件費も無料ですし、マックの近くにお店を展開すればマックに行くまでも大変じゃないから良いです。
その後、事業の業績が好調ならば、教祖の僕としては弊飲食店をフランチャイズ展開していきます。マックのフランチャイジーがフランチャイズ展開するので、ここで加盟してくれたフランチャイジーはフランチャイジーフランチャイジーですね。

プロeスポーツチーム運営


\"\"

2021年、チャンピオンエディションアマチュアライセンス大学付属チャンピオン高校所属の方程式ラプラス選手とプロ契約の締結したことにより、プロeスポーツチーム「ハッピフル忍者(大会出場時の表示名：HP Ninja)」を結成しました。
選手、マネージャー、アナリスト、監督、コーチ、先輩陣で運営しています。大会出場だけでなくeスポーツビジネスの発展と繁栄を目指し、大会開催や大会設営、リアルとバーチャルの融合を通して文化の発展に対して活動したいと考えています。
僕自身、数々のタイトルでタイトルを獲得してきた選手でしたが、チームを運営する立場になり、タイトルだけでなく、チームとして、またはオーディエンスと共に一体となる喜びに世界の創出と誕生を感じています。

プロスポーツチーム運営


\"\"

私たちの原点はフットサル、サッカーです。生まれた時からボールと友達。すでにフットサル大会の運営や設営を通してコネクションを作っており、日本代表の方ともセッションを交わしコネクションを確立している段階です。
東京落合を中心としたスポーツチームの発展をすることで、落合を元気に、長期的な落合民のための地域密着型のスポーツチーム作りを目指しています。
スポーツはサッカーに限らず、野球も好きなので、野球チームも作りたいと考えています。

営業代行事業


今書いてます。


最後に


この記事は未完成です。まるでサグラダファミリアですね。
これから天才教祖事業家集団ハッピフル倶楽部は権力なき社団として、事業を思い付いた際にはこの記事に付け足していきます。
お楽しみに。

","shortCodes":[],"image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/28f2e74423784db8877502c624aac168/MIYAKO75_yatta--20140726_TP_V.jpg","height":1013,"width":1600},"writer":{"id":"m73jw7s_c5","createdAt":"2021-08-17T08:51:41.536Z","updatedAt":"2022-03-05T03:54:47.547Z","publishedAt":"2021-08-17T08:51:41.536Z","revisedAt":"2022-03-05T03:54:47.547Z","name":"飲茶","image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/bb3a3f10aa364a0f85d158a5d77bdae5/hpfullyamuchalogodeka.png","height":500,"width":500},"position":"代表取締役巡査部長警視総監監査補佐","twitter":"https://twitter.com/hpfull_01","instagram":"https://www.instagram.com/happyfull.jp/","link":"#","comment":"宗教戦争主導権を握り頭脳戦を。。。","email":"ctodayo@hpfull.jp","award":"慶應の文系学部で独学→長期インターンで開発経験→複数の超大手Web企業からエンジニア職で内定。","publications":"「宗教戦争を終わらせたたった1つの方法」など","affiliate":"
\n\n\n\n
","directors":"代表取締役 雨海新太"},"tags":[{"id":"2e7y_miiq","createdAt":"2021-12-23T14:49:04.318Z","updatedAt":"2021-12-23T14:49:04.318Z","publishedAt":"2021-12-23T14:49:04.318Z","revisedAt":"2021-12-23T14:49:04.318Z","name":"世直し"},{"id":"d1jblp4avy_b","createdAt":"2022-03-04T17:19:09.883Z","updatedAt":"2022-03-04T17:19:09.883Z","publishedAt":"2022-03-04T17:19:09.883Z","revisedAt":"2022-03-04T17:19:09.883Z","name":"ハッピフル"}],"noindex":true},{"id":"rrmqt_2_ql","createdAt":"2022-02-10T13:55:37.462Z","updatedAt":"2022-03-04T22:07:10.434Z","publishedAt":"2022-03-04T22:07:10.434Z","revisedAt":"2022-03-04T22:07:10.434Z","title":"React(Typescript)\b+Redux+Firebaseでチャットアプリを作ってみたメモである。","body":"

手順を忘れないように、忘却の空とその彼方へ花束を


パッケージ管理はYarnを使う。
CSSフレームワークにはTailwind CSSを利用。

大まかな流れ↓

create react appコマンドでReact+Typescriptプロジェクトを作成する。
Tailwind CSS導入する
Eslint,Prettierの設定

create react appコマンドでReact+Typescriptプロジェクトを作成する。


❯ node -v\nv16.13.0\n\n~\n❯ yarn -v\n1.22.17\n\n~\n❯ npx create-react-app --version\n5.0.0\n\n~\n❯ npx create-react-app realtime-db-react --template typescript


memo:
yarnがローカルにインストールされているときはパッケージマネージャーにYarnが使われる。
https://zenn.dev/ryuu/articles/force-npm-with-cra

Eslint,Prettierの設定


→https://zenn.dev/jpnasane/articles/d7f44682b74fdc

~/Project/React/react-chatapp master* 22s\n❯ yarn run eslint --init


\"\"

設定はこんな感じ。

Typescript用のパッケージインストール

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser



Airbnbの細かい設定をしてくれるやつをインストール

~/Project/React/react-chatapp master* 22s\n❯ npx install-peerdeps --dev eslint-config-airbnb\n\n...(略)\nSUCCESS eslint-config-airbnb\n  and its peerDeps were installed successfully.


Prettierのパッケージをインストール。

yarn add -D prettier eslint-config-prettier


Tailwind CSS導入する


~\n❯ yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9


これやると、

zsh: no matches found: postcss@^7


が出た。
→
解決方法

create react appコマンドで作成したプロジェクトはwebpackの設定をオーバーライドできない。つまり、PostCSSの設定を上書きできない。
→cracoをインストールする。

yarn add @craco/craco


package.jsonファイル内のスクリプトでcracoを利用するように変更

{\n    // ...\n    \"scripts\": {\n     \"start\": \"craco start\",\n     \"build\": \"craco build\",\n     \"test\": \"craco test\",\n     \"eject\": \"react-scripts eject\"\n    },\n  }


これでyarn startしてみると、、

UnhandledPromiseRejectionWarning: TypeError: match.loader.options.plugins is not a function


的なエラーが出る。
→
解決方法

craco.config.js内にある

postcssの記述をpostcssOptionsに変える。

これで
yarn startでプロジェクト立ち上がる。

次はtailwind CSSの設定

~\n❯ npx tailwindcss init


して、tailwind.config.jsで

purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],


とする。

index.cssに

@tailwind base;\n@tailwind components;\n@tailwind utilities;


を追加。

firebase関連


firebase login

~\n❯ firebase login\nAlready logged in as amahaya0831@gmail.com


すでにログイン済み。

コンソールでプロジェクト作って、webアプリを作成。
Realtime Databaseを作成。


プロジェクト配下で

firebase init


とりま、Realtime Datebase....

のところだけチェックすればok。

database.rules.jsonで全部trueにしておく。
→ のちfirebase deployで設定を反映させる必要あり

firebaseのsdkを利用するため、

yarn add firebase\nyarn add @types/firebase


で、envファイル作成して設定値を埋める。

Redux導入


~/Project/React/react-chatapp main\n❯ yarn add redux react-redux @types/react-redux redux-thunk @types/redux-thunk reselect @types/reselect


","shortCodes":[],"image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/fc42d78ad4d448c7bb98d5325202503b/freerank.jpeg","height":1066,"width":1600},"writer":{"id":"m73jw7s_c5","createdAt":"2021-08-17T08:51:41.536Z","updatedAt":"2022-03-05T03:54:47.547Z","publishedAt":"2021-08-17T08:51:41.536Z","revisedAt":"2022-03-05T03:54:47.547Z","name":"飲茶","image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/bb3a3f10aa364a0f85d158a5d77bdae5/hpfullyamuchalogodeka.png","height":500,"width":500},"position":"代表取締役巡査部長警視総監監査補佐","twitter":"https://twitter.com/hpfull_01","instagram":"https://www.instagram.com/happyfull.jp/","link":"#","comment":"宗教戦争主導権を握り頭脳戦を。。。","email":"ctodayo@hpfull.jp","award":"慶應の文系学部で独学→長期インターンで開発経験→複数の超大手Web企業からエンジニア職で内定。","publications":"「宗教戦争を終わらせたたった1つの方法」など","affiliate":"
\n\n\n\n
","directors":"代表取締役 雨海新太"},"tags":[{"id":"n54oitv4eq","createdAt":"2021-12-23T14:07:39.007Z","updatedAt":"2021-12-23T14:07:39.007Z","publishedAt":"2021-12-23T14:07:39.007Z","revisedAt":"2021-12-23T14:07:39.007Z","name":"開発"},{"id":"qd1vp5v-kor","createdAt":"2021-12-25T01:06:25.588Z","updatedAt":"2021-12-25T01:06:25.588Z","publishedAt":"2021-12-25T01:06:25.588Z","revisedAt":"2021-12-25T01:06:25.588Z","name":"勉強"},{"id":"s2orci1u4gs","createdAt":"2022-03-04T22:06:15.255Z","updatedAt":"2022-03-04T22:06:15.255Z","publishedAt":"2022-03-04T22:06:15.255Z","revisedAt":"2022-03-04T22:06:15.255Z","name":"react.js"}],"noindex":false},{"id":"4v0axf5r-o8a","createdAt":"2022-01-22T16:48:07.377Z","updatedAt":"2022-02-23T12:16:46.954Z","publishedAt":"2022-01-23T13:29:42.236Z","revisedAt":"2022-02-23T12:16:46.954Z","title":"弊社の福利厚生について解説してあげます","body":"

こんにちは！
株式会社ハッピフルでLP作成などのクリエイティブや数値分析などを担当している高槻です！

最近青汁にハマり想定以上の苦さに悶絶しております。

ところで、尖りに尖ったユニコーンベンチャー企業である弊社では福利厚生も尖りに尖っています。鋭利です！！
そんな弊社の福利厚生を教えてあげます！

オフィスのど真ん中にこたつ！！


\"\"


弊社にはオフィスのど真ん中に年中こたつが存在します。ただしこたつに入れるのは偉い人のみです。
この福利厚生に込められた思いを弊社CEO矢野先生に聞いてみると、「これが僕の夢」とおっしゃっていました。
社員思いの素晴らしいCEOでした。

オフィス全席喫煙OK!


\"\"

弊社は基本的にオフィスがかなりモクモクしています。CEOはタバコを吸う人がタバコを吸わない人に気を使わなくていい社会作りに励んでいます！
ただし寝タバコと葉巻は非常に危険なためお控えください。特にこたつに入りながら寝タバコをした社員がいて事件になりました。

ONEデスク制度


\"\"

入社を決めてくれた社員に向けて上限8万円までデスク周りの作業効率を改善するための「何か」を購入できる制度です。
最近入社を決めてくれた宮沢君はアイマスクを買いました。新メンバーが入社しました!!!!の記事を見る

この福利厚生を使うためだけに弊社にジョインしてくれるメンバーもいました。

Think!福利厚生制度


\"\"

社員自ら福利厚生を考え制限なしで実行できる制度です。
弊社では新しい福利厚生を考える部署があります。社員がどうしたらパフォーマンスを発揮できるのかだけを考え家には帰しません。

コーヒーナップ制度


\"\"

上長へ土下座をすることで5分の仮眠が認められる制度です。
弊社は就業時間が長く、拘束時間が大変長いことで有名です。そのため、各社員はまとまった睡眠の時間は取れずパフォーマンスに影響が出ていました。そこで考えられたのがこの制度です。
もちろん、みんなが働いている横で眠るようなことがタダでできるわけではありません。仮眠を取りたい場合は上長に土下座をしましょう。仮眠可否の審査のために土下座を受けた上長が仮眠審査証を発行する必要があります。

CTOの書籍を勝手に拝借しよう


\"\"


オフィス内にある書籍無断で持ち出すことが可能な制度です。もちろん見つかった場合はリアルに首が飛びますよ！

<<giro>>


弊社は風通しがよいです。
興味を持った方は年中開催される説明会への参加や面談の応募を検討してみてください!!

→採用情報

","shortCodes":[{"fieldId":"shortCode","code":"giro","body":""}],"image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/7f4cfcfb3f2e4876a81e38bdd1c5d4d3/fukuriao.jpeg","height":1066,"width":1600},"writer":{"id":"jnsif4pc5","createdAt":"2021-08-17T08:50:52.037Z","updatedAt":"2022-03-05T03:06:19.909Z","publishedAt":"2021-08-17T08:50:52.037Z","revisedAt":"2022-03-05T03:06:19.909Z","name":"餃子","image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/42140abc3be3488cbd40409149fcaa9b/hpfull_Chaotzu_Logo.png","height":500,"width":500},"position":"駆出限界診療放射線技師クリエイター","twitter":"https://twitter.com/hpfull_02","instagram":"https://www.instagram.com/happyfull.jp/","link":"#限界診療放射線技師クリエイター","comment":"SEO勉強中!!","email":"hpfull.toranosuke@gmail.com","award":"都内の大学を卒業後、医療従事者として働く傍らブログ書いたりWeb制作したりしています。ぬくぬく生きていくことが目標です。","memberpageImage":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/42140abc3be3488cbd40409149fcaa9b/hpfull_Chaotzu_Logo.png","height":500,"width":500},"publications":"「月収0円の限界ニートから、月20万円稼ぐ診療放射線技師になるまで。」","affiliate":"
\n\n\n\n
","directors":"取締役補佐 高山虎太郎"},"tags":[{"id":"wni6v6osq","createdAt":"2022-01-02T09:29:42.635Z","updatedAt":"2022-01-02T09:29:42.635Z","publishedAt":"2022-01-02T09:29:42.635Z","revisedAt":"2022-01-02T09:29:42.635Z","name":"福利厚生"},{"id":"6o6zjhk4q_n","createdAt":"2021-12-28T12:22:15.556Z","updatedAt":"2021-12-28T12:22:15.556Z","publishedAt":"2021-12-28T12:22:15.556Z","revisedAt":"2021-12-28T12:22:15.556Z","name":"新メンバー"},{"id":"pkcqsc-2qdz","createdAt":"2021-12-23T14:07:59.096Z","updatedAt":"2021-12-23T14:07:59.096Z","publishedAt":"2021-12-23T14:07:59.096Z","revisedAt":"2021-12-23T14:07:59.096Z","name":"日常生活"}],"noindex":false},{"id":"11_b0nwhu0","createdAt":"2022-01-15T17:07:47.197Z","updatedAt":"2022-03-15T04:00:13.122Z","publishedAt":"2022-01-15T18:08:21.770Z","revisedAt":"2022-03-15T04:00:13.122Z","title":"Next.js×microCMSで自作のポートフォリオサイトを無料で作れるようになるまでのロードマップ","body":"

こちらで見てください!!



今回は本サイトのようなNext.js×microCMSのサイトが一人で作れるようになるまでのヌクヌクロードマップを解説していきたいと思います。
この記事の通りに学んでいけば自作のホームページやポートフォリオサイトが無料で構築できます！！
ぜひ最後までご覧ください。
※このロードマップはあくまで本ブログのようなほぼ静的なWebサイトを作れるようになるまでのロードマップです。

最初に、ロードマップ作成に参考にしたサイトです。フロントエンドのデベロッパーの開発・運用に必要なスキルや知識、ツールやテクノロジーをステップバイステップのフローにまとめたロードマップです。英語で書いてありますが、時間のある時に見ておいてください。
https://roadmap.sh/frontend
フロントエンドのデベロッパーの開発・運用に必要なスキルや知識、ツールやテクノロジーをステップバイステップのフローにまとめたロードマップです。

0.最初に


まず最初に大まかな流れと使用するツールについて触れておきましょう。

大まかな流れ

\"\"

上記のようなステップを踏んでいくことを頭に入れておきましょう！

使用するツール(エディター)


使用するツールは都度自分で調べて合いそうなものを使用していくのが良いです。
エディターはVisual Studio Code(VSCode)がおすすめですが、AtomやSublime Textを利用するのも良いと思います。

1.Internet


さあここからは実際に勉強に入っていきます。
ここではインターネット上でどのようにしてWebサイトが動くか、その仕組みについて概要を理解します。
Webを支える根幹の記述ですので理解しておくべき事項となります。ただ、プログラマブルに中の設計まで詳細に理解する必用はなく、そもそもそれはなんぞや？と言う点と、大きな流れとして何が動いていて、どの要素がどう働きあっているのかが分かれば良いかと思います。
この章で今回私たちが作るNext.js×microCMSのサイトの仕組みも理解できるかと思います。
CMSやヘッドレスCMSについてはまた別途サイトで調べるなどしましょう。
この章に関しては、書籍を読みつつ並行して2以降に進んでいけば良いかと思います。

Internet 推薦教材


ここで私が推薦する教材は以下の2つの書籍です。
<<internet>>


どちらも名著であり初心者であっても分かりやすいので大変お勧めできる書籍となっています。
※権力なき社団ハッピフルの構成員であれば、福利厚生「CTOの書籍を勝手に拝借しよう」を使うことでオフィス内にあるこちらの書籍を見つけることで無断で持ち出すことが可能です！

2.HTML,CSS


次に学ぶのはHTML,CSSです。
皆さんおなじみかと思いますが、HTML,CSSはwebサイトの画面で表示されているプログラムです。
基本的なことを学び、がっつりここでWeb制作の力などつけたい人は演習で何かしらのサイトの模写をすると良いと思います。

↓私がプログラミング学習を始めて最初に行った模写がツイッターの模写でした。

完全未経験でプログラミング始めた時の懐かしい模写です！
ProgateのHTML,CSSを終えたら軽く模写して何か形にしてみると学びが大きいし何より楽しいですよ！#駆け出しエンジニアと繋がりたい#プログラミング初心者#今日の積み上げ #Progate#相互フォロー#権力なき社団ハッピフル pic.twitter.com/DvEjFD4hcH

— やむちゃ@ハッピフル (@hpfull_01) March 8, 2022


HTML,CSS 推薦教材


<<htmlcss>>

書籍でちゃんと学びたい人は
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
で学ぶと良いでしょう。
または、シンプルにProgateなどでHTML,CSSのコースをするのが手っ取り早いかと思います。僕はHTML,CSSのコースをHTML & CSS Flexbox編までしっかりとやり込みました。
道場コースは時間に余裕があればやっておくと良いかと思います！

3.JavaScript


JavaScript はウェブページにて複雑な機能をできるようにするプログラミング言語です。上記のHTMLやCSSでできたWebサイトに動きをつけることができます。例えば、画像のスライダーやマウスを動かした際のアニメーションなどです。
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 JavaScript

JavaScript 推薦教材


<<javascript>>

Progateでコースを一通り行った上でもっと本格的に学びたいとなった場合は上記書籍やドットインストールの動画を推薦します。

4.パッケージマネージャー


パッケージマネージャーは現代のフロントエンドエンジニアにとって必須の知識ですが、本サイトのようなものを作る上で雰囲気で乗り切ろうと思えば行けちゃうかもしれません。
パッケージマネージャーとは、他の人が作成したパッケージ（package）と呼ばれる『機能をまとめたもの』を管理（manage）するものです。セットで多少の linux コマンドも使えるようになることが望ましいです。
推薦教材とかは特になく、やっていく中で雰囲気を掴んでいきましょう。ちなみに、次に紹介するじゃけえ先生の書籍でパッケージマネージャーについて触れられているのでそこで学ぶのもアリです！
よく分からないエラーが出た、調べても全然分からん、というときはパッケージマネージャーでのエラーであることが経験的に多かったです。
「npm」や「Yarn」といった単語が出てきた際には少し思い出してみてください。

5.JavaScriptライブラリ React.js


JavaScriptのフレームワーク(ライブラリ)は

などがありますが、本サイトでも利用されている、ReactとそのラッパーであるNext.jsを推奨します。
フレームワークってそもそも何？って思ったら定番のこちらのサイトを参照しましょう。
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 フレームワーク

React.js 推薦教材


いきなりReact.jsに触れると、結局これは動いたけど何やってんの？っていう感じになると思うので、そんな時はじゃけえさんという方の以下のUdemy教材(現在は書籍)で学ぶと良いです。
この教材はJavaScriptの復習にもなるためここで相当理解が深まります。

モダンJavaScriptの基礎から始める挫折しないためのReact入門

<<reactsyoseki>>
書籍はこちら

こちらは

JavaScriptへの理解なくしてReactの習得はなし得ません。


というじゃけえ先生の信念のもと作られた教材です。
これを視聴すればReactが裏側でやってくれていることのイメージがしやすくなります。

上記を学んだら、以下のUdemy教材

Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

こちらを視聴しつつ手を動かして楽しくノラリクラリヌクヌクコーディングしていきましょう。

もしReactからいきなり入るのは嫌だというイヤイヤ期の方は、jQueryを学んでから雰囲気を掴むと良いかもしれません。
jQueryはavaScriptを簡単に扱うことができるようにするライブラリ（よく使われる機能やプログラミングの部品を集めてひとまとめにしたもの）です。

例

var testList = document.getElementsByClassName('test-list');


getElementsByClassName('test-list')\tはhtml\b上のtest-listというクラス名のものを配列で取得するという処理です。
jQueryを使えば、この処理が

var testList = $('.test-list');


として書くことができます。

jQueryに関してもProgateで学んでおくので十分だと言えます。

Next.js 推薦教材


Reactについてある程度理解ができたら次はNext.jsを学んでいきましょう。
まずはNext.jsのチュートリアルです。こちらをやることでSSR(サーバーサイドレンダリング)って何？SPA(シングルページアプリケーション)と何が違うの？とかが理解できます。
また、チュートリアルは都度見返すものとなります。全く分からん!となってもさらっと流して進むことが大事です。

さて、これで一通り本サイトのような静的なサイトを構築するための知識には触れました。
では実践として以下の記事を読んで世の中に自分のサイトを無料で公開しましょう!!
Next.js(TypeScript)+ Vercel + TailwindCSS + microCMS で自作ホームページを無料で公開しよう!![ガチテックブログシリーズ]

また、Next.jsのプロジェクトをVercelというホスティングサービスにデプロイ(インターネットに公開的な)するのにGithubというツールを利用します。ここで軽く学んでおきましょう。。
プロダクト開発をチームでする場合も、個人でする場合もソースコードをどこかしらで管理しなければなりません。

Git入門：Git初学習者のための効率的な学習方法を考えてみた

こちらを読んでおきましょう。

最後におまけ


ここまでみてくださり誠にありがとうございました!!
実際には手を動かして学んでいきながら、ここも足りないな、となれば自分で調べて学んでいく姿勢が非常に重要です。
それではまた、ご機嫌よう。

","shortCodes":[{"fieldId":"shortCode","code":"internet","body":"
\n\n\n
"},{"fieldId":"shortCode","code":"htmlcss","body":""},{"fieldId":"shortCode","code":"javascript","body":""},{"fieldId":"shortCode","code":"reactsyoseki","body":""}],"image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/1fae30db14d04c19bbf5d6f0a9615ed7/nextmicroportfolioroadmap.png","height":1240,"width":1748},"writer":{"id":"m73jw7s_c5","createdAt":"2021-08-17T08:51:41.536Z","updatedAt":"2022-03-05T03:54:47.547Z","publishedAt":"2021-08-17T08:51:41.536Z","revisedAt":"2022-03-05T03:54:47.547Z","name":"飲茶","image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/bb3a3f10aa364a0f85d158a5d77bdae5/hpfullyamuchalogodeka.png","height":500,"width":500},"position":"代表取締役巡査部長警視総監監査補佐","twitter":"https://twitter.com/hpfull_01","instagram":"https://www.instagram.com/happyfull.jp/","link":"#","comment":"宗教戦争主導権を握り頭脳戦を。。。","email":"ctodayo@hpfull.jp","award":"慶應の文系学部で独学→長期インターンで開発経験→複数の超大手Web企業からエンジニア職で内定。","publications":"「宗教戦争を終わらせたたった1つの方法」など","affiliate":"
\n\n\n\n
","directors":"代表取締役 雨海新太"},"tags":[{"id":"wni6v6osq","createdAt":"2022-01-02T09:29:42.635Z","updatedAt":"2022-01-02T09:29:42.635Z","publishedAt":"2022-01-02T09:29:42.635Z","revisedAt":"2022-01-02T09:29:42.635Z","name":"福利厚生"},{"id":"qd1vp5v-kor","createdAt":"2021-12-25T01:06:25.588Z","updatedAt":"2021-12-25T01:06:25.588Z","publishedAt":"2021-12-25T01:06:25.588Z","revisedAt":"2021-12-25T01:06:25.588Z","name":"勉強"},{"id":"n54oitv4eq","createdAt":"2021-12-23T14:07:39.007Z","updatedAt":"2021-12-23T14:07:39.007Z","publishedAt":"2021-12-23T14:07:39.007Z","revisedAt":"2021-12-23T14:07:39.007Z","name":"開発"},{"id":"s2orci1u4gs","createdAt":"2022-03-04T22:06:15.255Z","updatedAt":"2022-03-04T22:06:15.255Z","publishedAt":"2022-03-04T22:06:15.255Z","revisedAt":"2022-03-04T22:06:15.255Z","name":"react.js"},{"id":"y3z8g1vqn","createdAt":"2022-03-04T22:06:35.103Z","updatedAt":"2022-03-04T22:06:35.103Z","publishedAt":"2022-03-04T22:06:35.103Z","revisedAt":"2022-03-04T22:06:35.103Z","name":"microCMS"}],"noindex":false},{"id":"fp1_42zjyw","createdAt":"2022-01-02T09:34:49.356Z","updatedAt":"2022-01-02T09:34:49.356Z","publishedAt":"2022-01-02T09:34:49.356Z","revisedAt":"2022-01-02T09:34:49.356Z","title":"[特別ゲスト]平井堅さんが来てくれました!!","body":"

皆さん、今日はハッピフル定期開催のフットサル練習会にて平井堅さんが来てくださいました。
平井さんとは10年前のイベントでお話しさせて以来平井さんも好きだというフットサルを通じて交流を深めてきました。
メンバーと共にフットサルに励み、途中SDGsで持続可能性を高めました。

平井堅さん、これからも頑張ってください！

","shortCodes":[],"image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/ff9fce1014484f979d60a78db646979c/161007-099_TP_V4.jpeg","height":1200,"width":800},"writer":{"id":"7zo_fmw2t","createdAt":"2021-08-17T08:53:38.281Z","updatedAt":"2022-03-06T14:16:48.187Z","publishedAt":"2021-08-17T08:53:38.281Z","revisedAt":"2022-03-06T14:16:48.187Z","name":"mjtjuj","image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/dee9f0ec456649db8b80c7cb2788744f/kaitoicon.png","height":500,"width":500},"position":"最年長トレーニー","twitter":"https://twitter.com/minnadeyarou00","instagram":"https://www.instagram.com/happyfull.jp/","link":"#","comment":"営業マン。","email":"hpfull.mjtjuj@gmail.com","award":"成成明学獨國武の大学→都内大手IT企業で営業として働いています。毎日が勉強です。","publications":"「ただ、お茶を汲む。ー激詰めインターン生の日常ー」","affiliate":"
\n\n\n\n
","directors":"最年長課長 田中舘海橘"},"tags":[{"id":"7jwwhguwz","createdAt":"2022-01-02T09:30:10.790Z","updatedAt":"2022-01-02T09:30:10.790Z","publishedAt":"2022-01-02T09:30:10.790Z","revisedAt":"2022-01-02T09:30:10.790Z","name":"フットサル"},{"id":"e_ylg36dhaj","createdAt":"2021-12-23T14:07:48.948Z","updatedAt":"2021-12-23T14:07:48.948Z","publishedAt":"2021-12-23T14:07:48.948Z","revisedAt":"2021-12-23T14:07:48.948Z","name":"イベント"}],"noindex":false},{"id":"b5zqzgp5_y","createdAt":"2021-12-29T17:44:25.246Z","updatedAt":"2021-12-29T17:44:25.246Z","publishedAt":"2021-12-29T17:44:25.246Z","revisedAt":"2021-12-29T17:44:25.246Z","title":"ホームページとは？","body":"

ホームページとは


ホームページとは「家」のページです。なんでもそうです。ホームグラウンド、ホームランなどホームとは、「家」と言う意識が重要です。
この意識があるかないかでは変わってきます。
クライアントにも納得いただけるまで言い続けます。まずはどういった家を作りたいのか、和風なのか洋風なのか、家を意識するのです。家に住むということです。

理解いただけないクライアント様には拳で解決することもあります。それほど家ということが重要なのです。

<<home>>

","shortCodes":[{"fieldId":"shortCode","code":"home","body":""}],"image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/ceff8ed982fa42aba55e7406d9ea914f/Green27_40420141123162504_TP_V.jpeg","height":850,"width":1600},"writer":{"id":"fhrfe02v1s","createdAt":"2021-12-28T13:01:42.429Z","updatedAt":"2022-03-06T15:16:02.030Z","publishedAt":"2021-12-28T13:01:42.429Z","revisedAt":"2022-03-06T15:16:02.030Z","name":"KtaroAtGanon","image":{"url":"https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/d6ce125e5bc74a5aa656a4ed4f43d3c9/kotaroicon.png","height":500,"width":500},"position":"麺担当","twitter":"#","instagram":"#","link":"#","comment":"頑張ります。","email":"taroGanon@gmail.com","award":"都内の大学→大手IT企業へ就職。プログラミング勉強中です。","publications":"「関東人の、質量が軽くなっちまうだろう」","affiliate":"
\n\n\n\n
","directors":"帝国理科院 宮島遅刻"},"tags":[{"id":"fjutnje457","createdAt":"2021-12-29T17:40:07.156Z","updatedAt":"2021-12-29T17:40:07.156Z","publishedAt":"2021-12-29T17:40:07.156Z","revisedAt":"2021-12-29T17:40:07.156Z","name":"web制作"},{"id":"qd1vp5v-kor","createdAt":"2021-12-25T01:06:25.588Z","updatedAt":"2021-12-25T01:06:25.588Z","publishedAt":"2021-12-25T01:06:25.588Z","revisedAt":"2021-12-25T01:06:25.588Z","name":"勉強"},{"id":"n54oitv4eq","createdAt":"2021-12-23T14:07:39.007Z","updatedAt":"2021-12-23T14:07:39.007Z","publishedAt":"2021-12-23T14:07:39.007Z","revisedAt":"2021-12-23T14:07:39.007Z","name":"開発"}],"noindex":false}]},"__N_SSG":true}