ハッカーズチャンプルー2023でhtmxについて話しました #hcmpl23

htmx ハッカーズチャンプルー

hackers-champloo.org

ハッカーズチャンプルー2023でhtmxについて話しました

発表スライド

参加者やスタッフの1人としてハッカーズチャンプルーに参加することはありましたが、発表自体は7年近くぶりだったのでとても緊張しました。

トークをするまでに助けていただいた方々へのお礼、そしてトークした後に少し意外な展開があったので、そのことについて書こうと思います。

応募

CfPがあり、レギュラートークと今回採択されたLT枠で2つ応募しました。どちらのトークでもhtmxに話したいな、というのがモチベーションでした。

レギュラートークの内容はLaravel、Rails、Django、Phoenixのフロントエンド事情と称して Inertia.js, Hotwire, htmx, LiveViewの概要と違いを話すつもりでいました。

いま思えばレギュラートークに採択されたら準備に忙殺されていたかなと思います。

発表するまで

スライドのレビュー

そもそも2年近くウォッチしていたhtmxが国内で言及されている事例（触ってみました系記事を除く）がなかったので、話しても理解を得られないのではと不安でした。

少し早めにスライドを作っておき、 htmxと似た方針であるHotwireの事情を知っていそうな @deeeki さんとWebアプリケーション開発とは畑違いのデータエンジニアをしている@tsoshiroさんの二人に見てもらい意見をもらいました。

実際に導入して思うところや、「退屈なのが良い」のが何故なのかを知りたい、というフィードバックは発表後の感想でもコメントもらえたところだったので非常にありがたかったです。

Okinawa.pm

とはいえ、フィードバックをくれたお二人とは元の関係性もあるのである種甘めに見てもらっているのでは？という思いが拭いきれませんでした。 そんな中 Okinawa.pm（という名の飲み会）があることを知り、参加させてもらいました。

他人にhtmxの話をしたのはここが初めてで、思った以上に聞いてくれて嬉しかったです。

特に実際のプロダクトへの導入を決めた @codehex さんの振る舞いがびっくりしたのとトークへの自信に繋がりました。

皆さんの協力があってのLTでした。本当にありがとうございました。

LTの後

ハッカーズチャンプルーにて

LTの後、ありがたいことにお声掛けいただいてhtmxや現代のフロントエンド事情についての情報交換ができてとても良かったです。

htmxのユースケースはまさに

nekorails.hatenablog.com

で言及されているところだなと感じました。

X（旧Twitter）にて

LT中に作者がハッカーズチャンプルー経由でのポスト（旧ツイート）を見つけたようでスクリーンショットを貼りツイートしてくれました。

日本語でのトークを喜んでくださる方 *1や（僕の知っている範囲で）日本圏唯一のhtmxフリークな方からもリプライ*2をもらえてとても嬉しかったです。

雨宿りついでに撮ってもらったhtmxのTシャツ（こちらから購入できます）のツイートも作者が見てくれました。

言語を超えて、推しを応援していることが伝える事ができました。LTをしていなかったらこうはならなかったです。

ハッカーズチャンプルー、貴重な経験をありがとう。

とても楽しかったです。

*1:https://twitter.com/testermelon/status/1710552192716071320

*2:https://twitter.com/killian_arts/status/1710518730894295259

私のDjango情報収集

Django Python

ここ2~3年ぐらいはPythonのフレームワークであるDjangoでのWebアプリケーション開発を行っています。

Djangoでの開発は今回がはじめてで、これまではRuby on Rails（Rails）を使って開発していました。

自分なりに試行錯誤する中で、いくつかアクセスする情報源が定まってきたのでそれについて書こうと思います。

Django News

Django News

週1日、Djangoに関するニュースレターを配信しているサイトです。Djangoに限らず、技術系のトピックはニュースレターから仕入れることが多いです。

過去に配信された一覧は登録なしで閲覧できます https://django-news.com/issues

Django Chat

djangochat.com

Django Newsのキュレーションをしている https://github.com/wsvincent さんと つい先日までDjangoのフェローだった https://github.com/carltongibson の二人がホストをしているPodcastです。

ここの情報を積極的に見るというよりは、ここでDjangoに関わっている人を見つける感じです。英語のリスニングが苦手なので、内容はあまり理解できていません 😇

DjangoConUS, DjangoCon Europe, DjangoCongress JPのYouTubeチャンネル

Djangoに関するカンファレンスのアーカイブも見ています。

www.youtube.com

www.youtube.com

www.youtube.com

ちなみに、DjangoCongress JPが2023年10月7日に開催します。当日参加できないのが残念ですが、楽しみです！

django.connpass.com

Django Fellow Report

forum.djangoproject.com

Djangoのフェローが毎週自身の活動をフォーラムに投稿しているので、メールで購読しています。

どんな提案があったのか、どんなプルリクエストが来たのかなど今のDjangoを知りたいなと思ったのが理由です。

興味があるところを見るだけ、という感じです。

Djangoの情報収集で困っていること

僕自身が情報収集に関して困っていることもあるので、Django有識者の方に教えてもらいたいです。

DjangoのAPIリファレンスがほしい

