---
title: 先輩「ちょっと僕のポートフォリオサイト作ってくれない？」
tags: 
author: [asmsuechan](https://www.docswell.com/user/asmsuechan)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/4LE35PZJ5P.jpg?width=480
description: https://yuruhachi-it.connpass.com/event/184538/ で発表したやつ。Docswell使ってみようと思って開発用PC内を探したら見つかった唯一の発表スライドpdfファイル。
published: March 07, 21
canonical: https://www.docswell.com/s/asmsuechan/4ZV1E5-2021-03-07-213837
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/4LE35PZJ5P.jpg)

先輩「ちょっと僕のポートフォリオサイト作ってくれない？」 asmsuechan 1

# Page. 2

![Page Image](https://bcdn.docswell.com/page/V8EDDL4EGD.jpg)

俺「・・・」 2

# Page. 3

![Page Image](https://bcdn.docswell.com/page/4V7PX2VE86.jpg)

先輩「金は出す。」 3

# Page. 4

![Page Image](https://bcdn.docswell.com/page/L2JVLDR7QW.jpg)

俺「任せてください」 4

# Page. 5

![Page Image](https://bcdn.docswell.com/page/Z5EGXY6JLR.jpg)

登場人物 ワイ 先輩 大学院生(修士) 大学院生(博士) 去年ビルディットさんからお仕事貰ってました 大学の先輩ではない。 5

# Page. 6

![Page Image](https://bcdn.docswell.com/page/V4JQ8M27P5.jpg)

案件概要 ちゃんと個人事業者として請けました。 既に元となるHPは存在するリニューアル案件です。 納期は1ヶ月後で稼働は30時間程度。 6

# Page. 7

![Page Image](https://bcdn.docswell.com/page/DK742VPJ1Q.jpg)

出来上がったもの https://hiroki11x.github.io 7

# Page. 8

![Page Image](https://bcdn.docswell.com/page/PLJ1M3XEGD.jpg)

要件 1. HTML直書きで更新が大変だから楽にしたい 2. 英語ページしかないから日本語ページが欲しい 3. レイアウト/スタイル改善 8

# Page. 9

![Page Image](https://bcdn.docswell.com/page/8GJW3PKJ26.jpg)

要件 1. HTML直書きで更新が大変だから楽にしたい 2. 英語ページしかないから日本語ページが欲しい 3. レイアウト/スタイル改善 9

# Page. 10

![Page Image](https://bcdn.docswell.com/page/W4EZVKNJ3Y.jpg)

楽に更新したい HTMLテンプレート用意してそこにYAMLとマークダウン で書いていくと楽かも？ 便利。 10

# Page. 11

![Page Image](https://bcdn.docswell.com/page/KY765Q9EVZ.jpg)

メンテナンサビリティの向上 個人で作ったものってメンテナンスが面倒で打ち捨てられがち 楽に更新し続けるにはメンテナンス性の向上が必須 ここを強く意識した 11

# Page. 12

![Page Image](https://bcdn.docswell.com/page/5G75YRD748.jpg)

メンテナンサビリティの向上 Before After • index.htmlに全てが詰まっていた • React + TypeScript • DOMがjQueryのセレクタで複数JS • 適切なコンポーネント分割 • ライブラリのnpm管理 ファイルからいじいじされる • GitHub Actionsによる自動デプロイ • 使われているかわからないスタイル達 いわゆるレガシーフロントエンド いわゆるモダンフロントエンド 12

# Page. 13

![Page Image](https://bcdn.docswell.com/page/V9J2G4MJRX.jpg)

要件 1. HTML直書きで更新が大変だから楽にしたい 2. 英語ページしかないから日本語ページが欲しい 3. レイアウト/スタイル改善 13

# Page. 14

![Page Image](https://bcdn.docswell.com/page/5DEYVMPEM9.jpg)

日本語ページが欲しい こういうボタンが欲しい Reactのstateで切り替えるお手軽実装でこれを実現 /enとか/jaとかのURLが生える訳ではなくて同一ページ内で描写を切り替える 14

# Page. 15

![Page Image](https://bcdn.docswell.com/page/2VJNMWM78K.jpg)

日本語ページが欲しい ←英語ページ 日本語ページ→ 15

# Page. 16

![Page Image](https://bcdn.docswell.com/page/GYE9NXWE3P.jpg)

要件 1. HTML直書きで更新が大変だから楽にしたい 2. 英語ページしかないから日本語ページが欲しい 3. レイアウト/スタイル改善 16

# Page. 17

![Page Image](https://bcdn.docswell.com/page/5GE8K2R7DR.jpg)

レイアウト/スタイル改善 元々Bootstrapが入っていたのでそのまま利用 Bootstrap久しぶりに触ったけどめちゃくちゃ進化してて驚いた Before After 17

# Page. 18

![Page Image](https://bcdn.docswell.com/page/MLELZ22JR1.jpg)

レイアウト/スタイル改善 なんか新しいカラーテーマいくつか提案してよ 分かりました 18

# Page. 19

![Page Image](https://bcdn.docswell.com/page/54JMV89JW1.jpg)

レイアウト/スタイル改善 デフォルト、ダークモード、女子力、Soralized Light 19

# Page. 20

![Page Image](https://bcdn.docswell.com/page/ZPJR259E9L.jpg)

レイアウト/スタイル改善 マカロン色はお気に召さなかった模様 20

# Page. 21

![Page Image](https://bcdn.docswell.com/page/NPEXDK37XY.jpg)

その他(SEO対策) Google Chromeのlighthouseで計測 OGPやdescriptionの設定 (画像が重くてPerformanceがひっくい) 21

# Page. 22

![Page Image](https://bcdn.docswell.com/page/63EKX5N7DY.jpg)

まとめ 個人で何か作る時はメンテナンス性がとても大事・・・ 特にWebインフラ面 。なるべくメンテナンスレスになるようにしたい。 (自動デプロイ, 静的ページ, Serverless) ポートフォリオ、打ち捨てられないように作っていきましょう 細く長く 22

# Page. 23

![Page Image](https://bcdn.docswell.com/page/4L735KZE5P.jpg)

終 対局ありがとうございました。 23