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

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

飲茶

<a href="https://blog.hpfull.jp/nextjs-xmicrocms-tailwindcss/" target="_blank" rel="noopener noreferrer">こちらで見てください!!</a> こんばんは。本記事では、Next.js(TypeScript)+ Vercel + TailwindCSS + microCMSという構成の、完全無料でモダンなホームページを公開する方法を紹介します。 この記事をイケイケすることで本イケイケハッピフルホームページと同じ構成のイケイケブログをイケイケする下地が整います。 なお、Next.jsは後から簡単にTypeScript化することが可能なので、最初はJavaScriptを使って構築するのが良いかもしれません。 →<a href="https://hpfull.jp/blogs/11_b0nwhu0" target="_blank" rel="noopener noreferrer">Next.jsのプロジェクトをTypeScript化する</a> 今回作成するサイトのソースコードは<a href="https://github.com/hpfull-yamucha/minimum-nextjs-microcms" target="_blank" rel="noopener noreferrer">こちら</a>です。 <h2 id="h8de6a2a24f">前提知識</h2> 想定読者は以下となります。 <ul><li>Reactで簡単なアプリを作ったことがある</li><li>Webサイトの仕組みがわかる</li><li>CMSが何か分かる</li></ul> 上記が分からん!!という方は以下の記事を参考にしてみてください。 <a href="https://hpfull.jp/blogs/11_b0nwhu0" target="_blank" rel="noopener noreferrer">Next.js×microCMSで自作のポートフォリオサイトを無料で作れるようになるまでのロードマップ</a> <h2 id="h7f0f3e295c">microCMSとは</h2><blockquote>microCMS はクラウド型のヘッドレス CMS です。 コンテンツ管理のためのサーバ管理は一切不要で、サインアップするだけですぐにサービスを利用開始できます。</blockquote> ヘッドレスCMSとはビューがないCMSです。提供してくれるのはバックエンドのAPIのみです。つまりmicroCMSを利用する場合、管理画面などから記事を書いたものをAPIで受け取り描画する必要があります。ヘッドレスCMSにすることでフロントエンドの自由度が高まるだけでなく、スキーマを自由に設定できるため柔軟性が増します。何より個人であれば無料で使えるため、勉強する場所に使うには非常に有用です。 <h2 id="h23061a5cab">技術構成</h2> <ul><li>Next.js (SSG + SSR)</li><li>TailwindCSS</li><li>microCMS (コンテンツ)</li><li>Vercel (Hosting, API)</li></ul> ホスティング先にVercelを利用することでサイトを完全に無料で公開することができます。 <h2 id="h6bdc4b5483">Next.jsアプリを立ち上げる</h2> まずは適当なディレクトリで、<pre><code>$&nbsp;npx create-next-app sample-nextjs-microcms</code></pre> をしましょう。 この後、一旦 <pre><code>$npm run dev</code></pre> でNext.jsがローカルで立ち上がっているか確認しましょう。 こんな感じになっていたら、とても嬉しいですね。 <img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/04ca88d0b6b649e59ca828f80ca0b5ad/%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%2022.35.46.png" alt=""> <h2 id="hadea288cc6">早速Next.jsのプロジェクトをVercelにデプロイ</h2> さてまだデフォルトのままでmicroCMSとも連携していない状況ですが早速デプロイしていきましょう。デプロイは本当に簡単です。 <h3 id="hfd250bf8cc">Githubリポジトリを作成</h3> まずは先ほど作成したプロジェクトをGithubにPushしておきます。 <h3 id="h289851dba5">Vercelのアカウントを作成する</h3> <a href="https://vercel.com/signup" target="_blank" rel="noopener noreferrer">こちらのサイト</a> から Try Vercelを押して、 Continue with GitHub を選びましょう。 ぽちぽちと進んでいきます。 Import Git Repositoryから、&nbsp;Add GitHub Account&nbsp;を選択しましょう。 自分のGithubアカウントをInstallして、先ほど作成したリポジトリをImportを押します。 <img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/85ad763080724022ae0174b179ab674d/ScreenShot%202022-03-11%201.20.51.png" alt=""> Importを押し、Deployを押しましょう。 Dashboardを押すと先ほどの初期状態のNext.jsのサイトがインターネットに公開されています🎉🎉🎉🎉 <img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/4bb1fb2098bb4e0083f34faa74c6871e/ScreenShot%202022-03-11%201.23.03.png" alt=""><h2 id="hcf83e1357e"> </h2>デフォルトのままデプロイしたため少しだけ編集を加えてそれが自動デプロイされる過程を見ていきましょう！ <h3 id="h251ffc7ae8">TailwindCSSの導入</h3> このタイミングでTailwindCSSをインストールしておきます。 Tailwind CSSってなんじゃい。って方はこの項目をスルーしても大丈夫です。 おすすめの動画→ <a href="https://www.youtube.com/watch?v=5TymbaeyV-0" target="_blank" rel="noopener noreferrer">【Tailwind CSS #1】最近流行りのTailwind CSSを学ぼう</a> <pre><code>$npm install -D tailwindcss@latest postcss@latest autoprefixer@latest</code></pre> インストールが確認できたらTailwindCSSを設定していきます。詳細はこちらの<a style="background-color:#ffffff" href="https://tailwindcss.com/docs/guides/nextjs" target="_blank" rel="noopener noreferrer">公式ドキュメント</a>を参照してください。 まずはtailwindcssを初期化します。<pre><code>npx tailwindcss init -p</code></pre> <ul><li>tailwind.config.js</li><li>postcss.config.js</li></ul> の2つのファイルが新たに作成されています。 そして、tailwind.config.jsのpurgeオプションを設定することでビルド時に未使用のクラスを除外することができるためパフォーマンスの最適化が行えます。 今回は、pagesとcomponentsディレクトリをpurgeの対象範囲とします。 これも、<a style="color:#0186ab" href="https://tailwindcss.com/docs/guides/nextjs#configure-tailwind-to-remove-unused-styles-in-production" target="_blank" rel="noopener noreferrer">公式ドキュメント</a> を参考してください。 <pre><code>// tailwind.config.js
module.exports = {
 // 追記する箇所
 purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
 darkMode: false, // or 'media' or 'class'
 theme: {
 extend: {},
 },
 variants: {
 extend: {},
 },
 plugins: [],
};</code></pre> 最後にTailWindCSSのファイルをpages/_app.tsxで読み込むようにしてグローバルに適用させれば完了です。 <pre><code>// pages/_app.js
import "../styles/globals.css";
import "tailwindcss/tailwind.css";

