ナガモト の blog

Full Cycle Developerを目指すエンジニアが有用そうな技術記事や、ポエムのようなよしなしごとを投稿するブログです。

AngularとFlex-LayoutとNES.cssで愉快にポートフォリオ作成

「年もあけたことだし、いい加減ポートフォリオ作ろう!」と思い立ち、ポートフォリオを作成しました。

ngmt83

当記事はポートフォリオ作成の際にどのように技術選定をし、デプロイ環境を整えたかを記します。

技術選定

まず、ポートフォリオをどういった技術を用いて作成するか考えました。大まかな流れは以下の通りです。

  • 要件を決める
  • ボトルネックとなるデザインを支える仕組みを選定する*1
  • 既存知識のものを組み合わせる
  • 不足している箇所を補う仕組みを組み合わせる

要件を決める

ざっくりと要件を下記の通り定めました。

  • 静的サイトで公開する
  • 将来的にはJavaScriptで少しリッチな表現をする
  • お金がかからない構成
  • デザインがイケている(いずれか)
    • 最低限今風のもの
    • ユニークなもの
  • デザイン実装がしんどくない

ボトルネックとなるデザインを支える仕組みを選定する

要件にあった通り、イケてるけれども実装で楽をするためにCSS Frameworkを用いることにしました。 調べた結果、CSS Frameworkの候補を以下のものに絞りました。

  • Bootstrap
  • Bulma
  • Materialize
  • Skeleton

どれでもいいし、どれでもよくないという感想を抱き、決めきれずに数日放置しました。

放置した結果、ファミコンライクな見た目の超coolなFrameworkが最近リリースされていたことを思い出し、使いたいという理由で趣味丸出しにこれに決定しました。 github.com

調べ上げた候補に意味はなかった。(笑

既存知識のものと組み合わせる

「将来的にはJavaScriptで少しリッチな表現をする」という要件からhtmlとcssでミニマムに作成するのではなく、フロントエンドもFrameworkを使用すると決めていました。

React, Vue, Angularなどの選択肢が考えられますが、こだわりはなかったため、もっとも経験が多いAngularを選択しました。

不足している箇所を補う仕組みを組み合わせる

NES.cssを導入したAngularアプリ」までは決まりましたが、それだけでイケてるサイトが作れるのか見直していたところ、READMEに下記の記述を見つけました。

NES.css only provides components. You will need to define your own layout.

NES.cssコンポーネントの提供しかしないので、レイアウトは自分でやってね」(意訳)

NES.css only requires CSS and doesn't depend on any JavaScript.

NES.csscssしかいじってない、非常にシンプルなCSS Frameworkです」(意訳)

作者のダーシノ (@bc_rikko) | Twitterさんから、いただいたコメントが他のFrameworkと比較されていてわかりやすかったです。(ありがてぇ・・・)

とのことで、これは少しデザインの実装を頑張る必要があるのではないか・・・と思い始めました。レイアウトをちゃんとするためにそれを補う仕組みを探します。NES.cssは非常にシンプルなため、他の仕組みと相性を考える必要があまりなさそうな点は幸いでした。

そのため、Angularでよく用いられるものから探し、Flex-Layoutに決定しました。

github.com

また、ホスティングサービスについてはAngularアプリのビルドもできるNetlifyに決定しました。

決定した構成

Flex-LayoutとNES.cssを導入したAngularアプリをGitHub経由でNetlifyでビルド&ホスティングする

という構成に決定しました。

デプロイ環境を整える

Angularを開発するlocal環境は先日投稿した記事のものを使用します。 Angular CLI: 6.2.9 Node: 10.15.0

ngmt83.hatenablog.com

NES.cssの導入

READMEに書いてある通り、npm installします。

$npm install nes.css

そして、angular.jsonに下記の記載を加えれば終わりです。

"styles": [
  "./node_modules/nes.css/scss/nes.scss",

Flex-Layoutの導入

https://github.com/angular/flex-layout/wiki/Using-Angular-CLI#install-flex-layoutの通りにやりましょう。それで完了です。

と言いたいところでしたが、それだけではbuild時にエラーが発生してしまいました。下記issueと同等のものです。

github.com

issueや解決方法が英語でしか見つからなかったので、少し理解に手間取りましたが、下記の通りupdate後にnpm installでbuildできるようになりました。

$ng update @angular/core
$npm install

Netlifyでビルド&ホスティング設定

mrkmyki.com

こちらを参考に設定しました。ほとんど考えることはなく、Publish directoryをtypoしていて小一時間ハマりましたが拍子抜けするほど簡単に設定完了しました。GitHubにpushしたものがデプロイされるのも確認しましょう。

総括・所感

この通り、なんとか公開することができました。

ポートフォリオ作成の感想は、「NES.cssむっちゃ好き!作者様ありがとう!!」です。

最後に

まだまだデザインがイケていなかったり、小さいスマホでは見づらかったり、そもそもポートフォリオとしての中身が不足していたりするので、改善しつつ、学んだことをブログに投稿していきたいと思います。

*1:私のデザイン力が低いため