大学生がReactで1日でポートフォリオを作った話

大学生がReactで1日でポートフォリオを作った話:

前置き

最近、Reactを勉強する機会があったのでReactをなんとなく勉強していたのですが、ちょうどフロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話がバズっていたので、僕も便乗してReactでポートフォリオを作ってみました。

完成品

Akatsuki Portfolio

PC版

スマホ・タブレットサイズ

開発環境

Windows 10 Home

使用したもの

• React
• Bootstrap
• Github Pages
• react-gh-pages

きっかけ

今まで生のJavascriptやjQueryを使ったクライアントサイド制作の経験はいくらかありましたが、最近流行りのSPAを作ったことがなかったので、Reactの勉強もかねてSPAのwebサイトを作りたいとは考えていました。

そのときにちょうど、ポートフォリオを作ったQiita記事を見て、これくらいならすぐ作れるしReactの勉強にもちょうどいいなと考えて作ってみようと思いました。

「1日で」とタイトルに書いていますが、実際にはデプロイでもたついてた時間も含めて6時間くらいでできました。

デザイン

デザインは、ゲームが好きなのでゲーミングPCっぽいデザインにしてみました。

具体的には

style.css

/* 赤色に光る部分 */ 
.red { 
  color:#FE2E2E; 
  background-color: black; 
  text-shadow: 0 0 25px #FA5858, 0 0 20px #FA5858, 0 0 0.40px #FA5858; 
  border: solid #FE2E2E; 
  box-shadow: 0 0 20px #FA5858, 0 0 15px #FA5858, 0 0 0.35px #FA5858; 
} 

のようにして赤色を発行しているようなデザインを作りました。

デプロイ

今回はフロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話と同様にGitHub Pages上にデプロイすることにしました。

GitHubは普段から使っていますがこんなサービスがあったなんて知りませんでした。GitHubすごい。

デプロイする際には、react-gh-pagesを使ってデプロイしました。

ブランチ関連のところで少し手間取りましたが、そこ以外はすんなりできたので安心しました。

感想

今回は、コンポーネント間で値を渡すことはしなかったので、Reactの真価が発揮できたとはいえませんでしたが、それでもいちいちページ遷移を行わなくていいSPAの快適さと、UIをコンポーネント単位で管理することによる構造把握のしやすさには感動しました。

まとめ

僕はフロント未学習でもなんでもないですが、モダンなフレームワークであるReactを使ってSPAなポートフォリオを作った記事を書いてみました。

自分の作ったWebサイトがページ遷移しないだけでこんなに感動するとは思いませんでした。。。