function MyApp({ Component, pageProps }) {
 return &lt;Component {...pageProps} /&gt;;
}

export default MyApp;</code></pre> さて、実際にTailwind CSSを適用させてみましょう。 <pre><code>// pages/index.js

export default function Home() {
 return (
 &lt;div className="flex justify-center items-center min-h-screen"&gt;
 &lt;p className="text-4xl"&gt;サンプルブログ!!&lt;/p&gt;
 &lt;/div&gt;
 );
}</code></pre> とすると以下のようになっているかと思います。 <img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/107474d428e64536b68842ae1862d623/ScreenShot%202022-03-11%201.36.37.png" alt=""> この状態で一旦Pushしてみましょう!! すると、GithubにPushするだけでVercelの方で自動で再デプロイが始まっており、インターネットに公開されているURLの方も上記のように修正されています。 なんとこんなにも簡単にインターネットに公開＆再デプロイできるのです。しかも無料。。なんというVercelでしょうか。 さて、次からはようやくmicroCMSと繋げていきます!! <h2 id="h38c8766536">microCMSの設定</h2> 次に<a href="https://app.microcms.io/" target="_blank" rel="noopener noreferrer">microCMS</a>のアカウントをポチポチと作成したのち、「サービス」を作成しましょう。名前は好きなものにしてください。 コンテンツ(API)から新たなAPIを作成しましょう。今回はAPI名をブログ、エンドポイントをblogsに設定しましょう。 <img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/3b8600bf46ad46d7aa002ea428c07ed2/ScreenShot%202022-03-11%201.41.51.png" alt=""> APIの型はリスト型、スキーマにはtitleとbodyとimgaeを定義します。完了したら一度コンテンツを何個か追加しておきましょう。 ここで一度APIプレビュー画面から取得をクリックしてレスポンスが200であることを確認しましょう。この時APIキーを後々利用するのでコピーしておきます。 <h2 id="h1626df2f94">Next.js側の実装</h2> それでは上記で作成したコンテンツを取得するよう実装していきましょう。今回は簡略的にするためにトップページにそのままブログ一覧を載せます。 <h3 id="h5118cff3d7">APIキーをenvファイルで管理</h3> ローカル環境からもAPIを叩きたいので、先ほどコピーしておいたAPIキーをenvファイルで保護しておきます。 Next.jsでは <code>.env.development.local </code>というファイルに <pre><code>API_KEY=先ほどコピーしたAPIキー</code></pre> のように記述することで process.env.API_KEYとして値を使うことができるようになります。 <h3 id="h4c5d1943df">microCMSのsdkをインストール</h3> <a href="https://microcms.io/features/sdk" target="_blank" rel="noopener noreferrer">microCMSの公式SDK</a> <a href="https://github.com/microcmsio/microcms-js-sdk" target="_blank" rel="noopener noreferrer">ソースコード</a> 上記で提供されているsdkを利用します。これを利用することで非常に簡単にmicroCMSのAPIを扱うことができます。公式さんに感謝ですね! <pre><code>$ npm install --save microcms-js-sdk</code></pre> インストールした後、libsフォルダを作成し、そこにclient.jsを作成し、以下のように記述します。 <pre><code>// libs/client.js
import { createClient } from 'microcms-js-sdk';

