<h2 id="h8014497ab1">手順を忘れないように、忘却の空とその彼方へ花束を</h2><p><br>パッケージ管理はYarnを使う。<br>CSSフレームワークにはTailwind CSSを利用。<br><br>大まかな流れ↓<br><br>create react appコマンドでReact+Typescriptプロジェクトを作成する。<br>Tailwind CSS導入する<br>Eslint,Prettierの設定<br></p><h2 id="h5319ab6792">create react appコマンドでReact+Typescriptプロジェクトを作成する。</h2><p><br></p><pre><code>❯ node -v
v16.13.0

~
❯ yarn -v
1.22.17

~
❯ npx create-react-app --version
5.0.0

~
❯ npx create-react-app realtime-db-react --template typescript</code></pre><p><br>memo:<br>yarnがローカルにインストールされているときはパッケージマネージャーにYarnが使われる。<br><a href="https://zenn.dev/ryuu/articles/force-npm-with-cra" target="_blank" rel="noopener noreferrer">https://zenn.dev/ryuu/articles/force-npm-with-cra</a><br></p><h2 id="hca3bf45a43">Eslint,<strong>Prettierの設定</strong></h2><p><br>→<a href="https://zenn.dev/jpn_asane/articles/d7f44682b74fdc" target="_blank" rel="noopener noreferrer">https://zenn.dev/jpnasane/articles/d7f44682b74fdc</a><br><br></p><pre><code>~/Project/React/react-chatapp master* 22s
❯ yarn run eslint --init</code></pre><p><br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/207f5538679c4ac8bd7a91342222a1e2/eslint.png" alt=""><br><br>設定はこんな感じ。<br><br>Typescript用のパッケージインストール<br></p><pre><code>yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser</code></pre><p><br><br>Airbnbの細かい設定をしてくれるやつをインストール<br></p><pre><code>~/Project/React/react-chatapp master* 22s
❯ npx install-peerdeps --dev eslint-config-airbnb

...(略)
SUCCESS eslint-config-airbnb
&nbsp; and its peerDeps were installed successfully.</code></pre><p><br>Prettierのパッケージをインストール。</p><pre><code>yarn add -D prettier eslint-config-prettier</code></pre><p><br></p><h2 id="hd0ac8d3139">Tailwind CSS導入する</h2><p><br></p><pre><code>~
❯ yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9</code></pre><p><br>これやると、<br></p><pre><code>zsh: no matches found: postcss@^7</code></pre><p><br>が出た。<br>→<br><a href="https://chicog.me/articles/9/" target="_blank" rel="noopener noreferrer">解決方法</a><br><br>create react appコマンドで作成したプロジェクトはwebpackの設定をオーバーライドできない。つまり、<span style="color:#333333">PostCSSの設定を上書きできない。</span><br>→cracoをインストールする。<br></p><pre><code>yarn add @craco/craco</code></pre><p><br><span style="color:#333333">package.jsonファイル内のスクリプトでcracoを利用するように変更</span><br></p><pre><code>{
    // ...
    "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
     "eject": "react-scripts eject"
    },
  }</code></pre><p><br>これでyarn startしてみると、、<br></p><pre><code>UnhandledPromiseRejectionWarning: TypeError: match.loader.options.plugins is not a function</code></pre><p><br>的なエラーが出る。<br>→<br><a href="https://github.com/facebook/create-react-app/issues/11777" target="_blank" rel="noopener noreferrer">解決方法</a><br><br>craco.config.js内にある<br><br>postcssの記述を<span style="color:#24292f">postcssOptionsに変える。</span><br><br><span style="color:#24292f">これで</span><br>yarn startでプロジェクト立ち上がる。<br><br>次はtailwind CSSの設定<br></p><pre><code>~
❯ npx tailwindcss init</code></pre><p><br>して、tailwind.config.jsで<br></p><pre><code>purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],</code></pre><p><br>とする。<br><br>index.cssに<br></p><pre><code>@tailwind base;
@tailwind components;
@tailwind utilities;</code></pre><p><br>を追加。<br></p><h2 id="hb41434a59a">firebase関連</h2><p><br>firebase login</p><pre><code>~
❯ firebase login
Already logged in as amahaya0831@gmail.com</code></pre><p><br>すでにログイン済み。<br><br>コンソールでプロジェクト作って、webアプリを作成。<br>Realtime Databaseを作成。<br><br><br>プロジェクト配下で<br></p><pre><code>firebase init</code></pre><p><br>とりま、Realtime Datebase....<br><br>のところだけチェックすればok。<br><br>database.rules.jsonで全部trueにしておく。<br>→ のちfirebase deployで設定を反映させる必要あり<br><br>firebaseのsdkを利用するため、<br></p><pre><code>yarn add firebase
yarn add @types/firebase</code></pre><p><br>で、envファイル作成して設定値を埋める。<br><br></p><h2 id="ha0d547188d">Redux導入</h2><p><br></p><pre><code>~/Project/React/react-chatapp main
❯ yarn add redux react-redux @types/react-redux redux-thunk @types/redux-thunk reselect @types/reselect</code></pre><p><br></p>

React(Typescript)+Redux+Fireb...

飲茶

