実はこのブログにmicroCMSを導入してみました！ 今まではcontentディレクトリを作成し、その中のマークダウンファイルを読み込むことで記事を管理していました。 しかしその方法だとカテゴリーを増やすのも一苦労、記事を書く時もいちいちVSCodeを開いてexample.mdのようにファイルを作成して〜…とめんどくさい作業をしなければなりませんでした。 そこで導入したのがmicroCMSです！ このブログを作成する際に、たびたびmicroCMSという単語を見たので試したところ、「これめちゃくちゃ凄いな」と思ったので、今回はmicroCMSを導入するメリットや感想について書いていこうと思います！ <h2 id="h7f0f3e295c">microCMSとは</h2>microCMSとは、日本製のヘッドレスCMSのことです。 そもそもヘッドレスCMSって何？って方も多いと思います。従来のWordPress等のCMSはサーバー上に設置し、その中にサイト組み込みます。そしてサーバーにリクエストがきた際に動的にHTMLを生成し、レスポンスを返す、という仕組みになっています。 一方、ヘッドレスCMSはコンテンツをAPIから取得するだけなので、他の作業は自分で実装する必要があります。 しかしAPIから取得して表示するだけなので、フロントエンドの実装のみに集中することができ、結果的に実装がシンプルになります。 <h2 id="hec15780bb7">microCMSを使うメリット</h2>microCMSの説明でもお伝えしましたが、APIから取得するだけなので、結果的にフロントエンドの実装のみに焦点を当てることができます。そしてそれをNext.jsなどのフロントエンドフレームワークと組み合わせることで、高いDXを得ることができます。具体的にいうと、Next.jsであれば、getStaticProp内でfetch APIでコンテンツを取得します。するとjson形式のコンテンツ情報が取得できるため、それをJSXに埋め込んでいく感じです。詳しくは<a href="https://blog.microcms.io/microcms-next-jamstack-blog/" target="_blank" rel="noopener noreferrer">こちら</a>のブログ構築の記事(公式)を参考にしてください。 <h2 id="ha214098e44">まとめ</h2>個人的にWordPressでWeb制作案件を受けるのはきついなと思っていましたが、microCMS + Next.js でなら受けてみるのもありかなと思います。今のところ案件をもらえそうな雰囲気になっている企業があるので、もしもらえた際は最高のWebサイトを納品しようと思います。

programming

microCMSを使ってみた感想

