BalmUIを使おうとして挫折した一連の流れ

今日は愚痴りたくなったので愚痴ろうと思います。
最近始めたニュースまとめは今日はネタがないのでお休みします。

何をしようとしたのか

#コンパス履歴書ジェネレーター を完成させてすっかり有頂天になりました。

そんな私は後日GASにチャレンジして、Googleスプレッドシートと連動するシングルページアプリケーション（以下SPA）を一つ作り上げたわけです。

とりあえず中身がいびつではありますが、動くことは動きます。

これを運用して半年が経ったのですが、問題がありました。

・レスポンシブ対応していないのでスマホだと地味に見づらい
・というか表を無理やり拡張しているのでたまに表示がバグる
・デザインも特に優れているわけではなく、「保留」にした機能の追加もめんどくさくてやってない
・でもCSS苦手だからデザイン周りは手動で改修する気にならない

最近プログラミングしてないし、ここらが改修時だろうと思って

「よーし、Vue.jsを勉強して、フレームワークの実務経験（？）を積んで鍛えながら、中身も外見もきれいに整えるぞー！」

と躍起になったわけです。ここが地獄の始まりとも知らずに。

まずはVue.js

こっちは地獄見ませんでした。ただ、GASって動作確認をしようとするたびにデプロイしてやらないといけないので、表面上公式ガイドをなぞっただけです、ひとまず。

後ほどローカル環境でいろいろいじってみながら勉強してみようかなーと思いつつ、かといって先にデザインが大枠でも決まらないときついんじゃないかと思って途中で学習を止めました。

UIライブラリとやらを選定

UIライブラリというものを使うと苦手なCSSに長時間向き合うことなくデザインを気軽に整えられそうだったので、何かを採用することにしました。

最初は生のスクリプトにMaterial UIを適用しようかとも思ったのですが、Bottom Navigationが使いたかったんですよ。こいつです。

(https://material.io/components/bottom-navigation より引用)

Androidアプリとかではおなじみですかね？いいですよね、これ。

メニューは大きいのが3つあれば十分でしたので、上にボタンが有るよりは下にボタンを置いたほうがいいだろう…と思っていたのが甘かったです。

想像通りのデザインだ！ドンピシャ！さあ実装しよう！！！早く！！！から地獄に落とされます。
見てくださいこれ。

IMPLEMENTATION（実装）

No Web implementation guidance available（要約：ガイドが見つかりませんでした）

？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？

つまり、公式ガイドを頼りながら生でインストールするのは不可能ということが本格的に決定しました。ふざけんなって感じ。

その後非公式のものを探したりもしたのですが、画面を上にスクロールすると隠れてしまいますし、そもそも使い方が結構ハイレベルで全く理解できませんでした。CSS苦手。マジで。
初心者に向けたCSSとかウェブデザイン関連のいい本とかあったら、良ければTwitterで教えて下さい。待っています。

それはさておき。
バニラのJSでは無理っぽいことがわかったので、前述のVue.jsを見つけたときに「Vueで使えるUIライブラリを使おう！」となったわけです。

その時の選択肢は色々あったのですが、BalmUIというのがVue3にしっかり対応しているようで、しかもデザインも良かったので採用しようとしました。挫折したんですけど。

BalmUI

こいつです。サイトは英語と中国語のみ対応しています。

いや、英検準一級とってるのでこれぐらいの英語は読めるんです（さりげない自己アピ）。問題はそこじゃないんです。

今回は最終的な動作環境がGASです。あんまり外部のアレコレをいれて複雑にすると手に負えなくなってしまいます。
VueはCDNで簡単に入るのでそれっきりなんですが、こいつが問題を複雑にしてきます。

まず問題として、一番下の<script>で囲まれたサンプル。よく見るとVue2向けのガイドでした。
「なんかこのVueの書き方見たこと無いなあ」と思いましたが、それは単に古かったからでした。

今度はVue3版のを見ましたが、コピペしても全く動かない。なんだこれ。

ページのバージョンが古かったのか、アレコレしてたら最終的には動きました。サンプルだけ。

この時点で結構疲れているのですが、「とりあえず見た目だけでもBottom Navigation追加してみるか」ということで見に行ってみました。

？？？？？？？？？？？？？？？？？？？？？？

誰だお前は。いきなり出てきやがって。

これ、マジでわかりませんでした。わからないって、言語の種類が。

私、生のHTML、JS、CSSしかいじったことがありません。なんだよ@useって。しかもこの記号ググれねえし。

下のはvueがどーたらって書いてあるのでわかりますが、importでエラー出ます。なんだよimportって。

調べてみると関数をimportするものらしいのですが、何をどうしてもエラーが出るのでお手上げ。ばんざい。ワケガワカラナイヨ状態です。

「こっちは初心者様だぞちゃんと書けよ…」と毒づきながら「あ、先に全体のカラーテーマ変えるか」となり、別のページに。

？？？？？？？？？？？？？？？？？？？？？？？？？

interfaceってなんだ。オイ。いい加減にしろ。

これも調べると、TypeScriptというものの構文らしいです。

TypeScript入れるのめんどくせーってなったのでここで心折れたのが今日の出来事です。

あとSASSとか言うのも出てきてもう死にかけです。ヘルプ。

さらに追い打ちのように関連情報がまったくない。全然ない。恐ろしくない。

日本語の情報がないなら英語の情報を見ればいいじゃないとかのマリー・アントワネットは宣いましたが（宣ってない）、それも全く出ないんですよ。もう泣き寝入りです。

まとめ

休日を2日2セット無駄に過ごしました。

みんなはもっと有意義な時間の使い方をしましょうね！

他にもデザインを整える方法を模索しながら少しずつやっていきたいと思います。仕事じゃないので納期とか存在しないですし。

ではでは。