Murga

個人的に言いたいコト・主張・気持ち。

2020-11-01 : このブログは更新停止しました。以降の記事は Neo's World (https://neos21.net/) にて公開していきます。
このブログの記事は今後 Neo's World に移行し、記事およびブログ全体を削除する予定です。

Neo's Release Notes v29.11.1 (2020-11-01)

穏やかに〜。

先週立てた「今週の目標」と振り返り概要

2020-10-25 〜 2020-10-31 の目標。

  1. 生活
    • イライラする物に近付かない・頑張って無視する → 達成
  2. 個人
    • リングフィットアドベンチャーや運動する → 達成
  3. 仕事
    • なんもしなくていいんじゃねぇかダルいし

生活関連の振り返り

イライラする物は相手しない。口をつぐんで離れる。コレでいい。向こうも無視されたとか思わないしコチラが反応しなければそこで終わる。コレでいい。

つーワケで比較的のんびりできた。

個人関連の振り返り

リングフィット久々にやった。へとへとや…。なんか土曜から腰を痛めてしまったので、コルセットを巻いている。ツラい。


メインサイト Neo's World のリニューアル準備を進めている。Front Matter と Markdown もしくは HTML を書くと、テンプレートファイルとマージできる仕組みを作り上げた。そろそろ並行して、独自ドメインの取得と XREA 有料プランを契約したい。はてなブログの有料プランにも課金しているので、コレを今度は更新せず、それまでにメインサイトに全て引っ越すつもりでいようかな。…と思ったけど、はてブロの有料プランは来年2021年に更新を迎えるのか。Corredor は PV 数が多くて収益を得られているから、ココの引っ越しは慎重に行きたいんだよなぁ…。悩ましい。

仕事関連の振り返り

普通に忙しくなった。資格勉強とか無理。残業しとる。ダルい。

今週の目標

2020-11-01 〜 2020-11-07 の目標。

  1. 生活
    • 割と何もないので気楽にしていよう
  2. 個人
    • リングフィットアドベンチャーや運動する
    • XREA 周りの契約を始めよう
  3. 仕事
    • とりあえず忙しい仕事を片付けることのみ専念する

寒くて腰が痛くて、基本やる気ないです。でもメインサイトの更新作業している時は楽しい。w

rakuten:mediaworldkaitoriworld:10265621:detail

Gatsby.js 所感

以前 Gatsby.js をちょっとだけ試してみたことがある。

neos21.hatenablog.com

最近個人サイトに戻ろうかなと思っていて、「静的サイトジェネレータ」なるツール達が HTML を出力する手間を省いてくれるのではないかと思い、色々調べているところだった。

そこで Gatsby.js を試してみようと思った次第である。

結果的には、僕の狙いどおりには行かないので Gatsby.js の採用は見送ることにした。

Gatsby.js の特徴・良いところ

色々試してみて感じた、Gatsby.js の良いところをまとめてみる。

  • 最終成果物は「ページごとに分割された HTML ファイル」や、JS・CSS ファイルになる
  • 各 HTML には React ベースの SPA が埋め込まれており、画面遷移することなく他のページに飛べる
    • つまり、各ページの 静的 HTML が成果物としてありながら、どの HTML も SPA のエントリポイントになれる
    • コレにより画面遷移が爆速な仕組みを実現している。確かに速い。
  • 豊富なスターター、プラグインにより、コピペで大体やりたいことがやれる
    • TS・SCSS 対応は勿論、Markdown 入稿や画像のリサイズや OGP など、何でもできる
    • Markdown 対応させると、ブログと固定ページを混在させたようなサイトも簡単に作れる
  • 通常は React ベース、JSX で実装するので、HTML 構文のミスを見つけやすい
    • JSX がバリデータになる

SPA として動く際、裏では GraphQL が使われているのだが、GitHub Pages のような静的ホスティングサービスでも動作する仕組みになっていて、バックエンドサーバや RDB は不要。

Gatsby.js の流儀に乗れば、爆速で快適で、それなりに規模が大きなサイトを見栄え良く作れるのは確かだ。

Gatsby.js の良くないと感じたところ

