<h1 id="h8d027c8ed3">はじめに</h1><p>こんにちは！小瀧です！<br>今回は、このブログサイトについての紹介したいと思います。<br></p><h1 id="h2ba26af815">以前までのこのサイト</h1><p>このサイトは以前まで、私が所属している大学の、教養ゼミの企画で作成したホームページサイトでした。<br>2ヶ月間にわたるサイト作成、ゼミでの成果発表を終えて、このサイトでの情報発信が行われなくなってしまいました。<br><br>そんな中、新たな用途でこのサイトを用いることはできないかということを考えました。<br></p><h1 id="hc0a6ed6520">これから・・・</h1><p>そこで、プログラミングに関する知識や学習した内容のアウトプットとして、このサイトを活用すること決めました。<br>現在、これまで作成していたホームページからこの技術ブログにリプレイスを完了しました。<br><br>運営は私、小瀧のみで、更新も不定期ではありますが発信を続けていきたいと思います！<br>発信は以下のような目的で行います！<br></p><ul><li>自身のプログラミング学習及び個人開発サービスのアウトプットを行うこと</li><li>オリジナルのブログを作成し、サイトの運用を通して、運用方法や SEO の学習を行うこと</li></ul><p><br></p><h1 id="hd207e9f194">新たな技術構成</h1><p>続いて、今回のリプレイスにあたっての新たな技術構成についてご紹介します！<br>以前の教養ゼミHPでは、以下の技術構成でした。<br><br><img src="https://images.microcms-assets.io/assets/d685999673e543289bbdef0438c1a98b/6191342da9f44954ba3431375a785886/%E8%90%B1%E6%B4%A5%E3%82%BC%E3%83%9FHP%E3%81%AE%E6%8A%80%E8%A1%93%E6%A7%8B%E6%88%90.png" alt=""><br><br>今回のリプレイスでは、Node.jsのファイルシステムに代わって、HeadlessCMSである<strong>microCMS</strong>を採用しました！<br><br><strong>microCMS</strong>は、APIを用いてコンテンツ配信を行うことができる日本製のHeadless CMSです。<br>JavaScriptをはじめとした多くの言語、フレームワークに対応しており、SDKも用意されているので、気軽に導入することができます！<br>また、管理画面も非常に使いやすいうえ、多くのWebhookに接続可能で、コンテンツの追加や更新時に自動でビルドとデプロイを行うといった設定も、Webhookを介して簡単に設定できます！<br><br>そして、一貫性を持ったソースコードにするため、コードのリンターとフォーマッターとして、<strong>ESlint</strong>と<strong>Prettier</strong>を新たに導入しました！<br><br>最終的に、現在の技術構成は以下のようになっています。<br><br><img src="https://images.microcms-assets.io/assets/d685999673e543289bbdef0438c1a98b/ba3dabdd0d36419e82fa6c852de4ef03/%E3%83%AA%E3%83%97%E3%83%AC%E3%82%A4%E3%82%B9%E5%BE%8C%E3%81%AE%E6%8A%80%E8%A1%93%E6%A7%8B%E6%88%90.png" alt=""><br></p><h1 id="ha06ac1d26e">発信内容</h1><p>このサイトでは、これから以下のような内容の記事を発信していく予定です！！<br></p><ul><li>個人開発サービスの作成にあたって実装が困難な機能やつまずいた箇所のアウトプット</li><li>個人開発サービス作成で利用した便利なライブラリやツールの紹介</li><li>VScode や Git などの開発用ツールの Tips</li><li>プロダクト設計の手法やデザインの Tips</li></ul><p><br>発信内容は現役エンジニアの方からすると、かなり初歩的な内容かもしれませんが、ぜひ温かい目で見守ってくださると幸いです！<br><br>また、内容に間違いなどがありましたら即時訂正させていただきますので、以下連絡先までご連絡いただければと思います。<br></p><h1 id="h782da2b546">今後の開発について</h1><p>今後、以下の機能を実装予定です！<br></p><ul><li>SNS シェア機能</li><li>検索機能</li><li>ページネーション</li><li>PWA 化</li><li>SEO の強化</li></ul><p><br>特にWebサイトをモバイルアプリのように利用することができる<strong>PWA化</strong>には、私自身非常に興味があるので、早めに実装を行いたいいと思います。<br>またその際、PWA化の方法に関しても記事にしたいと思います！<br></p><h1 id="h9be0c3393d">おわりに</h1><p>今回は、このブログサイトのこれまでと、これからの目的や発信内容についてご紹介しました！<br>不定期ではありますが、これからも随時更新していきますのでぜひご覧ください！<br><br>最後まで読んでいただき、ありがとうございました🙇‍♂️</p>

このブログについて

