初めてReactでポートフォリオサイト作ってみた

こんにちはKentaroです〜^ ^

今回ReactJSでサイトを作ってみたのでブログに載せておこうと思い、この記事を書いています。

まだ色々してみたいのでtestとつけていますが、一応こちら(Heroku)から見れます。

「ReactJSのことも含め、このポートフォリオサイトを作った経緯や勉強方法、今やっていること・これからやること」を書いていきます。

Reactを勉強してみたい人・僕にちょっと興味がある人・休憩中暇で何もすることがない人は読んでみてくださいww

＊追記

かなり古い記事なので最近やっていることはだいぶ変わっていますww

最近はNuxtJSの案件やGatsbyJSでのサイト制作をしています^ ^

GatsbyJSはReactベースの静的サイトジェネレーターで、一番最近では以下のサイトを作りました

この記事に乗っているreactのポートフォリオとはかけ離れていますが、みてみてください^ ^

個人的に、Reactの基本を勉強したらNextJSやGatsbyJSを触ってみるのが良いと思っています。

VueかReactの論争がありますが、まぁ自分が好きな方をやれば良いと思いますw

ReactJSをやってみようと思った経緯

まず以下の記事を見てJavaScriptを勉強し直そうと思いました。＊元々苦手意識があったので
また、自分が知らないことが多くてやべ〜って思ったので、この記事をみてから毎日、コード書くかWeb系の記事を読むかPodcastを聞くようにしています。

そして、記事内の学習リソースを色々とつまみながらJavaScriptの復習をしていきました。

やっていく中で覚えていなかったことや、知らなかったことに色々気付けました。

やったレッスンは以下

どちらも英語のレッスンですがJavaScriptの基礎の復習にもなり、ES6の記法も学べます。
しかも無料なので英語できる人にはオススメですね
動画の速さを1.5倍速、2倍速でやるとすぐ終わります^ ^

そして、上の記事に書いてあったReactJSに興味が出てきました。
いろんな記事を読み漁り、Angular, Vue, React・・・どれしようか迷ってましたが、結局Reactにしました。

読んだ記事は以下

選んだ理由は、Job Opportunityと「なんかカッコええ」という理由、、、だけではなく、ロンドン出身のフルスタックエンジニアの友人に「Reactイイヨイイヨ〜〜、10 times better than jQuery」とゴリ押しされたのでReactにしましたww

Reactの勉強方法

まだ勉強始めて2ヶ月くらいしか経っていないし、仕事があるので丸一日勉強はほとんどできていません。。。
ベーシックインカムがあればずっと引きこもって勉強・制作するのに〜笑

使った(使っている)学習リソースは以下

Codecademy

HTML/CSS, JavaScriptなど色々なプログラミングのレッスンが受けられます。
無料で結構色々学べます。

Reactをたまたま見つけたのでやってみました。
無料だったので主にReactの説明や基本的な内容をやっていく感じでしたね。

YouTube

やっぱり動画のレッスンがわかりやすいですし、YouTubeにはめちゃめちゃレッスン動画が上がっています。

英語で検索すると半端ない量が出てきます。
もちろん無料なので最高ですね。

やった動画レッスンは以下

この動画ではTodoリストを作りました。

動画によってはReactやライブラリのバージョンが古かったりするのでたまにエラーが出たりすることもありましたが、そこはググりまくれば答えはあるので大丈夫でした。

次にこの動画

この動画ではReact Routerを使って複数ページのサイトを作りました。
「pathが〇〇の時は□□のコンポーネントをレンダーする」的なことをしました。
それと同時に、GulpとSCSSを動画内で使っていたのでその辺の復習にもなりました。

ここで「Reactでサイト作ってみたいのぉ」と思い始める

次にこの動画

この動画はReactでポートフォリオサイトを作ってみよ〜ってやつです。

いろんなライブラリをインストールしたりconfigファイルをいじったりしましたが、バージョンのせいかどうしても動かないことが何度かありました。

react-hot-loaderはなんとか動きましたが、動画作成者のお手製のreally-smooth-scrollはモバイル対応しておらず、react-zoomyはエラーがずっと出ていてこれもお手製だったのでググっても解決策が全然出てこなかったのでいくつかのライブラリは使えませんでした。

