就活の為にポートフォリオサイトを作ったけど載せる程成果物がない件について


## はじめに

コロナウィルスの波に負けず、就活の波もやってきました。せっかくなので自分も最近ハマっているFlutter Webを利用してポートフォリオを作ろうと思いました。しかし、ポートフォリオと言うのは作品を載せる為にあるもの・・・。僕のは自己紹介ページになってしまいました。誰得！:thinking:



今回実装したコードはこちらです。

[My Portfolio](https://upmountains.me/#/)

[GitHub](https://github.com/Javateaboy/my_portfolio)

![スクリーンショット 2020-02-25 22.41.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239325/ebf51ac0-20d2-0663-8b76-8908473e1def.png)




## 要約

* **Flutterはいいぞ**
* 成果物はもっと早めにたくさん作っておこう
* **僕を雇ってくれませんか？**



## 技術の選定

- **Flutter&Dart**

- **GitHub Pages**

  

### できる限り労力をかけたくない・・・

特有のめんどくさがり性です。今からHTMLを書いて・・・それに合わせてCSS書いて・・・と普段からHTML/CSSを書かない私には苦痛でした。そこで何かで簡単に代用できるものを探した結果、ちょうど今ハマっていて、1ヶ月くらい勉強した**Flutter**にWeb開発機能があったので利用することにしました。



### デプロイを簡単に済ませたい・・・

昔GitHub Pageを使ってとっても楽に済んだのと、独自ドメインを設定できた思い出もあったので、私のニーズにマッチしていると思い選定しました。



## Flutterとは？

> **Flutter** (フラッター) は、[Google](https://ja.wikipedia.org/wiki/Google)によって開発された[フリーかつオープンソース](https://ja.wikipedia.org/wiki/FLOSS)の[モバイルアプリケーション](https://ja.wikipedia.org/wiki/モバイルアプリケーション)[フレームワーク](https://ja.wikipedia.org/wiki/アプリケーションフレームワーク)である。Flutterは[Android](https://ja.wikipedia.org/wiki/Android)や[iOS](https://ja.wikipedia.org/wiki/IOS_(アップル))向けの[アプリケーション](https://ja.wikipedia.org/wiki/アプリケーションソフトウェア)の開発に利用されている。
>
> (From Wikipedia)



マテリアルデザインによる美しいUIを利用できるフレームワークです。なのでデザインが全くできない私でも、ある程度見られるレベルのものが簡単に作れてしまいます。独自のWidgetと言う概念に慣れるまで大変ですが、慣れてしまえば、レゴブロックを組み合わせるかのように開発が出来るのでとってもに楽しいです。



### 動作環境

![スクリーンショット 2020-02-25 22.30.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239325/17340ef6-6d99-f659-1ecb-c9e87ffd7f4d.png)


`flutter doctor -v`で一気に出力できます。トラブルシューティングで質問するときに結構便利です。



### セットアップについて

今回はFlutterメインの記事ではないので、もし利用したい場合は[ドキュメント](https://flutter.dev/docs/get-started/install)を参考にしてください。とても丁寧で分かりやすいです。



Web版を利用するにはチャンネルを切り替える必要があります。

``` shell
flutter channel beta
flutter upgrade
flutter config --enable-web
```



これは一例ですが、更に詳しいことが[ドキュメント](https://flutter.dev/docs/get-started/web)に書いてあるのでそちらを参照してください。



### 学習の進め方



これは私の進め方ですが、

1. [公式ドキュメント](https://flutter.dev/docs)に順序立ててチュートリアルがあるのでそちらをこなす。
2. [The Complete 2020 Flutter Development Bootcamp with Dart](https://www.udemy.com/course/flutter-bootcamp-with-dart/)をこなす。（めちゃくちゃ分かりやすい！）
3. 実際に自分でアプリを開発してみる



以上の流れでした。「うわ！英語のサイトばっかじゃん！出た英語ハラスメント！」と思われる方もいると思いますが、大丈夫です。

TOEIC300点台の私ですが、Google翻訳で進められました。Udemyとかだと文字起こしができて、それをGoogle翻訳のページ翻訳で訳してくれるのでノンストレスで学習ができました。ついでにリスニングの勉強にもなったかなぁと思っています。



[Flutterの効率良い学び](https://medium.com/flutter-jp/flutter-learning-c5640c5f05b9)　こちらの記事もオススメです。一読して自分が肌に合う学習の方法を探していきましょう。





## 作成のフローチャート

1. ページレイアウトを考える
2. ハードコーディングしつつ、レイアウトを形を作る
3. ハードコーディングをソフトにしつつ、定数やWidgetは切り分けて行く
4. デプロイする



## プログラムについて



### 構成

````
> tree
.
├── README.md
├── analysis_options.yaml
├── assets
│   ├── FZ.otf
│   ├── SourceSansPro-Regular.ttf
│   ├── images
│   └── works
├── build
├── lib
│   ├── config
│   │   ├── assets.dart
│   │   ├── constants.dart
│   │   └── projects.dart
│   ├── generated_plugin_registrant.dart
│   ├── main.dart
│   ├── models
│   │   └── project_model.dart
│   ├── pages
│   │   └── home_page.dart
│   ├── tabs
│   │   ├── about_tab.dart
│   │   ├── blog_tab.dart
│   │   └── projects_tab.dart
│   └── widgets
│       ├── my_chip.dart
│       ├── project.dart
│       ├── responsive.dart
│       └── wrap_chip_list.dart
├── my_portfolio.iml
├── pubspec.lock
├── pubspec.yaml
└── web
````



**analysis_options.yaml** 静的解析用ファイル。これがあるとダメなコードを怒ってくれる

**assets**  フォントや画像はここのディレクトリに打ち込みます。

**lib** ソースコードは基本的にここに全部入れます。

**config** 定数やリスト、画像のURLなど変更がしやすいようにこのディレクトリにまとめます。

**models** データクラスを定義しているファイルを置きます。

**widgets** 切り分けたWidgetをまとめています。

**pubspec.yaml**　ライブラリの指定等をここで行います。Gemfileみたいな奴です。



### 使用ライブラリ



```yaml
  http: ^0.12.0+4
  animated_text_kit: ^2.0.0
  url_launcher_web: ^0.1.1+1
  url_launcher: ^5.1.4
  pedantic_mono: ^1.8.0
```



[http](https://pub.dev/packages/http) HTTPリクエストを作成するためのライブラリです。現状まだ使用していませんが、API等と通信を行う際に利用します。

[animated_text_kit](https://pub.dev/packages/animated_text_kit) テキストをオシャレな感じにアニメーションを付与してくれます。タイプライターのような演出はこのライブラリを使用しています。

[url_launcher_web](https://pub.dev/packages/url_launcher_web) Flutter for WebでURLを開くにはこちらのライブラリが必要になるそうです。依存関係として下記のライブラリも必要なので忘れずにどっちも追加しましょう。

[url_launcher](https://pub.dev/packages/url_launcher) 上記のライブラリを使う為に入れます。

[pedantic_mono](https://pub.dev/packages/pedantic_mono) analysis_option.yamlの情報を取得します。詳しくはこちらを見てください。[Dart/Flutter の静的解析強化のススメ](https://medium.com/flutter-jp/analysis-b8dbb19d3978)



### メインコードについて

冗長になってしまうので詳しくは[GitHub](https://github.com/Javateaboy/my_portfolio)を参照してください。一応説明として入れると

**main.dart** Flutterを起動すると実行されるファイル。大本です。

**home_page.dart** 起動後に呼び出されるホームとなるページです。このページの中にタブとしてAbout, Blog, Projectを組み込んでいます。

**about_tab.dart, blog_tab.dart, projects_tab.dart** タブごとのページの中身です。ここにゴリゴリにUIを実装していきます。微妙にハードコーティングが残ってるのは許してください。



## ビルドする！



ソースコードを書き終えたら後はビルドするだけです。

``` shell
flutter build web
```



上記のコマンドより、buildディレクトリの中に**Web**ディレクトリが生成されます。それをGitHubにアップロードすることによってGitHubPagesで見ることができるようになります。



[GitHubPagesに独自ドメインを設定するにはこちら](https://takumon.com/2018/09/12/)を参照してください。基本的に

- ドメインを取得する

- 取得したドメインのネームサーバーでGitHubのAレコードを4つ登録する

- 数分待つ

  ことによって正常に独自ドメインを設定できると思います。リンク先はお名前.comですが、ムームードメイン等でも設定できます。調べてみると出てくるでしょう。



## 課題

- パフォーマンスが悪い・・・constで指定してbuildを抑えたり、画像サイズを小さくしたり、工夫はしていますがイマイチ良くなりません。なので今詳しく勉強しているところです。

- Blogを作っていない・・・Blogの実装をかなり迷っています。と言うのもブログが分散しすぎてて一元化できていないからです。飽き性はこれだからダメですね。

- 成果物がない・・・成果物が全くと言っていいほどありません。正直これを作るのも少し躊躇いました。

- 言うほどアピールポイントになっていない・・・現状Flutterを採用している企業も少ないので「ふ〜ん、でも君Railsできないじゃん」って言われてしまいそうです。残念。



## 終わりに

Flutterはめちゃくちゃ楽しいです！レゴブロックしてみたいで本当に面白いです。ぜひ今ポートフォリオサイトを作ろうか迷ってる人はFlutter for Webも選択肢に入れてみてはいかがでしょうか？



## 参考文献



[Flutter for Web : Building a Portfolio Website](https://medium.com/flutter-community/flutter-for-web-building-a-portfolio-website-3e9865710efe)

[Dart/Flutter の静的解析強化のススメ](https://medium.com/flutter-jp/analysis-b8dbb19d3978)

[Build and Deploy a Flutter Web App](https://medium.com/flutter-community/build-and-deploy-a-flutter-web-app-ec217de845cb)

[Flutter Documentation](https://flutter.dev/docs)

[ムームードメインで購入したドメインをGITHUB PAGESに適用する](tech-ek.com/github-pages-muumuu-domain/)

[Flutter From Wikipedia](https://ja.wikipedia.org/wiki/Flutter)

[【参考例あり】高評価を受けるエンジニア未経験者のポートフォリオとは？必要なレベルも公開](https://memorandumrail.com/engineer-portfolio-example/)

[Naoto Suzuki's portfolio](https://nsuzuki7713.github.io/portfolio/)