<h1 id="h93fb57b9b2">始めに</h1><p>こんにちは！！グローバル教養ゼミ、萱津ゼミ 1 期生の小瀧です！<br><br>今回は、このサイトを作成するにあたり、使用したプログラミング言語や設計の考え方、各種ツールなどについて紹介したいと思います。<br><br><strong style="color:#1d2f5f">（プログラミングなどに特に興味がない方にとっては、退屈な内容かと思いますので、読み飛ばしてしまってください 🙇‍♂️）</strong><br></p><h1 id="h23061a5cab">技術構成</h1><p>まず、サイトで用いている使用技術について紹介します。<br>このサイトは、以下の技術構成を採用して作成しています。<br></p><h2 id="hb570a6676d"><strong style="color:#1d2f5f">デザイン</strong></h2><ul><li>Figma</li></ul><h2 id="h5dc0967264"><strong style="color:#1d2f5f">フロントエンド</strong></h2><ul><li>React/Next.js/Typescript</li></ul><h2 id="ha2cc149486"><strong style="color:#1d2f5f">バックエンド</strong></h2><ul><li>Node.js(ファイルシステム)</li></ul><h2 id="hcc1af24286"><strong style="color:#1d2f5f">スタイリング</strong></h2><ul><li>CSS Modules(Scss)</li></ul><h2 id="h7934bd038c"><strong style="color:#1d2f5f">ホスティング</strong></h2><ul><li>Vercel</li></ul><p><a href="https://github.com/soichiro-kotaki/kayatsu-seminar-blog" target="_blank" rel="noopener noreferrer">ソースコード・リポジトリはこちら</a> <br><span style="color:#333333">React のフレームワークである Next.js を採用することで、静的な HTML のプリレンダリングを簡単に実装でき、</span>UI の表示速度及びサイト訪問者の体験を向上しています。<br><br>また、Next.js の機能のひとつであるLink コンポーネントを用いたファイルルーティングを実装することで、高速なページ遷移を実現することができています。<br></p><h1 id="h7337159a51">コンポーネント設計</h1><p>上記の通り React を用いており、コンポーネント設計において以下の方針を取っています。<br></p><h2 id="h0a1de854d8"><strong>Atomic Design</strong></h2><p>React のメジャーなコンポーネント設計思想であるAtomic Design を採用し、各パーツ毎の役割の大きさに基づいた粒度に応じて、atoms、molecules、templates、pages の 4 つに分割しています。（organisms については、高階層化によるディレクトリ構成の複雑化を回避するため、除外しています。）<br><br><a href="https://qiita.com/Keisuke_Tsuji/items/14bcad84bb86cdd622d1" target="_blank" rel="noopener noreferrer">参考にさせていただいた記事</a> <br>この辺りはまだまだ理解が浅く、最適なコンポーネント分割ができていない状態です。今後、さらなる学習を通して改善していきます！<br></p><h1 id="hdebde90f2c">使用したライブラリ</h1><p>今回、便利な React 外部ライブラリを導入し、下記機能を実装しています。<br></p><h2 id="hfd3eddd11e"><strong>モーダル型ハンバーガーメニュー</strong></h2><ul><li>react-modal</li></ul><p><a href="https://tombomemo.com/react-modal-usage/" target="_blank" rel="noopener noreferrer">使用方法に関する記事 </a></p><h2 id="hf06e73fc0b"><strong>ページ最上部に戻るボタン</strong></h2><ul><li>react-scroll</li></ul><p><a href="https://fwywd.com/tech/install-react-scroll" target="_blank" rel="noopener noreferrer">使用方法に関する記事 </a></p><h1 id="h782da2b546">今後の開発について</h1><p>現在、各投稿記事の生成は、<strong>Node.js</strong>によるファイルシステムによって実装していますが、今後 <strong>microCMS</strong> などを用いてリプレイスし <strong>ヘッドレス CMS</strong>化していく予定です。<br><br>また、今後さらなる機能追加に伴って、使用したライブラリやツールなどに関しては随時投稿記事にて紹介していきたいと思います！<br></p><h1 id="h3bcda3e6b0">最後に</h1><p>今回は、このサイトの技術構成について紹介しました！<br><br>ゼミの活動以外にこのような <strong>IT(プログラミングやデザイン)</strong>関係の投稿も、これから行っていきます！<br>そして、次回の投稿では本サイト制作においてデザイン面で考慮したことなどを紹介していきます！<br><br>また、 <strong>お問い合わせフォーム</strong>から質問や投稿に関するリクエストも受け付けておりますので、<strong>プログラミングや IT</strong> もしくは本グローバル教養ゼミに興味がある方は、ぜひご連絡ください！<br><br>最後まで読んでいただき、ありがとうございました 🙇‍♂️<br></p>

KOTABLOG ~大学生の技術ブログ~

『プログラミング』の記事一覧

このブログについて

サイトの技術構成