フロントエンド何もわからない（その３）
しばらく経つといろいろ忘れますが、覚え直すと少しずつレベルアップしている感じはありますね。 今回は、グリッド上に情報を表示するGUIを作ってみたかったため、8クイーン問題を題材にしました。
WebページはGitHub Pagesを使って公開しています。
コードはこちらです。
Nuxt.jsの利用
Vue.jsというjavascriptのフレームワークに、さらにいろいろ盛り込んだフレームワークがNuxt.jsです。
データを保持するVuexが組み込まれているなどの利点があり、ディレクトリ構成などのお作法を統一する意味でも、Vueを使うなら最初からNuxtにしてしまった方が早いかなと思いました。 シンプルな処理ならNuxtのみで良く、 必要に応じてバックエンドサーバを立てて計算はそこに投げるような構成にすると良いでしょう。
（参考）Nuxt.jsビギナーズガイド https://www.amazon.co.jp/dp/B07J5434JB
Bulmaの利用
Bulmaは、javascriptが組み込まれておらず、比較的シンプルなcssフレームワークです。何もcssフレームワークを入れない場合と比較すると、だいぶ見た目がよくなります。
(Nuxt.jsのデフォルトのインストール方法では最新版が入るとは限らないので、npmで自分で入れる方が良いのかも）
CSS
別に凝ったものを作ろうとしなくても、CSSの理解が必要になるのはやむ無しな感じです。
セレクタ、padding/margin、FlexBoxあたりを理解しておかないと、簡単なものを作るにもググりまくることになります。
（参考）CSS Flexbox エンジニアのためのWebチートシート https://web-cheatsheet.com/css-flexbox
全体のレイアウト
自分なりのやり方で、以下はBulma前提です。
- トップにnavbarクラスを設定
- その下をcontainerクラス->columns-> [column, column] で分け、columnの左側をコントロール、右側を出力画面にする
columnの幅はwidthを指定して固定するのも良いかもしれない - ある領域を列に分割するときには、columnsとcolumnを使う
- ある列の中で縦に並べるときは、普通に要素を置いて行けば良いが、行に要素を詰めてレイアウトを構成するときはlevelとlevel-itemを使うこともできる（cssでFlexBoxの記述をする方法もある）
- 余白が気持ち悪い場合は適宜cssで記述して修正する。
spacing-helpersを使う方法もある https://bulma.io/documentation/helpers/spacing-helpers/
ヴィジュアライズしたい要素のレイアウト
（いくつか方法はあるが）Vueのv-forでdiv要素を生成し、位置はabsoluteで指定するのが簡単
absoluteの子要素のセンタリング
absolute内の要素ではvertical-alignは効かないらしい。FlexBoxを使う方法が良さそう
（参考）テキストの縦方向の中央揃えについて - Qiita
通知
通知機能をつけたい場合、toastrが良さそう
https://github.com/CodeSeven/toastr
マウス、キーボードによる操作
- マウスについては、要素に@clickなどでイベントをセットすることで、クリック操作を捉えることができます。
- キーボードについては、
window.addEventListener('keydown', this.onKeyDown, false)のようにしてキー押下などのイベントを捉えることができます。
GitHub Pagesへの公開
静的なウェブアプリケーションを生成し、gh-pagesブランチに置いておくと、GitHub Pagesに公開されます。レポジトリをPublicにするか課金する必要がありますが、少し設定を修正するだけで割と簡単に公開できました。 ja.nuxtjs.org