一方、自分の目的や狙いには合わなかったなと思うところを挙げておく。これらは気にならない人もいるだろうから、自分の中での重み付けは任せる。

  • Gatsby のために必要な学習コストが高い
    • React・JSX がベースなので、JS で書く場合は React の知識が多少必要になる
    • React は JS の this の扱いがクソだるい。class 構文で書く時もめちゃダルい。個人的には React は Vue や Angular よりも無駄に複雑で難解なフレームワークだと思っている
    • GraphQL はほぼ必須。複雑な構文ではないものの、「Markdown ファイルをパースして欲しいだけなのにどうしてこんなに手間がかかるの?」と感じる
  • CoC (規約による設計) があるが、規約が分かりづらい
    • 自分は CoC 苦手なんだろうなと思った。自分のプロジェクト内のコードを Grep しても出てこない情報によって自動的に関連付けられているのが物凄く分かりにくい
  • やりたいことを実現するために、どのプラグインをどのように仕込む必要があるのか分かりにくい
    • プラグインが小さく別れすぎていてつらい
    • プラグイン入れて gatsby-config.js に書き加えるだけじゃなくて GraphQL もイジらないといけない、とかもある
  • 何がどうなって動いているのか理解できなくてイライラする
    • まっさらな状態から Gatsby プロジェクトを立ち上げるのはほぼ無理で、スターターキットを使うのだが、何のファイルがどういう理由で必要なのか理解するのが大変
    • 自分が分かっていないコードが作用しているのは嫌なので、理解して使いたいが、プラグインを含めると規模がデカすぎる
    • 全て理解しても、仕組みは分かったけど俺は HTML が書きたいだけなんだ、なんでこんな面倒なことしなきゃいけないんだという気持ちになる
  • 純粋に HTML を書けない
    • JSX なので className と書かなきゃいけない
    • React なのでコンポーネントは単一要素しか返せない (複数要素をルートに配置できない) → 余計なネストが発生する → コレにより HTML が肥大化するし、思っていた階層構造にならないので CSS も書きづらい
  • v2 になって仕様が変わったところがあり、日本語文献の鮮度が重要になっている
    • 結局公式の英語リファレンスを読まないと安心できない
    • gatsby-link パッケージは不要になったよ。import { Link } from 'gatsby'; で良いよ、とか
  • URL 中にファイル拡張子が登場しない形で成果物が生成される
    • src/pages/hoge.js を作ると public/hoge/index.html が生成されるので、アクセスする URL は http://example.com/hoge となる
    • コレ自体は素晴らしく良い機能だと思うし、Gatsby 製ブログを作るぞーと思っている時はいいと思うのだが、自分がやりたかったこととはちょっと合わなくて…
  • プラグインが俺の知らない HTML を吐きやがる
    • Markdown で画像を扱うために gatsby-remark-imagesgatsby-plugin-sharp がセットで必要な時点で萎えていたが、いざ生成された HTML を見たら謎の CSS クラスが付与されていてそこで諦めた
    • そもそも HTML ソースの改行やインデントを付けて出力してくれないの嫌

つまりは、自分は最終成果物である HTML をキレイな形で出力したいのだ。余計な要素を突っ込まないで欲しいし、インデントはキレイに保ちたい。HTML を直接書く労力を省力化できたらいいなと思っているだけであって、成果物は手打ちの HTML と同等であって欲しいのだ。Gatsby はココが出来なかった。

ブログ部分に関しては、ただ Markdown を HTML にパースして、お決まりのヘッダとフッタを付けてくれればいいだけなのに、何で大量のプラグインや GraphQL を書かなきゃいけないんだ?という気持ちは拭えなくて、面倒臭すぎた。

固定ページ部分も、React と JSX で書く必要があって、大変気に入らない。普通に HTML を書かせろ。

つーワケで、自分の今回の用途には合わなかった、というのが感想。普通にブログを作りたいだけの人、あまり内部の挙動は理解できなくてもいい (動けばいい)、という人であれば、Gatsby は人気どおりのポテンシャルを持っている素晴らしいツールだと思った。

なお、色々試していた GitHub リポジトリは以下。もう更新しないかなぁ。

github.com

エスノグラフィという言葉を知った。

エスノグラフィ。Ethnography。民族誌学。

自分たちとは違う文化で生活する別の民族を、観察やインタビューによって理解していこうという方法論。

ビジネスの場面では、人間中心の UI を設計していく際に、ユーザを観察するようなやり方を指すそうだ。


「裸足の国で靴を売る」というネタのグループワークを、就活の時に何回かやらされた記憶がある。

「そんな国に需要はない」と捉えるか「全員が顧客になったら凄い売上になるぞ」と考えられるか、みたいなところを見るためのモノで、マーケティングに正解はないよって話だと思うが、自分は当時、面接官たちがどういう模範解答を用意していたのか知りたかった。

  • 参考:営業に使える⁉︎ アフリカで靴を売る話
    • 全く同じ状況を目にしたにもかかわらず、正反対の判断をA社とB社の営業マンはくだしました。このあとどちらが成功したのかということはこの訓話中では大抵の場合言及されません。

当時グループワークでは、「靴は便利ですよー」みたいな売り込みの文句ばかり考えてしまっていた。

お試しで何足か置いていって、後で売るというやり方なんかが良いらしい。当時もっと柔軟に考えられたらなぁ。

自分はこういう国をブルーオーシャンだと思えるほど気が長くないので、まぁ無理でしょうけど。


ま、それはいいとして。

いざ靴を履かない民族に靴を売ろうとなった時に、必要なのは「その民族の行動を観察すること」ではあるよな、と。そしてそれを、エスノグラフィと言うんやな。

というのが今日の学びでした。

エスノグラフィー入門 <現場>を質的研究する

エスノグラフィー入門 <現場>を質的研究する

  • 作者:小田博志
  • 発売日: 2010/04/27
  • メディア: 単行本