<p><a href="https://blog.hpfull.jp/nextjs-microcms-roadmap/" target="_blank" rel="noopener noreferrer">こちらで見てください!!</a><br><br><br><br>今回は本サイトのようなNext.js×microCMSのサイトが一人で作れるようになるまでのヌクヌクロードマップを解説していきたいと思います。<br>この記事の通りに学んでいけば自作のホームページやポートフォリオサイトが無料で構築できます！！<br>ぜひ最後までご覧ください。<br>※このロードマップはあくまで本ブログのようなほぼ静的なWebサイトを作れるようになるまでのロードマップです。<br><br>最初に、ロードマップ作成に参考にしたサイトです。フロントエンドのデベロッパーの開発・運用に必要なスキルや知識、ツールやテクノロジーをステップバイステップのフローにまとめたロードマップです。英語で書いてありますが、時間のある時に見ておいてください。<br><a href="https://roadmap.sh/frontend" target="_blank" rel="noopener noreferrer">https://roadmap.sh/frontend</a><br>フロントエンドのデベロッパーの開発・運用に必要なスキルや知識、ツールやテクノロジーをステップバイステップのフローにまとめたロードマップです。<br></p><h2 id="h6dd245bbd0">0.最初に</h2><p><br>まず最初に大まかな流れと使用するツールについて触れておきましょう。<br></p><h3 id="h448be59b58">大まかな流れ</h3><p><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/fc5771251aa04ce89558ce3a78bbacc3/frontloadmap.png" alt=""><br><br>上記のようなステップを踏んでいくことを頭に入れておきましょう！<br></p><h3 id="h4293ee9f10">使用するツール(エディター)</h3><p><br>使用するツールは都度自分で調べて合いそうなものを使用していくのが良いです。<br>エディターはVisual Studio Code(VSCode)がおすすめですが、AtomやSublime Textを利用するのも良いと思います。<br></p><h2 id="h21a35fef24">1.Internet</h2><p><br>さあここからは実際に勉強に入っていきます。<br>ここではインターネット上でどのようにしてWebサイトが動くか、その仕組みについて概要を理解します。<br>Webを支える根幹の記述ですので理解しておくべき事項となります。ただ、プログラマブルに中の設計まで詳細に理解する必用はなく、そもそもそれはなんぞや？と言う点と、大きな流れとして何が動いていて、どの要素がどう働きあっているのかが分かれば良いかと思います。<br>この章で今回私たちが作るNext.js×microCMSのサイトの仕組みも理解できるかと思います。<br>CMSやヘッドレスCMSについてはまた別途サイトで調べるなどしましょう。<br>この章に関しては、書籍を読みつつ並行して2以降に進んでいけば良いかと思います。<br></p><h3 id="h4098885cf1">Internet 推薦教材</h3><p><br>ここで私が推薦する教材は以下の2つの書籍です。<br>&lt;&lt;internet&gt;&gt;<br></p><ul><li>Webを支える技術</li><li>「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか</li></ul><p><br>どちらも名著であり初心者であっても分かりやすいので大変お勧めできる書籍となっています。<br>※権力なき社団ハッピフルの構成員であれば、福利厚生「CTOの書籍を勝手に拝借しよう」を使うことでオフィス内にあるこちらの書籍を見つけることで無断で持ち出すことが可能です！<br></p><h2 id="hfad074bc62">2.HTML,CSS</h2><p><br>次に学ぶのはHTML,CSSです。<br>皆さんおなじみかと思いますが、HTML,CSSはwebサイトの画面で表示されているプログラムです。<br>基本的なことを学び、がっつりここでWeb制作の力などつけたい人は演習で何かしらのサイトの模写をすると良いと思います。<br><br>↓私がプログラミング学習を始めて最初に行った模写がツイッターの模写でした。<br></p><blockquote class="twitter-tweet"><p lang="ja" dir="ltr">完全未経験でプログラミング始めた時の懐かしい模写です！<br>ProgateのHTML,CSSを終えたら軽く模写して何か形にしてみると学びが大きいし何より楽しいですよ！<a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%88%9D%E5%BF%83%E8%80%85?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング初心者</a><a href="https://twitter.com/hashtag/%E4%BB%8A%E6%97%A5%E3%81%AE%E7%A9%8D%E3%81%BF%E4%B8%8A%E3%81%92?src=hash&amp;ref_src=twsrc%5Etfw">#今日の積み上げ</a> <a href="https://twitter.com/hashtag/Progate?src=hash&amp;ref_src=twsrc%5Etfw">#Progate</a><a href="https://twitter.com/hashtag/%E7%9B%B8%E4%BA%92%E3%83%95%E3%82%A9%E3%83%AD%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#相互フォロー</a><a href="https://twitter.com/hashtag/%E6%A8%A9%E5%8A%9B%E3%81%AA%E3%81%8D%E7%A4%BE%E5%9B%A3%E3%83%8F%E3%83%83%E3%83%94%E3%83%95%E3%83%AB?src=hash&amp;ref_src=twsrc%5Etfw">#権力なき社団ハッピフル</a> <a href="https://t.co/DvEjFD4hcH">pic.twitter.com/DvEjFD4hcH</a></p>&mdash; やむちゃ@ハッピフル (@hpfull_01) <a href="https://twitter.com/hpfull_01/status/1501074749711347720?ref_src=twsrc%5Etfw">March 8, 2022</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><p><br></p><h3 id="hf7ce8bf7ae">HTML,CSS 推薦教材</h3><p><br>&lt;&lt;htmlcss&gt;&gt;<br><br>書籍でちゃんと学びたい人は<br>1冊ですべて身につくHTML &amp; CSSとWebデザイン入門講座<br>で学ぶと良いでしょう。<br>または、シンプルに<a href="https://prog-8.com/" target="_blank" rel="noopener noreferrer">Progate</a>などでHTML,CSSのコースをするのが手っ取り早いかと思います。僕はHTML,CSSのコースをHTML &amp; CSS Flexbox編までしっかりとやり込みました。<br>道場コースは時間に余裕があればやっておくと良いかと思います！<br></p><h2 id="h1cf9f3d46b">3.JavaScript</h2><p><br><span style="color:#1b1b1b">JavaScript はウェブページにて複雑な機能をできるようにするプログラミング言語です。上記のHTMLやCSSでできたWebサイトに動きをつけることができます。例えば、画像のスライダーやマウスを動かした際のアニメーションなどです。</span><br><a href="https://wa3.i-3-i.info/word11438.html" target="_blank" rel="noopener noreferrer">「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 JavaScript</a><br></p><h3 id="hf84dccb073">JavaScript 推薦教材</h3><p><br>&lt;&lt;javascript&gt;&gt;<br><br><a href="https://prog-8.com/" target="_blank" rel="noopener noreferrer">Progate</a>でコースを一通り行った上でもっと本格的に学びたいとなった場合は上記書籍や<a href="https://dotinstall.com/" target="_blank" rel="noopener noreferrer">ドットインストール</a>の動画を推薦します。<br><br></p><h2 id="hb6919e07ad">4.パッケージマネージャー</h2><p><br>パッケージマネージャーは現代のフロントエンドエンジニアにとって必須の知識ですが、本サイトのようなものを作る上で雰囲気で乗り切ろうと思えば行けちゃうかもしれません。<br>パッケージマネージャーとは、他の人が作成したパッケージ（package）と呼ばれる『機能をまとめたもの』を管理（manage）するものです。セットで多少の linux コマンドも使えるようになることが望ましいです。<br>推薦教材とかは特になく、やっていく中で雰囲気を掴んでいきましょう。ちなみに、次に紹介するじゃけえ先生の書籍でパッケージマネージャーについて触れられているのでそこで学ぶのもアリです！<br>よく分からないエラーが出た、調べても全然分からん、というときはパッケージマネージャーでのエラーであることが経験的に多かったです。<br>「npm」や「Yarn」といった単語が出てきた際には少し思い出してみてください。<br></p><h2 id="he13daf5176">5.JavaScriptライブラリ React.js</h2><p><br>JavaScriptのフレームワーク(ライブラリ)は</p><ul><li>React.js</li><li>Vue.js</li><li>Angular</li></ul><p>などがありますが、本サイトでも利用されている、ReactとそのラッパーであるNext.jsを推奨します。<br>フレームワークってそもそも何？って思ったら定番のこちらのサイトを参照しましょう。<br><a href="https://wa3.i-3-i.info/word12470.html" target="_blank" rel="noopener noreferrer">「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 フレームワーク</a><br><br></p><h3 id="h230fc3635b">React.js 推薦教材</h3><p><br>いきなりReact.jsに触れると、結局これは動いたけど何やってんの？っていう感じになると思うので、そんな時はじゃけえさんという方の以下のUdemy教材(現在は書籍)で学ぶと良いです。<br>この教材はJavaScriptの復習にもなるためここで相当理解が深まります。<br><br><a href="https://www.udemy.com/course/modernjavasciptreact_beginner/" target="_blank" rel="noopener noreferrer">モダンJavaScriptの基礎から始める挫折しないためのReact入門</a><br><br>&lt;&lt;reactsyoseki&gt;&gt;<br>書籍はこちら<br><br>こちらは</p><blockquote><span style="color:#1c1d1f">JavaScriptへの理解なくしてReactの習得はなし得ません。</span></blockquote><p><br>というじゃけえ先生の信念のもと作られた教材です。<br>これを視聴すればReactが裏側でやってくれていることのイメージがしやすくなります。<br><br>上記を学んだら、以下のUdemy教材<br><br><a href="https://www.udemy.com/course/react_stepup/" target="_blank" rel="noopener noreferrer">Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版</a><br><br>こちらを視聴しつつ手を動かして楽しくノラリクラリヌクヌクコーディングしていきましょう。<br><br>もしReactからいきなり入るのは嫌だというイヤイヤ期の方は、jQueryを学んでから雰囲気を掴むと良いかもしれません。<br>jQueryは<span style="color:#24282a">avaScriptを簡単に扱うことができるようにするライブラリ（よく使われる機能やプログラミングの部品を集めてひとまとめにしたもの）です。</span><br><br><span style="color:#24282a">例</span></p><pre><code>var testList = document.getElementsByClassName('test-list');</code></pre><p><br><code>getElementsByClassName('test-list')</code>	はhtml上のtest-listというクラス名のものを配列で取得するという処理です。<br>jQueryを使えば、この処理が<br></p><pre><code>var testList = $('.test-list');</code></pre><p><br>として書くことができます。<br><br>jQueryに関してもProgateで学んでおくので十分だと言えます。<br></p><h3 id="hec60108201">Next.js 推薦教材</h3><p><br>Reactについてある程度理解ができたら次はNext.jsを学んでいきましょう。<br>まずはNext.jsのチュートリアルです。こちらをやることでSSR(サーバーサイドレンダリング)って何？SPA(シングルページアプリケーション)と何が違うの？とかが理解できます。<br>また、チュートリアルは都度見返すものとなります。全く分からん!となってもさらっと流して進むことが大事です。<br><br>さて、これで一通り本サイトのような静的なサイトを構築するための知識には触れました。<br>では実践として以下の記事を読んで世の中に自分のサイトを無料で公開しましょう!!<br><a style="color:#0186ab" href="https://hpfull.jp/blogs/dquirjn12z8" target="_blank" rel="noopener noreferrer">Next.js(TypeScript)+ Vercel + TailwindCSS + microCMS で自作ホームページを無料で公開しよう!![ガチテックブログシリーズ]</a><br><br>また、Next.jsのプロジェクトをVercelというホスティングサービスにデプロイ(インターネットに公開的な)するのにGithubというツールを利用します。ここで軽く学んでおきましょう。<span style="color:#374151">。</span><br><span style="color:#374151">プロダクト開発をチームでする場合も、個人でする場合もソースコードをどこかしらで管理しなければなりません。</span><br><br><a style="color:#1995b7;background-color:#ffffff" href="https://blog.takanabe.tokyo/2014/12/git%E5%85%A5%E9%96%80git%E5%88%9D%E5%AD%A6%E7%BF%92%E8%80%85%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E5%8A%B9%E7%8E%87%E7%9A%84%E3%81%AA%E5%AD%A6%E7%BF%92%E6%96%B9%E6%B3%95%E3%82%92%E8%80%83%E3%81%88%E3%81%A6%E3%81%BF%E3%81%9F/" target="_blank" rel="noopener noreferrer">Git入門：Git初学習者のための効率的な学習方法を考えてみた</a><br><br><span style="color:#374151">こちらを読んでおきましょう。</span><br></p><h2 id="hd492585a88">最後におまけ</h2><p><br>ここまでみてくださり誠にありがとうございました!!<br>実際には手を動かして学んでいきながら、ここも足りないな、となれば自分で調べて学んでいく姿勢が非常に重要です。<br>それではまた、ご機嫌よう。</p>

