プログラミングを学習をし始めた方の中には、「基礎の文法は分かったけど、次何すればいいの？」「プロゲートを繰り返しているけどスキルがついた気がしない・・・」「フレームワークを使って何かを作りたい」このような悩みを抱えているかもしれません。
プログラミングは基礎文法だけ学んでもほぼ意味がないですし、今はフレームワークといったものを使って何かを作る、という方法が主流になってきています。なので、基礎を学んだら次のことを学ぶ、フレームワークを使った開発を行うといったステップを踏む必要があります。
Web系の技術は進化がものすごく早いです。フロントエンド技術において、今最も勢いがあるのがReactを発展させたフロントエンドフレームワークであるNext JSです。
Next JSはReactは書き方は共通しているので、Reactから入った方でもすぐになじめると思います。私自身、Reactを勉強している中でNext JSに出会い、勉強をしております。
今回は、Next JSの練習として自分のサイトを作りたいと思い、ポートフォリオサイトを作ってみました。Next JS初学者の方向けのチュートリアルとして、わかりやすく解説していきます。
もし、Next JSを勉強したいという方や、何をすればよいか迷っている方は一度、目を通していただければと思います。
- JavaScriptの基礎を理解している方
- DOMの基礎を理解している方
- フレームワークについて学びたい方
- React＆Nextについて学びたい方
- NextJSでポートフォリオサイトを作ってみたい方
はじめに
わたくしは、Reactを勉強しているさなか、NextJSっていう新しいフレームワークの存在を知り、早速勉強に取り掛かりました。見てみると、NextはReactとほぼ同じ書き方をするということなので、何か作ってみたかったというのと、使い方を確認も兼ねたかったです。
そこで、自己紹介サイトなるものを持っていなかったので、Nextで作ってみようと思ったわけです。また、わたくしは情報系の学生なので、就活にも使えるぞ、と考えたわけです。技術のキャッチアップもやってそれを形にしているわけですからね。
情報系の学生ならば、プラスになると思われます。それに、ウェブサイトとして公開すれば、自分はこういう人間ですってすぐにわかってもらえます。つまりは、デメリットはあまりないわけです。
使用した技術
今回作成するにあたって、下記の技術を採用しました。
- Next JS
- Type Script
- Material-UI
- devicon
- tailwindcss
- postcss
JavaScriptで最初は作成していましたが、近年はTypeScriptが流行りですので、両方作りました。ブログには、せっかくですのでTypeScript版をご紹介いたします。
今回スタイリングには、cssフレームワークのtailwindcssを使用します。一からCSSでスタイリングしても良かったのですが、工数的に難しいと判断してフレームワークを使用しました。感覚としては、Tailwindcssは使いやすかったです。
とてもおすすめのフレームワークです。
ページ構成
ページの構成は通常のWebサイトとしては単純で、Topページを含めて5ページ構成としました。
ページの構成は下記となります。
- Top
- About
- Skills
- Works
- Hobby
Topページはその名の通りです。Aboutページは簡単な経歴を紹介するページになります。Skillsページはどの言語やサービスが使えるのか、紹介するページとなります。Worksは自信が作成した作品・サービスを紹介するページになります。Hobbysは自分の趣味や没頭していることを写真付きで紹介するページになります。
デザイン
デザインは基本的に下の図のように全ページで共通する形を取りました。
ヘッダー・ナビゲーション・フッターを共通する部品で、メインの部分をそれぞれのページに沿った個別のデザインとしました。
もちろん、スマートフォン・タブレットにも対応したレスポンシブデザインとしました。
詳しくは、制作過程を解説している個別記事をご参照ください。
実装解説
実装解説はページごとに記事を分けています。
なるべく早めに更新いたしますので、お待ち下さい。
完成品
今回作成したウェブサイトはVercelにデプロイして公開しています。
参考までに、御覧ください。また、もし評価をいただけたら、ツイッター、Githubのフォローをお願いいたします。
作成したプロジェクトはJS版、TS版の両方があります。Githubのリンクも載せておきます。
