就活用にポートフォリオを作った話

2020/08/26
「第22回ゆるはち.it ポートフォリオ作りについてゆるく話す」での登壇資料です。
ポートフォリオのつくりかたを実際の流れに沿って説明し、どのようなメリットがあったかについて話しました。

ゆるはち.it
https://yuruhachi-it.connpass.com/

Transcript

1. ゆるはち.lt #22 ポートフォリオづくりについてゆるく話す 就活用にポートフォリオを作った話 @sho0126hiro, 2020.08.22
2. 自己紹介 廣瀬 翔 (Sho Hirose) 国立東京高専 機械情報システム工学専攻 1年 研究内容: 機械学習（深層強化学習）の応用研究 趣味: カメラ / 自転車 好きな言語: Kotlin / TypeScript / Python @sho0126hiro @sho0126hiro sho0126hiro.github.io (portfolio) sho0126hiro.hatenablog.com
3. 作ったサイト: https://sho0126hiro.github.io 開発期間: 10日程度 Mobile Tablet PC レスポンス対応済
4. ポートフォリオ作成の流れ 1. 目的・コンセプトを決める 2. 重視するポイントを決める 3. 技術選定 4. デザイン（完成イメージを考える） 5. 開発 6. リリース・運用など 作ったサイト: https://sho0126hiro.github.io
5. 1. 目的・コンセプトを決める 目的 無料 短期間 好きなように開発 コンテンツを決める際に需要 サイトづくり全体の 統一感向上のために重要 コンセプト 就職活動用 作ったサイト: https://sho0126hiro.github.io
6. 2. 重視するポイントを決める 就職活動用 - 自分の過去の開発経験 - 研究業績 学生時代にやったこと - 自分のスキル - 学歴 - 連絡先など 作ったサイト: https://sho0126hiro.github.io
7. 3. 技術選定 React App Github Pages Tailwind CSS Travis CI Google App Script Hosting CI メール送信 Http Request メール送信用API 無料・短期間・好きなように 作ったサイト: https://sho0126hiro.github.io
8. 4. デザイン（完成イメージ）を考える URL構造の設計 / /about /works /research /links /contact Home プロフィール 過去に開発したもの 研究業績 各種リンク お問い合わせ 画面レイアウト（ざっくり） サイトを見る人の気持ちになる デザインに理由をつける 作ったサイト: https://sho0126hiro.github.io
9. 4. デザイン（完成イメージ）を考える Works page 過去の開発作品まとめ 作ったサイト: https://sho0126hiro.github.io
10. 4. デザイン（完成イメージ）を考える カード表示 一度にたくさん表示したい それぞれ詳しくも見れる
11. 4. デザイン（完成イメージ）を考える でも、ぱっと見でわかりやすく カード表示
12. 4. デザイン（完成イメージ）を考える さらなる詳細はブログへ カード表示 Git レポジトリにも飛べる
13. 4. デザイン（完成イメージ）を考える Research page 研究業績
14. 4. デザイン（完成イメージ）を考える どのくらい論文を書いているか どのくらい発表しているか 単純に箇条書き
15. 3. 技術選定 React App Github Pages Tailwind CSS Travis CI Google App Script Hosting CI メール送信 Http Request メール送信用API 無料・短期間・好きなように
16. 5. 開発 Github Pages: 無料のホスティングサービス User Page Project Page username.github.io username.github.io/project-name 任意 master username.github.io master, Masterのdocsディレクトリ gh-page 生成される URL リポジトリ名 ブランチ名
17. 5. 開発 Github Pages + ReactJS gh-pagesがしていること gh-pages パッケージが必要 $ npm install gh-pages （インストール） $ gh-pages –b master –d build （masterブランチに出力 → 公開） Github Pagesは静的サイト専用のため ReactのコードはそのままではGithub Pagesで見れない → ビルドして生成した静的ファイルをデプロイ
18. 5. 開発 Github Pages + React Router username.github.io/hoge: Project Pageと判定される /work, /researchなどに直接アクセス → 404 Not Found React Router UIとURLを同期させるライブラリ SPAの場合はこれがないと複数ページに分けれない
19. 5. 開発 1. username.github.io/hoge にアクセス 2. 404.html（自作） 3. username.github.io/?redirect=hoge URLにパラメータを付与してジャンプ（redirect=hoge） 4. username.github.io/hoge ReactRouterが動いていない ReactRouterが動いて /hogeに飛ばす .github.io/works .github.io/404.html .github.io/?redirect=works .github.io/works パラメータが付与されたURL
20. 5. 開発
21. Google App Script 5. 開発
22. Google App Script でAPIを立てる 5. 開発
23. ポートフォリオを作ってみて 初対面の人との話のネタになる 履歴書・エントリーシートを書くのが楽 一定の技術力を示せる さらなる開発のモチベーション向上
24. まとめ 1. コンセプト・目的を明確にすること 2. デザインに自分なりに理由をつけること 3. 自分の好きなようにやること 4. ポートフォリオを作ると今後の開発のモチベーションが上がる ポートフォリオに対するこだわりができる 自分のHPのデザインを納得いくものに 楽しむこと 表示コンテンツをもっと増やしたくなる