Next.js×microCMSで自作のポートフォリオサイト...

<h2 id="h40ed4361bf">ホームページとは</h2><p><br>ホームページとは「家」のページです。なんでもそうです。ホームグラウンド、ホームランなどホームとは、「家」と言う意識が重要です。<br>この意識があるかないかでは変わってきます。<br>クライアントにも納得いただけるまで言い続けます。まずはどういった家を作りたいのか、和風なのか洋風なのか、家を意識するのです。家に住むということです。<br><br>理解いただけないクライアント様には拳で解決することもあります。それほど家ということが重要なのです。<br><br>&lt;&lt;home&gt;&gt;<br><br></p>

ホームページとは？

KtaroAtGanon

<h2 id="h7fba2a986b">フィールド作成</h2><p><br>作成の仕方自体は、<br><a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">カテゴリの作成方法</a><br>で、microCMSのコンテンツAPIにタグとかカテゴリとかを作成しておきます。<br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/4c7a644102bb48a99a42f5b5bf39edd6/%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-12-27%204.16.25.png" alt=""><br>こんな感じです。<br><br>ブログ側のAPIスキーマに先ほど作成したカテゴリなりタグなりを参照フィールドとして指定したものを追加します。<br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/a955fcb16c6a4f4b8bada534df5400e6/%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-12-27%204.17.46.png" alt=""><br>こんな感じです。<br></p><h2 id="h9ff89bd48f">ディレクトリ構成</h2><p><br>ディレクトリ構成はこんな感じで作りました。</p><pre><code>└── tags
│&nbsp; &nbsp; &nbsp; &nbsp;├── [tag]
│&nbsp; &nbsp; &nbsp; &nbsp;│&nbsp; &nbsp;└── page
│&nbsp; &nbsp; &nbsp; &nbsp;│&nbsp; &nbsp; &nbsp; &nbsp;└── [id].js
│&nbsp; &nbsp; &nbsp; &nbsp;├── [tag].js
│&nbsp; &nbsp; &nbsp; &nbsp;└── index.js</code></pre><p><br><code>/tags</code><br>がtag一覧ページです。本サイトヘッダーからTAGに行ってみてください。<br><code>/tags/[tag]</code><br>が特定タグがついている記事の一覧ページです。<br><code>/tags/[tag]/page/[id]</code><br>が特定タグがついている記事のページネーションのための実装です。<br><br>ページネーション実装は<a href="https://hpfull.jp/blogs/1mjr-a1_knwt" target="_blank" rel="noopener noreferrer">こちらの記事</a>も参考にしてください。<br></p><h2 id="hfda00e257e">実装のポイント</h2><p><br>getStaticPathsでページネーション用のパスを作成する際に、ネストされた動的なルーティングを実装する部分で少し詰まりました。<br>出てきたエラー文:</p><pre><code>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</code></pre><p><br><br>結論、<br></p><pre><code>export const getStaticPaths = async () =&gt; {
  const tags = await client.get({ endpoint: "tags", queries: { limit: 100 } });


  const resPaths = await Promise.all(
    tags.contents.map((tag) =&gt; {
      const result = client
        .get({
          endpoint: "blogs",
          queries: {
            filters: `tags[contains]${tag.id}`,
            limit: 100,
          },
        })
        .then(({ totalCount }) =&gt; {
          const range = (start, end) =&gt;
            [...Array(end - start + 1)].map((_, i) =&gt; start + i);


          return range(1, Math.ceil(totalCount / 4)).map(
            (i) =&gt; `/tags/${tag.id}/page/${i}`
          );
        });
      return result;
    })
  );
  const paths = resPaths.flat();
  return { paths, fallback: false };
};</code></pre><p><br>みたいな感じでやりました。<br>get /tags でtag全部をとり、tagをmapで回して一つの特定のtagに対してその特定のtagがついている記事をgetします。<br><br>ポイントは作成した配列をflat化している点です。<br><br>何もしない場合:</p><pre><code>[
&nbsp; [ { params: [Object] } ],
&nbsp; [ { params: [Object] } ],
&nbsp; [ { params: [Object] } ],
&nbsp; [ { params: [Object] } ],
&nbsp; [ { params: [Object] }, { params: [Object] } ],
&nbsp; [ { params: [Object] }, { params: [Object] } ],
&nbsp; [ { params: [Object] }, { params: [Object] } ]
]</code></pre><p><br>となるので、以下の形にしなければいけないので、flat()で配列をflat化する。<br></p><pre><code>[
&nbsp; { params: { tag: 'a__qj7f004qi', id: 1 } },
&nbsp; { params: { tag: '2e7y_miiq', id: 1 } },
&nbsp; { params: { tag: 'pv74k4x3u5', id: 1 } },
&nbsp; { params: { tag: 'nsppv8907xeo', id: 1 } },
&nbsp; { params: { tag: 'pkcqsc-2qdz', id: 1 } },
&nbsp; { params: { tag: 'pkcqsc-2qdz', id: 2 } },
&nbsp; { params: { tag: 'e_ylg36dhaj', id: 1 } },
&nbsp; { params: { tag: 'e_ylg36dhaj', id: 2 } },
&nbsp; { params: { tag: 'n54oitv4eq', id: 1 } },
&nbsp; { params: { tag: 'n54oitv4eq', id: 2 } }
]</code></pre><p><br><br></p><h2 id="h03e7af0d39">参考リンク</h2><p><br><a href="https://stackoverflow.com/questions/64371066/next-js-getstaticpaths-for-nested-dynamic-routes" target="_blank" rel="noopener noreferrer">Next.js: getStaticPaths for nested dynamic routes</a><br><br><a href="https://www.mismith.me/blog/web/nextjs-microcms-category-list" target="_blank" rel="noopener noreferrer">Next.js + microCMSでカテゴリ一覧ページを作る</a><br><br><a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">microCMS + Next.jsでJamstackブログを作ってみよう</a><br></p><h2 id="he094b85a8e">アフィリエイトリンク</h2><p><br>&lt;&lt;next&gt;&gt;</p>