export const client = createClient({
&nbsp; serviceDomain: '設定したサービス名',
&nbsp; apiKey: process.env.API_KEY,
});</code></pre> これでAPIを叩く準備は整いました!! <h3 id="hd2a22df668">ブログ一覧を取得してみる</h3> page/index.js<pre><code>import { client } from "../libs/client";

export default function Home({ blogs }) {
 return (
 &lt;div className="flex justify-center items-center min-h-screen"&gt;
 &lt;ul&gt;
 {blogs.map((blog) =&gt; (
 &lt;li className="mb-2" key={blog.id}&gt;
 &lt;a&gt;{blog.title}&lt;/a&gt;
 &lt;/li&gt;
 ))}
 &lt;/ul&gt;
 &lt;/div&gt;
 );
}


// データをテンプレートに受け渡す部分の処理を記述します
export const getStaticProps = async () =&gt; {
 const data = await client.get({ endpoint: "blogs" });


 return {
 props: {
 blogs: data.contents,
 },
 };
};</code></pre> これだけです。すると、、 <img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/72c211baf6464cc5889cda9272c3d3a0/ScreenShot%202022-03-11%201.58.49.png" alt=""> できましたね！！ さて、これをウキウキでGithubにPushしてVercelにデプロイしてみると、、、 なんかエラーが出ます。そうです。envファイルはローカル環境にしかないですよね。 ということで、、 VercelのSettingsからEnvironment Variablesへ遷移し、 <img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/aac7b838c2f64fca8e81075bd1269432/ScreenShot%202022-03-11%202.05.14.png" alt=""> として再デプロイすると、インターネットに公開されているものもしっかり反映されています。 これであなただけの最強ホームページ(ブログ)の完成ですね！！！！ <h2 id="h3f58c2b1e4">microCMSの料金</h2> microCMS、どうでしたか？控えめに最高でしたね。と言いながら今もmicroCMSで記事を書いています。 microCMS自体触ってみればわかると思いますがUI/UXがイイ感じで扱いやすいです。WordPressのようなコミコミのCMSも良いですが僕はシンプルが好きです。 そんなmicroCMSですが、料金体系は2022/03/11現在以下のようになっています。 <img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/a77acadf88d14d379b41cc25e6e12d9d/ScreenShot%202022-03-11%202.11.24.png" alt=""> 色々書いてありますが、とにかく個人で扱う分には無料で十分かと思います。地味にAPI3つはキツいのと、月の転送量20GBが厳しめかな？というのはありますが、無料ですからね。 個人的な意見を言うと需要はあまりないかもしれないのですがHobbyプランとTeamプランの間のプランがあればいいなあなんて思っています。 因みに弊ハッピフルサイトは月の転送量がこんな感じです。 <img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/643b51f05dfb4097af602c8567b90630/ScreenShot%202022-03-11%202.15.07.png" alt=""> <h2 id="ha214098e44">まとめ</h2> いかがでしたでしょうか？ いかがでしたか？ どうでしたか？ どうでしたでしょうか？ ここからどんどん自分なりにサイトを拡張していきましょう。 自分が作ったアプリを載せてポートフォリオサイトにするのもよし、ブログ記事を書いてアウトプットの場所にするのもよし。 因みにこのサイトではページネーションの作り方やタグの作り方も解説しているので是非ご覧ください。 <a href="unsafe:with microCSS">Next.js + TailwindCSS でページネーションを実装する (with microCSS)[ガチテックブログシリーズ</a> <a href="https://hpfull.jp/blogs/qj5rgkpz1pjk" target="_blank" rel="noopener noreferrer">Next.js×microCMSでタグ一覧ページを作成。[ネストされた動的なルーティング</a> <h2 id="h3de35099b3">参考</h2> <a href="https://fwywd.com/tech/next-tailwind" target="_blank" rel="noopener noreferrer">Next.js (JavaScript/TypeScript) に Tailwind CSS を導入する方法</a> <a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">microCMS + Next.jsでJamstackブログを作ってみよう</a>

Next.js×microCMSで自作ホームページを無料で公...

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

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

<h2 id="h8014497ab1">手順を忘れないように、忘却の空とその彼方へ花束を</h2> パッケージ管理はYarnを使う。 CSSフレームワークにはTailwind CSSを利用。 大まかな流れ↓ create react appコマンドでReact+Typescriptプロジェクトを作成する。 Tailwind CSS導入する Eslint,Prettierの設定 <h2 id="h5319ab6792">create react appコマンドでReact+Typescriptプロジェクトを作成する。</h2> <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> memo: yarnがローカルにインストールされているときはパッケージマネージャーにYarnが使われる。 <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> <h2 id="hca3bf45a43">Eslint,Prettierの設定</h2> →<a href="https://zenn.dev/jpn_asane/articles/d7f44682b74fdc" target="_blank" rel="noopener noreferrer">https://zenn.dev/jpnasane/articles/d7f44682b74fdc</a> <pre><code>~/Project/React/react-chatapp master* 22s
❯ yarn run eslint --init</code></pre> <img src="https://images.microcms-assets.io/assets/34dabc4bfdb14a1b8829cc6217fe35fc/207f5538679c4ac8bd7a91342222a1e2/eslint.png" alt=""> 設定はこんな感じ。 Typescript用のパッケージインストール <pre><code>yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser</code></pre> Airbnbの細かい設定をしてくれるやつをインストール <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> Prettierのパッケージをインストール。<pre><code>yarn add -D prettier eslint-config-prettier</code></pre> <h2 id="hd0ac8d3139">Tailwind CSS導入する</h2> <pre><code>~
❯ yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9</code></pre> これやると、 <pre><code>zsh: no matches found: postcss@^7</code></pre> が出た。 → <a href="https://chicog.me/articles/9/" target="_blank" rel="noopener noreferrer">解決方法</a> create react appコマンドで作成したプロジェクトはwebpackの設定をオーバーライドできない。つまり、PostCSSの設定を上書きできない。 →cracoをインストールする。 <pre><code>yarn add @craco/craco</code></pre> package.jsonファイル内のスクリプトでcracoを利用するように変更 <pre><code>{
 // ...
 "scripts": {
 "start": "craco start",
 "build": "craco build",
 "test": "craco test",
 "eject": "react-scripts eject"
 },
 }</code></pre> これでyarn startしてみると、、 <pre><code>UnhandledPromiseRejectionWarning: TypeError: match.loader.options.plugins is not a function</code></pre> 的なエラーが出る。 → <a href="https://github.com/facebook/create-react-app/issues/11777" target="_blank" rel="noopener noreferrer">解決方法</a> craco.config.js内にある postcssの記述をpostcssOptionsに変える。 これで yarn startでプロジェクト立ち上がる。 次はtailwind CSSの設定 <pre><code>~
❯ npx tailwindcss init</code></pre> して、tailwind.config.jsで <pre><code>purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],</code></pre> とする。 index.cssに <pre><code>@tailwind base;
@tailwind components;
@tailwind utilities;</code></pre> を追加。 <h2 id="hb41434a59a">firebase関連</h2> firebase login<pre><code>~
❯ firebase login
Already logged in as amahaya0831@gmail.com</code></pre> すでにログイン済み。 コンソールでプロジェクト作って、webアプリを作成。 Realtime Databaseを作成。 プロジェクト配下で <pre><code>firebase init</code></pre> とりま、Realtime Datebase.... のところだけチェックすればok。 database.rules.jsonで全部trueにしておく。 → のちfirebase deployで設定を反映させる必要あり firebaseのsdkを利用するため、 <pre><code>yarn add firebase
yarn add @types/firebase</code></pre> で、envファイル作成して設定値を埋める。 <h2 id="ha0d547188d">Redux導入</h2> <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>

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

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

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

餃子

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

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

[特別ゲスト]平井堅さんが来てくれました!!

mjtjuj

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