先日、以下のツイートをしました。 <blockquote class="twitter-tweet">・Web制作で稼ぎたい方 ・フロントエンドを勉強している方 ・Webで集客したい方 サイトの画像には気をつけた方がいい PNG,JPEGからSVG,Webpに変えるだけでページの表示速度に差がでる 速度が遅いとGoogleの評価が下がりアクセスも下がる Webpに変えただけで64KBから5KBになったのでやる価値はある&mdash; しょうた@高校生がフロントエンドを目指す (@shou_study) <a href="https://twitter.com/shou_study/status/1355885841017520131?ref_src=twsrc%5Etfw">January 31, 2021</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 僕のツイートにしてはすごく反応がよかったので、今回は簡単にできる Web サイトの高速化方法について解説していきたいと思います。 <h2 id="hcbc516d54e">なぜ Web サイトを早くする必要があるのか</h2> この記事を読んでいる方の中には「なぜ Web サイトを早くする必要があるのか分からない」と言う方もいるかもしれません。 そこでまずは Web サイトを高速化することでどのようなメリットがあるのか、ざっと見ていきましょう。 主なメリットは以下の通りです。 <ul><li>速度が速いサイトの方が Google からの評価が高く、検索順位が上がりやすいので結果的にアクセスが向上する</li><li>速度が速いサイトの方がユーザーにとっても使いやすく、ストレスが小さくなる</li></ul> この 2 つはそのサイトの売り上げにも関わるので絶対に意識しなければいけません。 <h2 id="hf609d25d3f">高速化するには</h2> ここからは具体的な方法について見ていきます。 <ul><li>画像の最適化</li><li>async・defer 属性の付与</li><li>CSS のセレクタの簡素化</li></ul> 順番に見ていきましょう <h3 id="hec9854f699">画像の最適化</h3> まずは画像の最適化です。 画像はサイトの中で 1 番重い要素なので、1 番最初に手を付けなければいけないところだと思います。 画像の最適化にはいくつかやるべきことがあります。具体的にはリサイズ、圧縮などがありますが、個人的に 1 番簡単で、効果があったのは 画像のフォーマットの変更です。詳しい解説が知りたい方は<a href="https://www.itra.co.jp/webmedia/image-fomat.html" target="_blank" rel="noopener noreferrer">こちら</a>が参考になったのでこの記事を読んだ後に見ていただけたらと思います。 PNG や JPG から、WebP, SVG に変更するだけで大きく変わります。WebP とは、Google が開発した次世代画像フォーマットのことです。web に最適化されているらしく jpg や png よりも軽いので、サイトスピードの改善に繋がりました。 実際にやってみたところ、元の画像のサイズが 64KB だったのに対し、5KB まで軽くなりました。 また、SVG はベクター画像という種類の画像で、他のフォーマットの画像がピクセルという色情報がついた点の集まりで構成されているのに対し、SVG は画像の直線や曲線を数式で表したもので、容量が小さいのでシンプルなロゴやアイコンなどに使用すると効果的だと思います。 <h3 id="hc2b13644ea">async・defer 属性の付与</h3> こちらはscriptタグにasync・defer属性を付与することによって、JavaScriptファイルを非同期で読み込むことにより、HTMLのレンダリングをストップすることなくJavaScriptのダウンロードを行うことができます。 また2つの違いはJavaScriptを実行するタイミングです。deferは、HTMLの解析が終わるまでJavaScriptを実行しないのに対して、asyncは、JavaScriptのダウンロードが終わり次第JavaScriptを実行し、その間はHTML解析が止まります。 なので基本的にはdeferを使い、SNSのページプラグインのような他のファイルと独立したプログラムを実行する際にasyncを使用してみるのがいいと思います。 CSS のセレクタの簡素化 こちらは小さな変化ですが、簡単にできることなので入れさせて頂きました。 CSS のセレクタの簡素化と言われると難しそうに聞こえるかもしれませんが、つまりparents &gt; .son のように書かずに、極力 .son で完結させるということです。理由はブラウザがCSSを解析する際に、セレクタを右から左に調べていくので、セレクタが多ければ多いほど時間がかかってしまう、という問題があるためです。 まとめ 重要でいうと上から順に、<ol><li>画像の最適化</li><li>async・defer 属性の付与</li><li>CSS のセレクタの簡素化</li></ol> かなと思います。 他にもJavaScript内でDOMへのアクセスは何度も行わずに、あらかじめ変数に格納しておくことやローディング画面を用意することで体感的な待ち時間を減らすなど、たくさんの方法があります。しかし、今回解説したことを努力したとしても0.1秒以下しか変わらないなんてこともあるでしょう。 サイトの表示高速化はこうした地道な小さな積み上げをしていくしかないので、頑張っていきましょう！！

簡単にできるWebサイトの高速化方法3選