Next.js×microCMSでタグ一覧ページを作成。[ネ...

<h1 id="h055566e4e7">なんだろう、良書紹介するの辞めてもらっていいすか</h1><p><br>お久しぶりです。終身名誉リトルボスの原です。おまいさんにおすすめの本を紹介します。#絶対大丈夫 #うーん、クッキーかなー</p><h2 id="hcf83e1357e"><br></h2><h3 id="hdbae273fa8">Amazon Web Services 基礎からのネットワーク&amp;サーバー構築 改訂3版</h3><p><br>&lt;&lt;amazon2&gt;&gt;<br><br></p><h3 id="h80ed34762e">「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか</h3><p>&lt;&lt;amazon1&gt;&gt;<br></p><h3 id="h3b2cbaf502">イラスト図解式 この一冊で全部わかるWeb技術の基本</h3><p><br>&lt;&lt;amazon3&gt;&gt;<br></p><h3 id="h829ffcbb66">Webを支える技術 -HTTP、URI、HTML、そしてREST</h3><p><br>&lt;&lt;amazon4&gt;&gt;<br><br><br></p><h3 id="hcf83e1357e"><br></h3>

僕のおすすめの本というか書籍というか書冊というか図書というか

mjtjuj

<p><span style="color:#374151">ご機嫌よう!!</span><br><span style="color:#374151">ハッピフルのエンジニアトレーニー担当配役出身兼アホのT田です。</span><br><span style="color:#374151">ハッピフルでは創業以来、年9~10回のペースで日常業務から離れて、業務改善、技術研鑽、バイク探しのために開発合宿を開催しています。</span><br><span style="color:#374151">今回は9月10日から12日までの3日間弊社のエンジニアたち(1人)で女神胡へ行ってきました。</span><br><span style="color:#374151">※我々は女神胡へ決してスキーをしにきたのではなく、ゴミ拾いをしにきた。</span><br><span style="color:#374151">※ご当地グルメもたくさん食べたよ！！</span><br><br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/dc401e24f5f24f668f0c73c918accaf6/ahonotakada.png" alt=""><br><br><span style="color:#374151">カラオケもたくさんしました。</span><br><span style="color:#374151">2泊3日で出来上がったのは何もありませんでした。でも楽しかったから良いよね！</span><br><span style="color:#374151">来月も開発合宿(旅行)行きたいね！</span><br><span style="color:#374151">ワタクシはReactの勉強をしていました。じゃけえ万歳！！</span><br><br><span style="color:#374151">&lt;&lt;amazon1&gt;&gt;</span></p>

思い出の地、女神胡で寂しく1人で開発合宿を行いました!!

餃子

<p><a href="https://blog.hpfull.jp/vercel-domain-address/" target="_blank" rel="noopener noreferrer">こちらでどうぞ!!</a><br><br><br>本サイトはNext.jsをVercelにホストしています。Vercelのドメイン設定でお名前ドットコムで買った独自ドメインであるhpfull.jpを利用しています。<br>このたび、この独自ドメインでメールアドレスを作りたいという要望が出ました。×××@hpfull.jpみたいな。<br>Vercelはホスティングサーバーですので、メールサーバーとしての役割は果たせませんので新たにメールサーバーのためのレンタルサーバーを借りる必要があり設定も少し面倒だったので手記として残しておきます。未来の自分がこれを見て役立たせることを祈ります。<br></p><h2 id="h3de35099b3">参考</h2><p><br><a href="https://zenn.dev/mackay/articles/7625cc2e2400b7" target="_blank" rel="noopener noreferrer">レンタルサーバーからVercelに移転したら独自ドメインのメールが使えなくなってしまった話</a><br><a href="https://help.sakura.ad.jp/206371101/" target="_blank" rel="noopener noreferrer">Gmail（ウェブブラウザ）を利用する</a><br><br></p><h2 id="h8a175a9b0e">前提</h2><p><br></p><ul><li>Next.jsで作ったサービスをVercelにデプロイしている</li><li>独自ドメインをお名前ドットコムなどで取得している</li><li>(最終的にはGmailで送受信したい)</li></ul><p><br></p><h2 id="ha007896d1e">Vercelでメール送受信する</h2><p><br>まずはやることの大まかな流れを。<br></p><ol><li>メールサーバーをさくらのレンタルサーバーで契約</li><li>Vercelのネームサーバーのレコードを書き換えメールがきたらメールサーバーへ行くように設定</li><li>さくらのメールサーバーで諸々設定</li><li>Vercel側でSPFレコード設定</li><li>Gmailで諸々設定</li></ol><p><br>ではやっていきましょう。今回作成する独自ドメインはexample@hpfull.jpとします。<br></p><h2 id="h3945415e72">1.メールサーバーをさくらのレンタルサーバーで契約</h2><p><br>https://www.sakura.ne.jp/<br><br>上記サイトの真ん中あたりに「さくらのメールボックス」というのがあるので、こちらから早速契約していきます。とっても安いですね。これには凡庸中人代表破天荒九州男児おじいさんな私も驚きです。<img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/2dacb7b866ce4d61869a9e3caae0f74c/%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-08-22%2012.33.42.png" alt=""><br><br>契約した時、メールサーバーの初期ドメインというものが表示されているので(xxx.sakura.ne.jpの形式)、後ほど使うのでコピーしておきましょう。<br></p><h2 id="h9bc704f2e9">2.Vercelのネームサーバーのレコードを書き換えメールがきたらメールサーバーへ行くように設定</h2><p><br>Vercelのダッシュボード からDomainsからDNS Recordsの設定へいきましょう。<br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/956ec5b3427f4ea9942fd8c7a82e2a8e/%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-08-22%2012.35.22.png" alt=""><br><br>ここに、NAMEは空、TYPEはMX、VALUEは先ほどコピーしておいたメールサーバーの初期ドメインを、TTLは任意、PRIORITYは10を設定し、Addを押します。<br></p><h2 id="ha0ceadb4d3">3.さくらのメールサーバーで諸々設定</h2><p><br>それではまたさくらのサーバーのダッシュボードへいき独自ドメインを設定していきます。<br>自分はお名前ドットコムで契約していました。<br>ダッシュボード 画面の、ドメイン/SSL→ドメイン/SSLからドメイン新規追加します。追加したドメインの設定からSPFレコードの使用を利用するにチェックを入れておきます。<br>SPFレコードってなにって感じだったのですが、ようはなりすましメールを予防してくれるらしいです。設定したほうが良さそうなのでとりま設定しましょう。<br><a href="https://www.kagoya.jp/howto/rentalserver/spf/" target="_blank" rel="noopener noreferrer">詳しいことはこちらへ</a><br>このタイミングで、メール→メール一覧からメールアドレスを作成しておきましょう。自分が今回作成するのは、example@hpfull.jpです。<br></p><h2 id="h9177aa0b65">4.Vercel側でSPFレコード設定</h2><p><br>2でやったようにDNS Recordsに新たにまた追加します。<br>NAMEは空、TYPEはTXT、TTLは任意、PRIORITYは空にします。VALUEはどのような書き方が正解かいまいち理解できていないのですが、「v=spf1 +a:さくらの初期ドメイン -all」とするとうまくいきました。<br><a href="https://mxtoolbox.com/SuperTool.aspx" target="_blank" rel="noopener noreferrer">https://mxtoolbox.com/SuperTool.aspx</a><br>こちらのサイトにて、ドメインを打ち込んで、<br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/0e64990847234197ba8134eb89acf308/%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-08-22%2012.52.04.png" alt=""><br>こんな感じになっていたら大丈夫だと思います。<br><br>これでとりあえず、example@hpfull.jpでメールが送受信できるようになっています。ここからは、このメールアドレスをGmailで使えるように設定していきます。<br></p><h2 id="h134dc0f31f">5.Gmailで諸々設定</h2><p><br>まずは任意のGmailアカウントにログインし、Gmailアプリを開きます。画面右上にある設定→すべての設定を表示をクリックします。<br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/5d10462ce93a4f9aaf98f147e00b5417/%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-08-22%2012.57.44.png" alt=""><br><br>アカウントとインポートタブの他のアカウントのメールを確認→メールアカウントを追加するをクリックします。<br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/80d4501b884b4388b16c67d81cffdda0/%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-08-22%2012.59.42.png" alt=""><br><br>こちらに今回設定したいメールアドレスであるexample@hpfull.jpを入力して次へを押します。<br>次ページにて、「他のアカウントからのメールを読み込む(POP3)」を入れて次へを押します。<br><br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/567a178001d84044b91382216caa0d2c/%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-08-22%2013.03.30.png" alt=""><br>次ページにて上記のように埋めます。<br>ユーザー名は今回設定するexample@hpfull.jp、パスワードはメールアドレス作成時に設定したパスワード、POPサーバーはさくらのサーバーの初期ドメイン、上2つをチェックにし、ポートを995に変更して次へを押します。<br>これでexample@hpfull.jpでメールが受信できるようになりました。<br><br>次ページからメールの送信設定を行います。<br><br>名前には、メールアドレスの送受信にて使いたい任意の名前を設定します。<br>次ページにて、<br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/6fb31a450eb740f1b8ce6133ed5fd620/%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-08-22%2013.21.38.png" alt=""><br>SMTPにはさくらの初期ドメイン、ユーザー名は設定したいメールアドレス、パスワードはアドレス作成時のものを入れあとはそのままの設定でアカウント追加を押します。<br><br>その後、確認コード入力の画面に移ります。確認コードはさくらのメールサーバーのダッシュボード →メール一覧→該当のアドレスのwebメールをクリックすると届いています！<br>これを入力すれば晴れてgmailで独自ドメインで作ったメールアドレスを扱えます。<br><br>おめでとうございます。それではどんでん返し系ウォーリーによるテックブログシリーズでした。(乙)<br></p>

Vercelにホストしてる独自ドメインでメールを作りたい[お...

<p>皆さんご機嫌よう。<br>今回のガチテックブログシリーズは「せっかく作ったおばあさんのサイトに人がきてくれない」という悩みを解決する手段の１つを提供する回です。全国のサイトを作成したおばあさんとその愛するお孫さん(ウォーリー読破済み)はご覧あれ。<br></p><h2 id="h36b5e2bdab">さっそくやろうか</h2><p><br>いつものように戯言はいいからやっていこうね。<br>そもそもなんでsitemapを作るとSEO的にいいのかって話ではあるけれども、それはあなたのお母さんやお父さんが作ってくれた手作りのジャムを思い出してみよう。<br><br>手作りでもいいのですが、大変簡単に導入できるパッケージがあるのでそれを使っていきましょう。<br><br><code>npm install --save-dev next-sitemap</code><br></p><h2 id="h8aaff90400">ファイルに設定情報を書く</h2><p><br>新たにルートディレクトリに <code>next-sitemap.js</code>  を作成し、以下のように書き込んでいきましょう。<br></p><pre><code>module.exports = {
  siteUrl: 'https://hpfull.jp',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  outDir: './out',
};</code></pre><p><br>siteUrlのところは各自ご自身の、またはウォーリーのドメインを入れましょう。Next.jsのSSGではビルド後にoutというディレクトリがデフォルトでできるのでその配下に出力します。<br>sitemap.xml と robots.txtファイルが出来上がります。<br><br>それではこの設定が済んだら、build時にサイトマップを更新してくれるようにコマンドを設定します。<br></p><pre><code>// package.json

  "scripts": {
    "dev": "next dev",
    "build": "next build &amp;&amp; next export &amp;&amp; next-sitemap --config next-sitemap.js",
    ....</code></pre><p><br>はい、完成です。とっても簡単ですね。<br>この状態でビルドを行うとサイトマップの自動生成をしてくれますよ。<br></p><h2 id="h3252832a9c">おまけサイトマップをGoogle Search Consoleへ登録しよう</h2><p><br>ついでにせっかく作ったサイトマップなのだからGoogleのクローラーに自慢しよう。<br>サーチコンソール(以下継承略佐知子)の登録方法自体はここでは省きます。<br><br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/773aed5a2f8b4b60be3d0c8a9ef0f164/%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-08-19%2016.17.32.png" alt=""><br><br>これで完成です。<br><br></p><h2 id="h3de35099b3">参考</h2><p>https://fwywd.com/tech/next-sitemap</p>

Next.jsのSSGでsitemapをウォーリーを探しなが...

<p>私たち権力なき社団ハッピフル倶楽部は今年で設立10周年を迎えます。<br>森坂元構成員が脱退したり、一時はそれぞれ個人の目標に向かう時期もあったりとしましたが、今、全員が同じ野望に向かって歩みを進めることができています。<br>そんな私たちの現状と今後の事業についての展望を教えてあげます。<br></p><h2 id="habe790beca">現在地</h2><p><br>私たちは現状主に3つの事業を展開しています。</p><ul><li>ファッションブランド製作・販売事業</li><li>コンサルティング事業</li><li>Web製作・Webアプリケーション開発事業</li></ul><h2 id="hcf83e1357e"><br></h2><h3 id="he5e08a7df8">ファッションブランド製作・販売事業</h3><p><br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/76ac9e7468ad43a9a1079ae41084d451/jacketandcoatformen%20(1).png?w=300&amp;h=300" alt=""><br><br>まずは現状のメイン事業となっているファッション・アパレル事業です。<br>新進気鋭なデザインアイディアを発想し創造しこの世へ送り出す、それはまるで親の気分です。<br>親です。親とはそれを産んだもの、生み出したもの、そしてそれを養うものです。私たちは確かにデザインを発想し創造し生み出したとは言えますが、果たして養えているのでしょうか。甚だ疑問です。<br></p><h3 id="hefd6a4872b">コンサルティング事業</h3><p><br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/c981c48c5e14482eb432603699bc168b/happyconsul.png?w=300&amp;h=300" alt=""><br><br>コンサルティング事業は今のところ収益が立っていません。まだ事業への本気度が高くなく、本気を出せていないということがあります。私たちが仮に本気でコンサルティングを行なった場合、コンサルティングします。コンサルティングとはいわゆる相談です。略してコンサル、略さないとコンサルティングと呼ばれます。相談をすることで非常に安心を得られますし、コンサルティングして皆さんの発展を祈り、コンサルティングファームとして解決策をファームします。つまり相談に乗ります。私たちはこれをハッピーコンサルティングと呼んでいます。本当に親身に相談に乗るので、お金もたくさん取ります。<br><br><br></p><h3 id="ha37a504229">Web製作・Webアプリケーション開発事業</h3><p><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/d05d0b57e5d5491db5cd9c2a059b9642/architectureandengineering.png?w=300&amp;h=300" alt=""><br><br>Webサイト製作とWebアプリケーションの開発を経営戦略や事業立案からグロースの点まで寄り添って行います。<br>ホームページ制作を私たちにお願いするなら、<a href="https://hpfull.jp/blogs/b5zqzgp5_y" target="_blank" rel="noopener noreferrer">ホームページとは家のページだということを絶対に忘れてほしくないです。それに関してだけは譲ることができません。ここについては設立時に声明文を出して以来、10年が経った今でも大事にしている価値観になります。</a><br>アプリケーション開発は弊教団のスペシャルエンジニアが頑張ります。<br></p><h2 id="h30dbc9bd24">これからの事業展開について</h2><p><br>私たちは上記の現在の事業だけでなく、もっと多角的に複数領域に事業展開をしていきたいと考えています。<br>バーンアウトする前に事業を頑張ります。<br></p><h3 id="he4c1ec9c6e">飲食店経営</h3><p><br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/69dcd4c2ebc9432f84d5748272d2d992/happywine.png?w=300&amp;h=300" alt=""><br><br>弊教団には特別な教育鞭撻訓練を受けたBartenderが存在します。彼は僕と同じで生まれた時からBartenderでした。僕は生まれた時から教祖でしたし、彼は生まれた時からBartenderでした。本当ですよ。<br>私たちは人間関係に疲れ切った日本人のため、当時のキエフ大公国の皇帝に思いを馳せながら、憩いの場としての提供を行いたいと考えています。なぜなら、人間関係に疲れ切った日本人に憩いの場を提供したいのです。<br>飲食店と一口にいっても、さまざまです。私たちの教団が考える飲食店は、お昼に喫茶店を展開し、夜にバーを開き、朝には朝マックを勝手にフランチャイズ加盟した上でフランチャイジーとしてお店を展開していきます。朝マックをまとめて購入しそこにマージンを加えてお店に出すことでマージン分の利益を得るビジネスを行います。教団の人間を使えば人件費も無料ですし、マックの近くにお店を展開すればマックに行くまでも大変じゃないから良いです。<br>その後、事業の業績が好調ならば、教祖の僕としては弊飲食店をフランチャイズ展開していきます。マックのフランチャイジーがフランチャイズ展開するので、ここで加盟してくれたフランチャイジーはフランチャイジーフランチャイジーですね。<br></p><h3 id="h233e9823de">プロeスポーツチーム運営</h3><p><br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/3fed218959a54f3c9e61a230bc43afff/happyesports.png?w=300&amp;h=300" alt=""><br><br>2021年、チャンピオンエディションアマチュアライセンス大学付属チャンピオン高校所属の方程式ラプラス選手とプロ契約の締結したことにより、プロeスポーツチーム「ハッピフル忍者(大会出場時の表示名：HP Ninja)」を結成しました。<br>選手、マネージャー、アナリスト、監督、コーチ、先輩陣で運営しています。大会出場だけでなくeスポーツビジネスの発展と繁栄を目指し、大会開催や大会設営、リアルとバーチャルの融合を通して文化の発展に対して活動したいと考えています。<br>僕自身、数々のタイトルでタイトルを獲得してきた選手でしたが、チームを運営する立場になり、タイトルだけでなく、チームとして、またはオーディエンスと共に一体となる喜びに世界の創出と誕生を感じています。<br></p><h3 id="hdfbeb0aa98">プロスポーツチーム運営</h3><p><br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/44fb31f6c8144ad8b576891a11fdb72d/happysoccersports.png" alt=""><br><br>私たちの原点はフットサル、サッカーです。生まれた時からボールと友達。すでにフットサル大会の運営や設営を通してコネクションを作っており、日本代表の方ともセッションを交わしコネクションを確立している段階です。<br>東京落合を中心としたスポーツチームの発展をすることで、落合を元気に、長期的な落合民のための地域密着型のスポーツチーム作りを目指しています。<br>スポーツはサッカーに限らず、野球も好きなので、野球チームも作りたいと考えています。<br></p><h3 id="h1255d874c8">営業代行事業</h3><p><br>今書いてます。</p><h3 id="hcf83e1357e"><br></h3><h2 id="h3bcda3e6b0">最後に</h2><p><br>この記事は未完成です。まるでサグラダファミリアですね。<br>これから天才教祖事業家集団ハッピフル倶楽部は権力なき社団として、事業を思い付いた際にはこの記事に付け足していきます。<br>お楽しみに。</p>

権力なき社団ハッピフル倶楽部の野望を教えてあげます。

React(Typescript)+Redux+Firebaseでチャットアプリを作ってみたメモである。

<p>こんにちは！<br>株式会社ハッピフルでLP作成などのクリエイティブや数値分析などを担当している高槻です！<br><br>最近青汁にハマり想定以上の苦さに悶絶しております。<br><br>ところで、尖りに尖ったユニコーンベンチャー企業である弊社では福利厚生も尖りに尖っています。鋭利です！！<br>そんな弊社の福利厚生を教えてあげます！<br></p><h2 id="hbdd6d30ad9">オフィスのど真ん中にこたつ！！</h2><p><br></p><h2 id="hcf83e1357e"><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/c3729c1e4f064e188b97d078ea3c1b5e/kota.jpeg" alt=""></h2><p><br>弊社にはオフィスのど真ん中に年中こたつが存在します。ただしこたつに入れるのは偉い人のみです。<br>この福利厚生に込められた思いを弊社CEO矢野先生に聞いてみると、「これが僕の夢」とおっしゃっていました。<br>社員思いの素晴らしいCEOでした。<br></p><h2 id="h4a7e8ea6b6">オフィス全席喫煙OK!</h2><p><br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/e276aaa1286d4e879f740f4f56fd8d96/tabako.jpeg" alt=""><br><br>弊社は基本的にオフィスがかなりモクモクしています。CEOはタバコを吸う人がタバコを吸わない人に気を使わなくていい社会作りに励んでいます！<br><span style="color:#000000">ただし寝タバコと葉巻は非常に危険なためお控えください。特にこたつに入りながら寝タバコをした社員がいて事件になりました。</span><br></p><h2 id="h0ad61815a3"><span style="color:#000000">ONEデスク制度</span></h2><p><br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/a8a6a937f08b4c2ab152b9cf6a14a479/aimasuku.jpeg" alt=""><br><br><span style="color:#000000">入社を決めてくれた社員に向けて上限8万円までデスク周りの作業効率を改善するための「何か」を購入できる制度です。</span><br><span style="color:#000000">最近入社を決めてくれた宮沢君はアイマスクを買いました。</span><a style="color:#0186ab" href="https://hpfull.jp/blogs/9ekh2-x-diql" target="_blank" rel="noopener noreferrer">新メンバーが入社しました!!!!</a>の記事を見る<br><br>この福利厚生を使うためだけに弊社にジョインしてくれるメンバーもいました。<br></p><h2 id="h9685aa7e7c"><span style="color:#000000">Think!福利厚生制度</span></h2><p><br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/b9bd5c63d157426abd433f648da4394d/think.jpeg" alt=""><br><br><span style="color:#000000">社員自ら福利厚生を考え制限なしで実行できる制度です。</span><br><span style="color:#000000">弊社では新しい福利厚生を考える部署があります。社員がどうしたらパフォーマンスを発揮できるのかだけを考え家には帰しません。</span><br></p><h2 id="h2d49d804c6"><span style="color:#000000">コーヒーナップ制度</span></h2><p><br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/d417ed421cb8449e970a7d2229d67a69/doge.jpeg" alt=""><br><br><span style="color:#000000">上長へ土下座をすることで5分の仮眠が認められる制度です。</span><br><span style="color:#000000">弊社は就業時間が長く、拘束時間が大変長いことで有名です。そのため、各社員はまとまった睡眠の時間は取れずパフォーマンスに影響が出ていました。そこで考えられたのがこの制度です。</span><br><span style="color:#000000">もちろん、みんなが働いている横で眠るようなことがタダでできるわけではありません。仮眠を取りたい場合は上長に土下座をしましょう。仮眠可否の審査のために土下座を受けた上長が仮眠審査証を発行する必要があります。</span><br></p><h2 id="h0548c4d4c1"><span style="color:#374151">CTOの書籍を勝手に拝借しよう</span></h2><p><br><img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/fc42d78ad4d448c7bb98d5325202503b/freerank.jpeg" alt=""><br><br><br><span style="color:#374151">オフィス内にある書籍無断で持ち出すことが可能な制度です。もちろん見つかった場合はリアルに首が飛びますよ！</span><br><br><span style="color:#374151">&lt;&lt;giro&gt;&gt;</span><br><br><br>弊社は風通しがよいです。<br>興味を持った方は年中開催される説明会への参加や面談の応募を検討してみてください!!<br><br><a href="https://hpfull.jp/jobs" target="_blank" rel="noopener noreferrer">→採用情報</a><br></p>

弊社の福利厚生について解説してあげます

Next.js×microCMSで自作のポートフォリオサイトを無料で作れるようになるまでのロードマップ

<p><span style="color:#374151">皆さん、今日はハッピフル定期開催のフットサル練習会にて平井堅さんが来てくださいました。</span><br><span style="color:#374151">平井さんとは10年前のイベントでお話しさせて以来平井さんも好きだというフットサルを通じて交流を深めてきました。</span><br><span style="color:#374151">メンバーと共にフットサルに励み、途中SDGsで持続可能性を高めました。</span><br><br><span style="color:#374151">平井堅さん、これからも頑張ってください！</span></p>