ブログ

Next.js

ゼミ紹介

React

プログラミング

<h1 id="h8d027c8ed3">はじめに</h1><p>こんにちは！Webエンジニアを目指して現在プログラミング学習をしている大学生の小瀧です！<br>今回は、私のプロフィールについてご紹介したいと思います。<br><br>これまでの経験と、今後の目標などについてご紹介できればと思います！<br></p><h1 id="h6db8087c1b">小瀧について</h1><p>まず、簡単な自己紹介をしたいと思います！<br><br>氏名：小瀧 爽一郎<br>年齢：21歳<br>出身：長野県<br>趣味：テニス、サッカー、アニメと映画鑑賞<br>行ってみたい国：ジョージア<br><br>現在、長野県の公立大学3年生で、経営学と組織マネジメントなどを学んでいます！<br><br>また、専門ゼミでは、<strong>産業組織論</strong>やミクロ経済学を中心に研究しています！<br><strong>産業組織論</strong>とは、ミクロ経済学の発展分野のことを指しており、各産業での競争政策や市場の特性を分析する分野です。<br>過去に私が行なった分析では、水道事業における需要に適した価格構成や、SNSプラットフォームなどのデジタルプラットフォームでの競争戦略と競争促進を行うための競争政策などがあります。<br><br>そして、私は将来<strong>ジョージア</strong>に住むことを計画しています！<br><strong>ジョージア</strong>は西アジアに位置する国で、トルコとロシアなどの国々に挟まれた国です。<br>黒海に面したコーカサス山脈の雄大な景色や、歴史的な建造物が数多くあり、死ぬまでに一度は見に行きたいです！！<br>ちなみに、上の画像は<strong>ジョージア</strong>の首都であるトビリシの夜景です！めちゃくちゃ綺麗😆<br>いつか必ず移住します・・・<br></p><h1 id="hfbf2743935">目標</h1><p><strong>Webエンジニアとして、社会課題を解決できるサービスを提供すること</strong>が、私の目標です！！！<br><br>文系から独学でプログラミングを始めましたが、学習開始から1年以上経った今でも、理解できないことが山ほど出てきます😭<br>しかし、諦めずに学習を続けいく中で、断片的だった知識がひとつの線として繋がり、理解できるようになってきました！<br><br>恐らく、エンジニアとして働くのであれば、技術の学習は生涯に渡って行なっていくことになると思いますが、学習自体を楽しみながらできているので、私自身辛くはありません。<br><br>これからも、学習や個人サービスの開発などを通して、プログラミングへの理解を深めていきます！！<br><br></p><h1 id="h9be0c3393d">おわりに</h1><p>今回は、私のプロフィールについてご紹介しました！！<br><br>まずは、Webエンジニアとして就職し、企業とサービス利用者により大きな価値を提供できるよう、修行を続けていきたいと思います！<br><br>最後までお読みいただき、ありがとうございました🙇‍♂️</p>

プロフィール紹介

<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>

サイトの技術構成

<h1 id="h93fb57b9b2">始めに</h1><p>こんにちは！！グローバル教養ゼミ、萱津ゼミ 1 期生の小瀧です！<br><br>今回は初投稿ということで、<strong>グローバル教養 萱津ゼミ</strong>について紹介したいと思います。<br></p><h1 id="h60dee7de75">グローバル教養ゼミとは</h1><p>グローバル教養ゼミとは、専門ゼミとは異なる、長野県立大学が独自で設けている<strong>第2のゼミ</strong>です。<br>私が所属している萱津ゼミの他にもいくつかの教養ゼミがあり、各ゼミで学べること、取り組めることは、大きく異なります。<br><br>基本的には<strong>自由</strong>に活動できるので、ゼミ生それぞれがやりたいことをテーマに楽しく学ぶことができると思います！<br></p><h1 id="h0364f1cc41">活動内容</h1><p>グローバル教養ゼミについて知って頂いたところで、次は私が所属している萱津ゼミの活動内容について紹介したいと思います！<br><br>萱津ゼミでは、<strong>「情報」と「教育」</strong>をゼミ全体のテーマとしてそれぞれの興味・関心のある分野について調査したり、実際の活動を通してその分野を学びを深める、といったことを行なっています。<br><br>具体的に各ゼミ生が取り組んでいるテーマには、<strong>「ブロックチェーンの活用」</strong>や、<strong>「学びの楽しさ（UXの向上）」</strong>などがあります。<br><br>それぞれ、興味・関心のあるテーマを選んでいるので、積極的にコミュニケーションをとりながら活動しています！<br></p><h1 id="h8dfb47f047">ゼミのメンバー</h1><p>本ゼミは、長野県立大学の<strong> 1期生（4年生)1名、2期生(3年生）5名、そして萱津教授の計7名</strong>で活動しています。現在、<strong>絶賛ゼミ生募集中</strong>です！！<br></p><h1 id="h117e40d07c">今後の活動予定</h1><p>現在、2 つのチームに分かれ、それぞれの考えやアイディアをもとにプロジェクトを立ち上げ、活動しています。今後は、それぞれのチームの活動をゼミで共有した後、そこからさらに大きなひとつのテーマを定めて、活動していく予定です！<br></p><h1 id="h3bcda3e6b0">最後に</h1><p>今回は、第 1 回目の投稿ということで、このゼミについて紹介させていただきました！<br><br>投稿記事の内容に関しましては変更があり次第随時更新していきますので、興味がある方はぜひまた読んでいただければと思います！<br>次回は、<strong>本グローバル教養ゼミのサイト作成で用いた技術構成</strong>に関して紹介したいと思います。<br><br>最後まで読んでいただき、ありがとうございました 🙇‍♂️<br></p>

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

最新の記事一覧

プロフィール紹介

このブログについて

サイトの技術構成

本ゼミの紹介