教育部会 担当です。
現在勉強会ではWebアプリ(Vue)について学習をしています。

 

Vueとは？

SPA(シングルページアプリケーション※)を開発することができるJavaScriptのフレームワークです。

※単一のページで構成されるWebアプリケーション

 

第16回からは今までに学習した内容を用いて、自社パッケージソフト(Aceシリーズ)の表示機アプリ開発を行いました。

第16回 コンポーネントライブラリ、CSSフレームワークの導入

 

まず下準備として、コンポーネントライブラリとCSSフレームワークを導入しました。

 

・コンポーネントライブラリの導入と使い方(Vuetify)

　今回は【Vuetify】というコンポーネントライブラリを使用しました。

　Vuetifyはマテリアルデザイン※に基づき設計・開発されたVueのコンポーネントライブラリです。

　※Googleが提唱したデザインで現在主流のデザイン

※補足：デザインの流行について

　【2003～2014】：スキューモフィズム

　【2013～】：フラットデザイン

　【現在の主流】：マテリアルデザイン

　　　　　　　　　└2014年にGoogleが発表した「デザインのガイドライン」。直訳すると「物質デザイン」。

 

・CSSフレームワークの導入(TailwindCSS)

　ユーティリティファーストのCSSフレームワーク【Taillwind CSS】を使用しました。

　ユーティリティ（utility）は「役に立つもの」という意味です。

　ユーティリティファーストな為、コンポーネントUIは提供せず、便利で汎用的なclassを提供します。

 

例えばある要素に外側・内側の余白、背景色を指定する場合は通常、以下のような記述となります。

 

ーーhtmlーーー
<div class=”tailwind-css-unused”>Tailwind CSS 未使用</div>
ーーーーーーー

ーーcssーーーー
.tailwind-css-unused {
margin: 0.5rem;
padding: 0.5rem;
background-color: rgba(219, 234, 254);
}
ーーーーーーー

 

Tailwind CSS を使用すると以下のような記述となります。

ーーhtmlーーー
<div class=”m-2 p-2 bg-blue-100″>Tailwind CSS 使用</div>
ーーーーーーー

 

Tailwind CSS を使用しない場合は、クラスを定義する必要があり、クラス名の名付けコストが掛かります。
また、余白をどれくらい取れば良いか、背景色は何色にするかなどのガイドラインがないためスタイリングに時間が掛かります。

 

Tailwind CSS では余白や背景色を指定する class が予め用意されているため、その中から選択するだけで済みます。
もちろん設定値のカスタマイズも可能です。

 

Tailwind CSS には他に以下のようなメリットがあります。

Tailwind CSS のメリット

* クラスの名付けコストが掛からない
* コードの記述量が減る
* ブラウザ依存を意識しなくて済む
* リファレンスが充実しているため CSS の知見がなくても視覚的にスタイリングが可能
* レスポンシブ対応が容易 など

第16回はSPAにおけるコンポーネントライブラリ、CSSフレームワークについて学習しました。

これらを用いることで、デザインの知見がなくてもWebアプリを効率よく開発できます。

 

第17回表示機アプリ開発

第17回は「Vuetify」と「Tailwind CSS」を利用して、

自社パッケージ（Aceシリーズ）の「番号案内」コンポーネントを開発します。

 

実際の「番号案内」は Windowsアプリですが、
今回は Vue で開発するため Webアプリ（ブラウザ上で動作するアプリ）開発となりました。

 

マルチデバイス（タブレットやスマートフォンなどの利用）対応も考慮し、
従来のWebアプリと比較すると、どういった考慮が必要かという点も学習していきました。

 

今回は `Flexbox` と `Grid Layout` によるレイアウトの組み方と、

画面サイズを基準としたサイズ指定の方法によるマルチデバイス対応方法を学びました。

 

次回の勉強会では、Vuetify を用いて「呼出画面」を開発する予定です。

今後も勉強会での学習内容を発信していきますので、よろしくお願いいたします。