Next.js で頑張って JAMStack ブログを作ってみました。 使った技術としては <ul><li>React Hooks</li><li>Next.js</li></ul> デプロイ先は Vercel で、Google Analytics も導入してみました。 ここからは作る際に参考にしたサイトや、詰まったところ、工夫したところをつらつら書いていきたいなと思います！！ <h2 id="h88319c965e">実際に作ってみる</h2> まず作る際に参考にしたサイトは<a href="https://gotohayato.com/content/517/" target="_blank" rel="noopener noreferrer">こちら</a>です。 「HTML &#x2F; CSS &#x2F; JavaScript &#x2F; Node &#x2F; React をある程度知っていて Git が使える方」を想定しているようなので、ある程度の知識を持っている方は是非やってみて下さい。 <h3 id="h4d50e8632f">Next.jsとは</h3> Next.jsとは、面倒な設定なしで高いDXとUXを提供することができるReactのフレームワークです。 具体的に言うと - パフォーマンスとSEOのためにSSGやSSRをすることができる。 - webpackやBabelの設定を自動で行ってくれる。 - 直感的なファイルベースのルーティングシステム - 画像を自動で最適化してくれるImageコンポーネント など。控えめに言って、最高です。 <h3 id="hb451bd3cc0">ブログを作る手順</h3> <ol><li>プロジェクトの作成</li><li>ページの作成</li><li>デプロイの準備</li><li>デプロイ</li></ol> プロジェクトの作成に関しては<a href="https://nextjs.org/learn/basics/create-nextjs-app/setup" target="_blank" rel="noopener noreferrer">公式チュートリアル</a>を参考にするのが1番手っ取り早いと思います。 ページの作成に関しては、僕には説明できるほどの知識はまだないので、先ほど1番最初に紹介したサイトを参考にしながら自分好みにスタイリングしながら楽しんでみて下さい。 デプロイに関しても同様に2つのサイトを見ながらやってみて下さい。ただ注意点として、公式チュートリアルのままデプロイするとページの言語がデフォルトの英語に設定されてしまっているので、Google翻訳がでしゃばって変なことになったりもするので、_document.jsファイルを作成して、設定を上書きして下さい。この作業も最初に紹介したサイトに詳しい方法は書いてあります。 <h3 id="h9f8666f99b">詰まったところ</h3> カテゴリー別投稿機能を作成したところ、参考にしていたサイトの通りに作っただけだと、全記事一覧ページにカテゴリー別の投稿が反映されない問題が発生しました。 そこでスプレッド構文を使ってカテゴリー別でとってきた記事の情報が入った配列を一つに結合させ、それを表示する。と言う手法で解決しました。 <h3 id="haea4d9d069">工夫したところ</h3> 少しでもサイトの表示速度を上げるために画像のフォーマットをjpegからWebPに変え、Imageコンポーネントを使用することで、<a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="noopener noreferrer">PageSpeed Insights</a>での点数を大きくあげることに成功しました。 WebPとは、Googleが開発した次世代画像フォーマットのことです。webに最適化されているらしくjpgやpngよりも軽いので、サイトスピードの改善に繋がりました。 実際にやってみたところ、元の画像のサイズが64KBだったのに対し、5KBまで軽くなりました。 サイト速度の向上を目指すのであれば、絶対にやっておくべきだと思います。 <h2 id="h50684f1f4b">改善したいこと</h2>現状lifeカテゴリーだけ挙動がおかしいところがあるので、直していきたいです。 あとは今のところスタイリングが適当で、見づらいところがあるなーと個人的に思うのでそこもボチボチ改善していきたいですね。 <h2 id="h8d78e14043">感想</h2> やってみた感想としては、慣れれば WordPress でサイトを作るより 圧倒的に楽ができるなと感じました。 プログラミング学習を始めてからずっと JavaScript メインに勉強してきたので、WordPress 化するために慣れない PHP を書くよりも JavaScript メインで開発できてとても楽しかったです！！ 記事の更新もマークダウンで出来るので、結構楽だなと思います。 サーバのことを気にせずに脳死で高速なサイトを作れますし、ある程度Reactの学習をした方などにはぜひ一度やってみて欲しいです！ 正直おバカ高校生にもできたので、真面目に勉強している方なら簡単だと思います。 それでは頑張ってみて下さい！！ここまで読んでくださり、ありがとうございました！！！

しょうBlog

microCMSを使ってみた感想

簡単にできるWebサイトの高速化方法3選

Next.jsでブログを作りました