0から始めるポートフォリオRTA

エンジニアもすなるポートフォリオといふものを私もしてみむとてするなり。

使ったもの

• TypeScript
• React
• Github Pages

要約

過去一度だけJavaScriptの勉強をしようとしたもののドットインストールのレッスンすら完遂できずに諦めた大学生が初見のTypeScriptとReactを使ってポートフォリオを4日間で作った話。日記的なものでコードは出てきません。ご了承ください。
完成品はこちら

経緯

僕は機械学習などの用途でpythonを日常的に使っているのですが、フロントエンドは全く触ったことがなく、HTMLとCSSを少しだけかける程度でした。11月からアルバイトでwebの開発に携わり始め、フロントに手を出すことになりそうだったので前もって少し触ってみようと思い、重い腰を上げて勉強して、ポートフォリオを作ってみました。TypeScriptとReactという組み合わせはバイト先のプロジェクトがこれで始められていたから同じものを使ってみました。

1日目(11/15)

Reactを初めて見る

バイト先で初期化されたReactのプロジェクトを見ました。初めまして、TypeScript。後で調べて分かったのですが

$ create-react-app myapp --typescript

ってすると良い具合にReactプロジェクトの土台を作ってくれるみたいです。とっても簡単ですね。僕も自分で始める時は同じコマンドで初期化しました。
1日目はバイト先のリポジトリから自分用のブランチを切ってチュートリアルその他、Reactを好き勝手にいじって遊んだだけです。
この夜にバイト先が同じ同期のエンジニアの子とご飯に行っていろいろ話した結果、ポートフォリオを作ることを決心しました。

2日目(11/16)

外観を作る

作ると決めたは良いものの、外向けに公開するwebサイトのデザインをしたことがなかったので、とりあえずいろんな人のポートフォリオを覗きに行って自分なりにコンテンツや配置を決めました。バイト先でも使っているFigmaを使ってみました。

配色を決める

色彩感覚も絶望的にないのでKhromaというサイトで大まかな配色を考えてみました。このサイトは無数に生成される色の中から好きなものを50色選ぶと機械学習でその人に合った配色例を提案してくれます。生成されたものからいくつか選んで自分のポートフォリオの配色の参考にしました。

3日目(11/17)

コンポーネントを作る

触り始めたばかりであまり理解していないのですが、チュートリアルやいろいろな記事を読んで、Reactは小さなコンポーネントから大きなコンポーネントを作って行って最終的に１つのwebサイトにまとめるようなイメージで作ると良いのかなと感じました。とりあえずコンポーネントを作ろうということでFigmaで作ったポートフォリオのデザイン案を小さな要素へと自分なりに分割してそれぞれを実装していく作業をしました。Figmaのグループやレイヤーといった要素でグルーピングしてデザインしていたのでそれを参考にコンポーネントの構成を考えました。これはとっても便利だったのでデザイン段階からマテリアルデザイン的なものを意識すると良いのかなと感じました。基本文法すら手探りの状態でコーディングを進めたので結構時間がかかりましたが、詰まったところを調べる中でなんとなく感覚が掴めてきました。コンポーネントの実装と同時進行で合わせてCSSのスタイルも80%くらいの完成度で書いていったのですが、この方法が正しかったのかはよくわかりません。個人的には目で見ながらデザイン素案にどんどん近づいていくのを確認して実装を進められたので精神衛生上良かったと思っています。

4日目(11/18)

コンポーネントの中身を作る

実装すべきコンポーネントをあらかた作り終わったので内容を書き込んでいく作業をしました。この頃にはReactの書き方に結構慣れて開発スピードは結構上がりました。pythonにおいて、定義しておいたクラスのインスタンスを生成してたくさん配置するようなイメージで作業を進めました。合ってるのかはわからないけど。。。こうしてポートフォリオの雛形を作り終えることができました。

デプロイする

今回はGithub Pagesのサービスを使ってデプロイしました。前述の同期エンジニアが書いたこの記事を参考にデプロイ作業をしました。CLIのコマンドでとても簡単に自動デプロイができてすごいと思いました。

デザインの修正をする

こうして一応完成したポートフォリオですが、なんとなく芋っぽい感じがして気に食わなかったのでセンスの良さげな友人にアドバイスをもらいながらデザインを修正しました。無地の背景にピンドットを入れたり見出しにアンダーラインを付けたりしてだいぶ良い感じのデザインにすることができました。

記事を書く

そして現在(11:30)、この記事を書くに至っています。(公開は日付を跨ぎそう、、、)

まとめ

フロントエンドを触ったことがない初心者でも4日間でTypeScriptとReactを使ってそれっぽいポートフォリオを作ることができました。今回はReact-routerで静的なSPAを作ってみましたが、バイトではここにサーバーとの通信やCookieの扱いなども加わってくると思います。最近は主に機械学習系の実装をしていたのですが、今後はこれに加えてフロントエンドの勉強も精進して行こうかなと考えています。

最後に、このポートフォリオのコードとurlを以下に置いておくのでもし良かったら覗いてみてください。初めて触ったのでナンセンスな設計、コーディングが多々みられると思います。気になったところはどんどん指摘していただけると嬉しいです。

それでは！お読みいただき、ありがとうございました！！！

リポジトリ: https://github.com/CastaChick/portfolio
ポートフォリオ: https://castachick.github.io/portfolio/