でもこのチュートリアル動画でスタートからGithubページへデプロイまでできるので面白かったですね

また、いろんなライブラリを使うのでその辺の勉強にもなります
＊お手製のものが多かった印象ww

こんなん作りました

デカプリオが讃えてくれます。

ちょっとしたパララックス画像もデカプリオです。

動画上の再生ボタンもホバーでいい感じに表示します。
動画で解説されている方法ではうまくいかなかったので少し自分流でいじってます。
＊gifアニメはGIPHYから

YouTubeは英語で検索するといっぱい出てきますが、英語にクセが強い人が結構いるのでわかりにくい時もあります
＊個人的にはインド系がちょっと難しいですね。後日本人もww

上で紹介した動画は綺麗な英語なので聞き取りやすいです
最後の動画の人はちょっとクセがありますが、アジア人にはわかりやすいクセかと個人的に感じました

Udemy

ちょうどバレンタインの時期だったのですが、僕にバレンタインにチョコレートをくれる人なんていなかったので自分へのプレゼントでThe Complete React Web Developer Course(with Redux)を買ってあげましたww

Reactの基本からES6, Git, Express, Heroku, Webpack, Firebase…などなど勉強する範囲と量がクソクソ多いのでなかなか終わりません。

189レッスンありますww
＊1つの動画は約5~20分

160レッスンくらい終わりましたが、勉強すること多すぎて頭がパンク状態です。。。

最初の方にやったこととかあんま覚えていないというww

いつでも見直せるし、アップデートがあれば動画を更新してくれるので、1回やって終わりではなく、気になるところを何度も見直していけばいいのかな

セクション毎に分かれているので参照・復習しやすいし

とりあえず最初は知らないことが多すぎて、ググっても知らない単語が出てきてその単語の意味をまたググるみたいな状態に何度もなりましたww

しかも英語なのでちょっとだるいww

まぁ知らないことがあってもググればいいし、ずっと知らないままにしなければオッケーかな

んで何故ポートフォリオサイトを作ったのか？

これは性格の問題かもですが、ただ単に勉強しているだけだと飽きてしまうからです。

アプリも何か作ってみたかったのですが、YouTubeのReactポートフォリオサイトの動画をみてからポートフォリオサイト作ってみたかったので作りました。

上にも記載しましが、一応こちらから(Heoroku)見れます〜

アプリっぽいUIにしてみたかったのでスマホでは下にメニューを固定しています。

PCは、、、適当ですwww

使った言語とかライブラリは以下

React / SCSS / Webpack / Git / Heroku / Express / react-router / react-spinner...etc

PC時のナビメニューをスクロール時にfixedにしたかったので後から無理やりvanilla jsを追加していますww(ここでvanilla使うんか〜い笑)

まだ色々いじってる途中ですし、練習用なのでこれから変更が加わるかもですし、もしかすると消すかもしれませんm(_ _)m

今やっていること

今はクライアントワークしながら先ほどのJavaScript30のWes Bosさんのレッスンをしています

とりあえずCSS GridとFlexBoxをやってみました。
わかりやすいし、なんとこの2つとJavaScript30は無料です(^ ^)/

あと、Wesさんはいつも楽しそうにコーディング書いているので、こっちも楽しくなりますww

Wes BosさんとLevel Up TutsのScott TolinskiさんのSyntaxというPodcastも聞いています

プログラミングに関する話が色々聞けますよ〜

これからやること

もちろんクライアントワークをやりながら勉強を続けまする

VueJSも少し触りましたが、Reactよりコード綺麗でこっちの方が向いてそうなので勉強してみようかと思います。

ほんで何か学ぶたびにサイトなりアプリなり作っていこうかなと思っています〜

デザインの勉強もしているので何か作ってアウトプットしないとですね

音楽もやってみたいしやること多いなww

まぁ楽しいからいいか

ブログも更新します！！

福岡にいる人、もしくは来る人は飯にでも行きましょ〜〜〜

非リアなのでどんどんTwitter・Instagramなどで絡んでくださ〜いww

では〜〜

Posted

2018年4月6日

Web

Tags:

プログラミング, 備忘録