個人的にRailsで開発していたときにお世話になっていた https://api.rubyonrails.org/ みたいなものがDjangoにもあったらいいなと思っているのですが、見つけきれていません。https://api.rubyonrails.org/ はサクッと入力してメソッドにたどり着けるのが快適でした。

Djangoのソースコードを読むことになり結果それはそれで勉強になっているのでいいのですが、もうちょっと効率的にやりたいなぁと思ってます。

--- 2023-09-24 21:29 追記 ---

djangoproject.jp

のDiscordサーバ （招待リンクはこちら）で質問したところ、

API Reference | Django documentation | Django

を教えてもらいました。 @yamaneko さんコメントありがとうございました！

--- 追記ここまで ---

以上です。「こういうサイトや書籍も便利だよ〜」というのがあればぜひ知りたいです！

heroku/pythonからPython2のサポートが外れたことの回避策

Python Python2 Heroku

遭遇した問題

原因

使用していたbuildpackであるheroku/pythonのバージョンがあがり、Python 2.7がサポート外になったこと。

対策

Python 2.7 EOL FAQ | Heroku Dev Center に記述があるとおり、buildpackのURLを heroku/python から https://github.com/heroku/heroku-buildpack-python#v218 に変更する必要がある。

参考

heroku.ymlでConfig-Varsを利用する

Heroku Ruby on Rails

やりたいこと

heroku.yml を利用してRailsアプリをHerokuにデプロイしたい。heroku.ymlを利用したDockerfileのビルドで bin/rails asset:precompile を利用する際に必要な環境変数 SECRET_KEY_BASE をハードコードせず、heroku config:set で利用できるConfig-Varsを利用したい。

やったこと

以下のように、 変数名を参照することができます

build:
  docker:
    web: Dockerfile
  config:
    SECRET_KEY_BASE: $SECRET_KEY_BASE

app.jsonを配備すれば、Review Appsごとに SECRET_KEY_BASE をセットすることも可能です。

（ review というキーにネストさせることもできる らしいのですがそこは試していません 🙏 ）

{
    "stack": "container",
    "env": {
        "SECRET_KEY_BASE": {
            "required": true,
            "generator": "secret"
        }
    }
}

余談

Fullstaq Rubyを使ったRailsアプリをHerokuで動かすやつ（絶賛お試し中）

Using Fullstaq Ruby on Heroku

EchoをVercel（Zeit now）のServerless Function上で動かす

Golang Vercel now.sh Serverless function

TL;DR

gist.github.com

Goやサーバレスアーキテクチャの初心者なので、もうちょっといいやり方ないかなーと持っています。

やりたいこと

Vercel（Zeit now）を使っていて、Serverless functionでGoが選択できたので利用してみたいと思ったので試してみた。

やったこと

ドキュメントにあるように プロジェクトルートに api ディレクトリを生成して date.go などつくる（このときhttp.HandleFuncのシグネチャである公開メソッドを用意すること）と /api/date というURLを提供できる（ /api/ を指定したい場合は /api/index.go とする）。

が、今回はルーティングはEchoに任せたい（そもそもこれでいいのか？）と思ったので、 now.json の routes オプションを使い、 /api 配下に来たリクエストは /api/index.go で受け取って振り分けるようにした。

わかっていないこと

go.mod で module github.com/kimihito/hoge みたいな指定をすると、 now dev などで開発するとGitHubにアクセスしにいってしまう。 これがGo modのお作法なのか、 利用しているプラットフォームの動作なのかわかっていない（ょゎぃ）

参考にしたリンク

github.com

HanamiでNuxt.jsのビルドしたファイルを配信したい

Hanami Nuxt.js Rack

やりたいこと

  • HTML, CSS, JavaScriptはHanamiの app/web/views で書きたくない。
  • Nuxt.jsやcreate-react-appとかで作ったものを public 配下で配信したい
  • ただ Hanami.rb では public/index.html をおいても反映されなかった

やったこと

Hanami::Static#initializer に index オプションを付与する

require 'rack/static'

module Hanami
  class Static < ::Rack::Static
    def initialize(app, root: Hanami.public_directory, header_rules: HEADER_RULES)
      super(app, urls: _urls(root), root: root, header_rules: header_rules, index: 'index.html') # index: 'index.html' を追加
    end
  end
end

動作確認をしたリポジトリ

github.com

Nuxt.js側の設定（srcDir , generate dir を指定を変えたり、 @nuxt/proxy 入れたり）もあります（雑コミットでごめんなさい）

参考

Google Cloud Storageでダイレクトアップロードを有効にする on Heroku

Active Storage Ruby on Rails Google Cloud Storage

やりたいこと

  • RailsでActive Storageを利用している
  • Google Cloud Storageを利用している Rails.application.configuration.active_storage.service = :google
  • Heroku Review Appsでも利用したい。

やったこと

  • CORSに対応したバケットをHeroku Review Apps作成時に実行する
  • Heroku Review Appsが削除されたときに、対象のバケットも消す

setup for Active Storage direct upload ( Google Cl ...

github.com にてドキュメントが追加されましたが、ダイレクトアップロードを実行する際はCORSの設定が必要なのでその参考になるといいなぁと思ったので。