2022年 11月 の投稿一覧

Python, Djangoをきちんと使いたい_03: mypy で型安全を得る

皆さまこんにちは、ウチイダです。

時間を見つけてはDjango で中規模以上のアプリケーションを開発するための環境構築について調べています。

前回の記事はこちら。

ウチイダの作業環境は以下です。

  • Windows 11 21H2
  • WSL2 Ubuntu20.04
  • GNU bash, version 5.0.17(1)-release (x86_64-pc-linux-gnu)

以降の内容は、この環境にPython/Djangoの開発環境を導入していく手順メモとなります。

転ばぬ先の型チェック

今回は、型チェッカーを導入します。

TypeScript + React をやり始めてから、実行時エラーで悩むことが激減しました。

Pythonでもそういう開発体験ができるといいなあと思って、型チェッカーを使っていくことにしました。

Pythonでは、TypeScriptのような静的型付けの機能を持ったスーパーセット言語はなさそうですが、型ヒント(Type hinting)が機能としてついているので、これを使うと型不整合を検出できるようです。

型の不整合をチェックするツールとしては、mypy がメジャーなようなので、これを導入していきます。

http://mypy-lang.org/index.html

エラーチェックツールとしては、VSCodeの拡張機能であるPylance も人気があります。

しかし、こちらはあくまでVSCode上でチェックをしてくれるもので、CLIで任意のタイミングに実行することができません。

チーム開発で使うことを考えて、Gitのpre-commitやレビュー実施時にCLIから実行をすることを考えて、mypyを採用します。

おことわり

mypy の導入にあたってはスムーズに行かなくてけっこう試行錯誤しました。

うまくいかない経緯も何らかのお役に立てるかもしれないと思い、なるべくそのまま掲載しています。

シンプルな導入手順を知りたい方にとっては冗長かもしれません。そのうちきれいに手順をまとめようと思います。

mypy のインストール

Poetry で導入する場合の例です。

$ poetry add --group dev mypy
The --dev option is deprecated, use the `--group dev` notation instead.
Using version ^0.991 for mypy

Updating dependencies
Resolving dependencies... (0.3s)

Writing lock file

Package operations: 2 installs, 0 updates, 0 removals

  • Installing typing-extensions (4.4.0)
  • Installing mypy (0.991)

pip でインストールする場合は以下のようにコマンドを実行します。

$ pip install mypy

これだけで導入は完了です。

CLI からチェックを試す

ためしに、あえて型不整合があるスクリプトを書いて、それをチェックしてみます。

import datetime

var: datetime.datetime = "foo"

mypy でのチェックは、mypy <対象ファイル> で行います。

$ mypy mypy_test.py
mypy_test.py:3: error: Incompatible types in assignment (expression has type "str", variable has type "datetime")  [assignment]
Found 1 error in 1 file (checked 1 source file)

datetime と str で型エラーが出ました!

ところで、上記のスクリプトって実行時エラーにもならないんですね…

VS Code 上で警告を表示する

続いて、VS Codeのエディタ上に型不整合のエラーを表示していきます。

VS Code上の設定項目にmypy が入ってるので、これを有効にします。

Mypy Enabled にチェックを入れる

ウチイダこれだけでOKでした。

さらに、プロジェクト全体を自動でチェックしてくれるように、Mypyの拡張機能も導入してみます。

上記の設定だと、ひらいてるファイルのチェックしかしてくれないようなんですよね…

mypy をシステムグローバルにインストールしていない(プロジェクトごとの仮想環境にしかインストールしていない)場合、mypy daemon が見つからない、という警告が出る場合があります。

mypy daemon が見つからないエラー

公式ドキュメントを見てみると、mypy server プロセスを起動させて置きそれに型チェックをさせるしくみがあるようです。

VS Codeはこれと連携して、チェックをしているみたいですね。

https://mypy.readthedocs.io/en/stable/mypy_daemon.html

さらに、mypy の拡張機能の説明文を読んでみると、仮想環境上のmypy を利用する場合は、 mypy.RunUsingActiveInterpreter をEnable にするように、と書いてありました。

仮想環境のmypy を使う場合の指示

設定をしたところ、エラーが消えました!

Dmypy.Executable はデフォルト値のままでOKです。

これで基本の設定は完了です。

返り値の型指定がない関数の内部はチェックされない

基本の設定は完了…と思っていたのですが、まだもう少し続きます。

どんなパターンでエラーが出るのか、いろいろ試していたところ、間違っていそうなのにVS Code で警告されないものがありました。

str 型の変数に、わざわざint キャストした整数値を代入しています。

def main():
    num_string: str = int(2)
    print(f"test: {num_string}")


if __name__ == "__main__":
    main()

それでも、エラーになりません。

エディタ上でも、CLIでもエラーにならない

よく見ると noteのところに、untyped な関数の内部はデフォルトではチェックしないので、 –check-untyped-defs を使ってみて、と書いてあります。

オプションを加えてチェックを再実行したところ、エラーになりました。

–check-untyped-defs オプションをつけるとエラーになる

untyped function というのは、返り値の型を定義していない関数のことのようです。

というわけで、 main() の返り値としてNoneを指定してみます。

返り値を設定したら、エラー検出された

untyped function ではなくなったので、エディタ上でも検出してくれました。

VS Codeでのチェックにオプションを設定する

型注釈がない関数が、VS Code上で警告されないのはつらいです。

調べてみたところ、VS Code の設定から、 mypy のチェックオプションを設定できるようでした。

設定画面を開いて、 python.linting.mypyArgs から設定できます。

ひとまず、–check-untyped-defs を追加しました。

python.lintinh.mypyArgs に –check-untyped-defs を追加

すると、 main() の返り値に型注釈がなくてもエラーを検出してくれました!

unyped-function の内部も、エディタ上で警告されるようになった

mypy のチェックオプション

オプションとして設定できる項目はいろいろあるようです。

https://mypy.readthedocs.io/en/latest/command_line.html#specifying-what-to-type-check

Python の型ヒントの仕様とあわせて理解すれば、良い感じの制限を作れそうです。

VS Code の設定を共有する

VS Code をチームで統一して使っている場合、その動作も統一したくなります。

mypy はけっこう設定の作業項目が多いので、可能なら全員で同じ設定ファイルを共有してしまうのがよいと思います。

プロジェクト内に .vscode/settings.json を作って、Git リポジトリに共有するだけでいいのでお手軽ですね。

mypy の設定は、json でみると今のところこんな感じになっています。

{
  "python.linting.mypyEnabled": true,
  "mypy.runUsingActiveInterpreter": true,
  "python.linting.mypyArgs": [
    "--follow-imports=silent",
    "--ignore-missing-imports",
    "--show-column-numbers",
    "--no-pretty",
    "--check-untyped-defs"
  ]
}

もう少しきちんと設定ファイルを作りたいです。。。

まとめ

とりあえずCLIと、VS Code上での型不整合の検出ができるようになりました。

TypeScriptもそうですが、設定周りで覚えることが多いので、もっと使い慣れていく必要があるなと思いました…

というわけで、今回はここまで。

あなたのお役に立てればうれしいです。

参考資料

https://ohke.hateblo.jp/entry/2020/10/03/230000

https://mypy.readthedocs.io/en/latest/mypy_daemon.html

https://future-architect.github.io/articles/20201223/

https://mypy.readthedocs.io/en/latest/command_line.html#specifying-what-to-type-check

VSCode で、PythonのGotoDefinitionが動かない – Language Serverの設定を見直す

皆さまこんにちは、ウチイダです。

Pythonの環境設定をいろいろ試しているところで、タイトルの事象が発生しました。

VSCodeでは、コード上の変数やクラス名にカーソルを置いてF12を押すと、その定義を開いてくれる機能があります。

その機能がいつの間にか使えなくなっていました。

「定義が見つからない」と表示される

原因:LSPが設定できていなかった

定義へ移動する機能は、LSP(Language Server Protocol)によって実現されています。

詳細はこちらで…

https://github.com/microsoft/language-server-protocol

VSCodeで編集している内容に対して、このLanguage Serverを介して機能を提供する仕組みです。

そのため、Language Serverが動作していないといけないということになります。

通常はVSCode起動時に、指定されたLanguage Serverが起動するようになっているはずです。

そこで、VSCode の設定を確認してみたところ、Python のLanguage Server で「None」が選択されており、を起動しない設定になっていました。

これを「Default」に変更したところ、改善しました。

Mypyを導入する際に既定のLanguage Server であるPylanceと併存できるかいろいろ調べていたので、その時にやってしまったのかもしれません。

原因究明するまでに結構時間がかかってしまいました。

以上です。あなたのお役に立てればうれしいです。

Python, Djangoをきちんと使いたい_02: Poetry でパッケージ管理

皆さまこんにちは、ウチイダです。

Python開発環境を整えるメモ、今回はパッケージ管理の仕組みをやっていきます。

前回はpythonランタイムのバージョン管理のためにpyenv を導入しました。

ウチイダの作業環境は以下です。

  • Windows 11 21H2
  • WSL2 Ubuntu20.04
  • GNU bash, version 5.0.17(1)-release (x86_64-pc-linux-gnu)

以降の内容は、この環境にPython/Djangoの開発環境を導入していく手順メモとなります。

Python のパッケージ管理ツール

公式かつ最大手のpip

パッケージ管理ツールは公式からpip が提供されていますが、どうやら依存解決に難があるようなのです。

pip install しても、composer やnpmみたいに lock ファイルとかできないですしね…

あと、依存解決でインストールされたパッケージが、他からの依存がなくなっても削除されなかったりするようです。

ウチイダは基本的に公式のツールを使っていきたいスタンスですが、これはさすがに不安が残ります。

Pipenv, Poetry, Pyflow

というわけで、ほかの言語のパッケージ管理ツール機能を持ったサードバーティのツールを調べてみました。

Pipenv, Poetry, Pyflow の3つが有力っぽいです。Pipenv が先にリリースされて、そのあとにPoetry、 Pyflow の順番でリリースされています。

いろいろ調べたのですが、タイトルの通りPoetry を使ってみることにしました。

https://python-poetry.org/

比較は今回の趣旨ではないので、ごく簡単に理由を書いておくことにします。

  • PEPで策定されてる形式の設定ファイル(pyproject.toml)ひとつで管理できる方式
  • pyproject.toml が使えるのがPoetry とPyflow
  • Pyflow はまだ安定してないっぽい(バージョン1になってない)

選定が妥当かどうかはわかりません。技術選定の審美眼ほしい。

インストール

# 1. インストール用のスクリプトを読み込んで実行
$ curl -sSL https://install.python-poetry.org | python3 -
Retrieving Poetry metadata

# Welcome to Poetry!

This will download and install the latest version of Poetry,
a dependency and package manager for Python.

It will add the `poetry` command to Poetry's bin directory, located at:

/home/y-uchiida/.local/bin

You can uninstall at any time by executing this script with the --uninstall option,
and these changes will be reverted.

Installing Poetry (1.2.2): Done

Poetry (1.2.2) is installed now. Great!

To get started you need Poetry's bin directory (/home/y-uchiida/.local/bin) in your `PATH`
environment variable.

Add `export PATH="/home/y-uchiida/.local/bin:$PATH"` to your shell configuration file.

Alternatively, you can call Poetry explicitly with `/home/y-uchiida/.local/bin/poetry`.

You can test that everything is set up by executing:

`poetry --version`

# 2. パスが通っていなければ、以下を追加
$ echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.bashrc

# 3. poetry が実行できれば完了!
$ poetry --version

Poetry のアップデート

インストールした直後なので不要ですが、未来の自分のためにメモ。

poetry self update で更新します。

$ poetry self update
Updating Poetry version ...

Using version ^1.2.2 for poetry

Updating dependencies
Resolving dependencies... Downloading https://files.pythonhosted.org/packages/d1/20/4c2ea55d6547460a93dce9112599953be1c9Resolving dependencies... Downloading https://files.pythonhosted.org/packages/1d/38/fa96a426e0c0e68aabc68e896584b83ad1eeResolving dependencies... Downloading https://files.pythonhosted.org/packages/76/cb/6bbd2b10170ed991cf64e8c8b85e01f2fb38Resolving dependencies... (25.9s)

Writing lock file

No dependencies to install or update

Poetry のアンインストール

インストールしたばかりなのでこちらも不要ですが、未来の自分のためにメモ。

インストールのコマンドの最後に –uninstall オプションをつけるだけです。削除のためのモードも含めてるんですね。

$ curl -sSL https://install.python-poetry.org | python3 - --uninstall
Removing Poetry (1.2.2)

Poetry でプロジェクトを作る

空のプロジェクトを作るなら、poetry new <プロジェクト名>、

既存のディレクトリに作成する場合はpoetry init です。

# 新しくプロジェクト用のディレクトリを作る場合
$ poetry new porty_new_sample
Created package porty_new_sample in porty_new_sample

# 既存のディレクトリにプロジェクトを追加する場合
$ poetry init

Poerty で仮想環境を作る

Poetry はPythonのバージョン管理こそできませんが、仮想環境を作成することができます。

Python の公式ツールとなったvenv でも仮想環境は作れますが、仮想環境を起動してからスクリプトを実行しないといけないのですこし面倒です。

poetry は、そのCLIから仮想環境のランタイムで指定のスクリプトが実行できるので、開発中のコマンド実行が少し楽になるかもしれません。コマンド実行ごとのタイプ量が増えるので、一長一短かも。

仮想環境の作成先を設定

デフォルトの設定では、Poetryの仮想環境は$HOMEディレクトリ配下の専用ディレクトリに作成されます。

どの仮想環境が実行されているのかわかりづらくなるので、プロジェクトのディレクトリ内にあったほうがいいな…と思います。

というわけで、プロジェクトディレクトリ内に仮想環境が作成されるように、設定をしておきます。

$ poetry config virtualenvs.in-project true

これで、仮想環境は各プロジェクトのディレクトリ内に作成されます。

デフォルトでは.venv というディレクトリ名のようです。

仮想環境を作成・実行する

現在のターミナルで仮想環境に入るときは poetry shell、

仮想環境でコマンドを実行する場合はpoetry run <実行するコマンド>です。

# 仮想環境に入る
poetry_venv_test$ poetry shell
Spawning shell within /home/y-uchiida/poetry_venv_test/.venv
. /home/y-uchiida/poetry_venv_test/.venv/bin/activate
poetry_venv_test$ . /home/y-uchiida/poetry_venv_test/.venv/bin/activate
(poetry-venv-test-py3.11) :poetry_venv_test$

# 出る時はexit (deactivate でもOK)
(poetry-venv-test-py3.11) :poetry_venv_test$ exit

パッケージのインストール

では本題、パッケージのインストールです。

ためしにDhango 3.2 をインストールしてみます。

# パッケージを追加
$ poetry add django==3.2
Creating virtualenv poetry-add-pachage-sample in /home/y-uchiida/poetry_add_pachage_sample/.venv

Updating dependencies
Resolving dependencies... (0.1s)

Writing lock file

Package operations: 4 installs, 0 updates, 0 removals

  • Installing asgiref (3.5.2)
  • Installing pytz (2022.6)
  • Installing sqlparse (0.4.3)
  • Installing django (3.2)

# poetry.lock ができてる!
$ ll
total 28
drwxr-xr-x 5 y-uchiida y-uchiida 4096 Nov 22 16:02 ./
drwxr-xr-x 5 y-uchiida y-uchiida 4096 Nov 22 16:01 ../
drwxr-xr-x 4 y-uchiida y-uchiida 4096 Nov 22 16:02 .venv/
-rw-r--r-- 1 y-uchiida y-uchiida    0 Nov 22 15:42 README.md
-rw-r--r-- 1 y-uchiida y-uchiida 2131 Nov 22 16:02 poetry.lock
drwxr-xr-x 2 y-uchiida y-uchiida 4096 Nov 22 15:42 poetry_add_pachage_sample/
-rw-r--r-- 1 y-uchiida y-uchiida  356 Nov 22 16:02 pyproject.toml
drwxr-xr-x 2 y-uchiida y-uchiida 4096 Nov 22 15:42 tests/

poetry.lock の中身は長いので載せませんが、テキストファイルになっているので普通に読めます。

[[package]] と [package.dependencies] がセットになって、依存関係を表現しているようです。

Poetry にタスク実行機能はないのか

さて、ここまでくると、開発中に利用できるタスクランナーの機能が欲しくなってきます。

結論から言うと、Poetry はタスクランナーの機能は付いていません。

poetry run でそういうことができないのか調べてみたのですが、どうも目的が違うようです。

別のツールを使うか、Makefileなどでショートハンドを作ったりするのがよさそうです。

まとめ

今回はPoetry を利用してパッケージの依存関係ができるようにしてきました。

ウチイダはとても便利だと思ったのですが、公式の強さか、最も利用されているのはpipのようです。

依存関係が管理できないとなんだか不安なのは、Node.js やPHP での経験があるからこそでしょうか…

いずれにしても、効率的なチーム開発にはあったほうがよいでしょうし、導入している例も結構多いようなので、触っておいて損はないかなと思います。

以上です。あなたのお役に立てればうれしいです。

Python, Django をきちんと使いたい 01: Pythonのバージョン管理のためにpyenv を導入【Win11/WSL2-Ubuntu】

皆さまこんにちは、ウチイダです。

Python/Djangoの案件にかかわることになりそうで、改めて勉強しなおそうと思っています。

Djangoはチームの開発で使ったことがなかったので、これを機に周辺ツールの知識もまとめておくことにしました。

ウチイダの作業環境は以下です。

  • Windows 11 21H2
  • WSL2 Ubuntu20.04
  • GNU bash, version 5.0.17(1)-release (x86_64-pc-linux-gnu)

以降の内容は、この環境にPython/Djangoの開発環境を導入していく手順メモとなります。

まずはPythonのバージョン管理ツールから

何はともあれ、ランタイムのバージョン管理を入れることにします。

Node.js のnodenv やvolta とか、PHP のphobrew みたいなものを探してみます。

調べたところ、pyenv がよくつかわれているようです。

https://github.com/pyenv/pyenv

anyenv にも含まれているツールです。rbenv をフォークしてPython 用にしたものだとのこと。

メンテナンスも継続されてるようなので、pyenvを使うことにしました。

インストールする

未来の自分が別の環境でコピペ利用できるように、なるべく汎用的なやり方にしておきます。

GitHubのREADMEに情報がまとまっているので、これに沿って進めれば大丈夫そうです。

https://github.com/pyenv/pyenv#basic-github-checkout

GitHub のリポジトリをクローンする方法で進めます。

READMEに書いてあるのそのままですが、実行するコマンドと出力結果例は以下です。

以下のコマンドをコピペで大丈夫だと思うのですが、いくつか留意すべき点があります。

# 1. リポジトリをclone する
$ git clone https://github.com/pyenv/pyenv.git ~/.pyenv
Cloning into '/home/y-uchiida/.pyenv'...
remote: Enumerating objects: 22214, done.
remote: Counting objects: 100% (282/282), done.
remote: Compressing objects: 100% (154/154), done.
remote: Total 22214 (delta 141), reused 237 (delta 112), pack-reused 21932
Receiving objects: 100% (22214/22214), 4.49 MiB | 4.40 MiB/s, done.
Resolving deltas: 100% (15003/15003), done.

# 2. 高速化のためのBash拡張のコンパイル(やらなくてもOK)
$ cd ~/.pyenv && src/configure && make -C src
make: Entering directory '/home/y-uchiida/.pyenv/src'
gcc -fPIC     -c -o realpath.o realpath.c
gcc -shared -Wl,-soname,../libexec/pyenv-realpath.dylib  -o ../libexec/pyenv-realpath.dylib realpath.o
make: Leaving directory '/home/y-uchiida/.pyenv/src'

# 3-1. ~/.bashrc にpyenv の設定を追加(pyenv がデータを保存するディレクトリを指定)
$ echo "#setting for pyenv" >> ~/.bashrc
$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bashrc
$ echo 'command -v pyenv >/dev/null || export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bashrc
$ echo 'eval "$(pyenv init -)"' >> ~/.bashrc

# 3-2. 同じ内容を、 ~/.bash_plofile にも追加する
$ echo "#setting for pyenv" >> ~/.bash_profile
$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
$ echo 'command -v pyenv >/dev/null || export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(pyenv init -)"' >> ~/.bash_profile

# 4. 設定を読み込み
$ source ~/.bashrc

# .5 pyenv が実行できれば完了!
$ pyenv -v
pyenv 2.3.6-15-g13d85686

補足・留意点

1. Bash 設定ファイルについて

上記コマンドの中で、.bashrc と.bash_profile にpyenv の設定を追加していますが、READMEによると$HOMEにあるbashの設定ファイル全部に書いとくと安心、とのことです。

ウチイダは自身の$HOME ディレクトリに上記の2つだけしか存在してなかったので、これだけ設定しています。

人によっては .profile とか、.bash_login があるかもしれないので、その場合は同じように追記しておくとよさそうです。

2. $BASH_ENV 環境変数について

$BASH_ENV が .bashrc に設定されてる場合の注意点が記載されてます。

この場合、eval “$(pyenv init -) を .bashrc に記述しておくと、pyenv が無限ループを起こしてしまうとのこと…

echo $BASH_ENV で設定値を確認して、もし.bashrc になっていたら、eval の行は .bashrc から取り除いておきます。

pyenv でPythonをインストール

いくつかの罠を越えてpyenv をインストールできたら、さっそく使っていきましょう。

# 1. インストール可能なバージョンの一覧を表示
$ pyenv install --list
Available versions:
  2.1.3
  2.2.3
  2.3.7
  2.4.0
# ... 以下略

# 2. バージョンを指定してインストール(3.10.x)
$ pyenv install 3.10
Downloading Python-3.10.8.tar.xz...
-> https://www.python.org/ftp/python/3.10.8/Python-3.10.8.tar.xz
Installing Python-3.10.8...
Installed Python-3.10.8 to /home/y-uchiida/.pyenv/versions/3.10.8

# 3. デフォルトで動作するバージョンを設定
$ pyenv global 3.10
$ python --version
Python 3.10.8

# 4. 現在のディレクトリで動作するバージョンを指定
$ pyenv local 3.10

pyenv local は、実行したディレクトリに.python-version というファイルを作って、そこに利用するバージョンを書き込んでいます。

.python-version ディレクトリ階層をみて、直近の上位ディレクトリの.python-version に記載されたバージョンを使ってくれます。

そのほかの使い方は、pyenv –help を実行すると詳しく出てきます。

まとめ

pyenv を導入して、バージョン切り替えできるようにしました。

これで万が一、複数バージョンが必要になった場合も安心です。

それにしても、Pythonってサポート期間長いんですね…どのバージョンも5年ある…

ライブラリも、過去バージョンのサポートを長めに続けているようなので、意外とプロジェクトごとに厳密にバージョン分けする機会ってないのかも…と感じてます。

本当にきっちりやるなら、Dockerとか仮想マシン使うでしょうし…

とはいえ、pythonに限らないですが、OSの公式リポジトリだと最新バージョンをインストールできない場合も多いです。

気軽に最新バージョンに追従できるようにしておくのは悪くなんじゃないかと思います。

以上です。あなたのお役に立てればうれしいです。

firebase init で Firestore のエラー:Realtime DBを設定したら直った

皆さまこんにちは、ウチイダです。

最近はFirebase を勉強中です。スマホ対応のWebアプリの開発速度が高まりそうでわくわくしています。

開発もどんどん進んでいるのか、謎のエラーやドキュメントに書いてない事象にぶつかっては、調べ物をしているので、なかなかスムーズに進んでいませんが…

そんな中で、よくわからないエラーに遭遇したのでメモしておきます。

開発環境

  • Windows 11 21H2
  • WSL2 Ubuntu20.04
  • Node.js v16.18.1
  • npm 8.19.2
  • firebase CLI v11.16.0

事象

Firebase CLI で、firebase のプロジェクト設定の初期化をしたところ、以下のようなエラーが。

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

# ... 中略

=== Firestore Setup

Error: It looks like you haven't used Cloud Firestore in this project before. Go to https://console.firebase.google.com/project/xxxxxxx/firestore to create your Cloud Firestore database.

「Firestore のデータベースが作成されていない」とのことですが、設定画面上では作成済みになっています。

作成直後だから、CLIから読み取るのにタイムラグがあるのかな、と思って数分置いてみたものの改善せず。

対策:Realtime Database を作成する

いろいろ調べているうちに、Firestore を設定していても、プロジェクト上で設定が認識されない場合があるらしいことがわかってきました。

たとえば、SDK用のconfig 設定値にDatabase URLがないとか…

その対策として、Realtime Databaseをプロジェクトに作成する、ということが書かれていました。

参考:【Firebase】databaseURLが見当たらない?

https://engineering.webstudio168.jp/2022/02/firebase%E3%81%A7databaseurl%E3%81%8C%E8%A6%8B%E5%BD%93%E3%81%9F%E3%82%89%E3%81%AA%E3%81%84%EF%BC%9F/

もしやと思って、使う予定はないけどRealtime Databaseを作成してみたら、改善しました。

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

# ... 中略

=== Firestore Setup
# エラーが消えて、先に進んだ
Firestore Security Rules allow you to define how and when to allow
requests. You can keep these rules in your project directory
and publish them with firebase deploy.

FireStore とRealtime Databaseは、用途の違う別物だと思ってたのですが、なんらかの設定が共有されているのでしょうか…

よくわからないけど、調べても原因がわからなかったので、Firestore を使うときはRealtime Database も一緒に有効化することにしようと思います…

以上です。あなたのお役に立てればうれしいです。

Vite で自動ビルドしたい – build に –watch オプションをつける

皆さまこんにちは、ウチイダです。

React とともに、firebase を本格的に触り始めています。

React + firebase で開発速度を上げて、小規模の開発を効率化できないかな~と試行錯誤しています。

firebase の エミュレータがとても充実しているということを最近知りました。便利です。

今回はその中で調べたことをメモしておきます。

firebase hosting のエミュレータが修正を反映しない

ソースコードを修正して、hosting エミュレータのURLを開いても変更が反映されません。

よくよく考えれば当たり前なんですけど、「hosting のエミュレータ」なので、ビルド済みの静的ファイルを読み込んでいるんですよね。

hosting のエミュレータで修正内容を反映するには、ソースコード修正後は一度ビルドしてデプロイ用のファイルも更新しないといけません。

Vite でローカル環境を動かしていたので、つい忘れていました。

Vite のビルドを自動で実行する

とはいえ、毎回手動でビルドのコマンドを実行するのは面倒です…

ソースコードを修正して保存したら、自動でビルドを実行してもらいたいです。

というわけで結論から。以下のコマンドで、Vite(の内部で動いてるRollup)を、watch モードで実行することができます。

$ npx vite build --watch
vite v3.2.2 building for production...

watching for file changes...

build started...
✓ 974 modules transformed.
# ... 省略 ...
built in 7582ms.

公式サイトには言及が少ないですが、

vite build --watch で rollup のウォッチャを有効にすることができます。

本番環境用のビルド | Vite

と書いてありました。

https://ja.vitejs.dev/guide/build.html#ファイル変更時のリビルド

Vite コマンドのヘルプにも、オプションの一覧に載っていました。

$ npx vite build --help
vite/3.2.2

Usage:
  $ vite build [root]

Options:
# ... 省略 ...
  -w, --watch                   [boolean] rebuilds when modules have changed on disk 
  -c, --config <file>           [string] use specified config file 
  --base <path>                 [string] public base path (default: /) 
  -l, --logLevel <level>        [string] info | warn | error | silent 
  --clearScreen                 [boolean] allow/disable clear screen when logging 
  -d, --debug [feat]            [string | boolean] show debug logs 
  -f, --filter <filter>         [string] filter debug logs 
  -m, --mode <mode>             [string] set env mode 
  -h, --help                    Display this message

npm script にも、build:watch として 登録しておきました。

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "build:watch": "vite build --watch",
    "preview": "vite preview"
  },
}

まとめ

ビルド処理には少し時間かかってしまいますが、毎回手でコマンド実行するよりははるかにいいですね。

基本的にはHMRが使えるVite サーバ上で作業して、hosting エミュレータ上で動作確認・微調整をする際にwatch モードで自動ビルドさせようと思います。

以上です。あなたのお役に立てれば幸いです。

Vite で作ったアプリで環境変数を扱いたい – .env にVITE_をつけて記述する

皆様こんにちは、ウチイダです。

ここしばらくReact をキャッチアップしています。

数年前にすこしだけやってみたときは全くできなかったのですが、Vue とかAngular 挟んだら雰囲気がわかるようになりました。

その間にReact 自体も理解しやすくなってきてるのかなと思います。

hooks使わないコードとか、クラスコンポーネントのライフタイムサイクルとかはいまでもよくわからないです。以前はもっと難しかったんだろうな…

さて、今回はViteで環境変数を使う場合のTipsです。

vite における環境変数の取り扱い

  • vite は、デフォルトでvite.config.ts と同じ階層にある.env ファイルのうち、VITE_ から始まる環境変数を読み込みされる
  • 読み込みするファイルのディレクトリは、vite.config.ts のenvDir プロパティで設定できる
  • アプリケーション内からこの環境変数を利用する場合は、import.meta.env. と記述する
  • process.env からは利用できないので注意!
# 以下の変数はVite で読み込みされ、参照できる
VITE_VAR_TEST='this is available'

# VITE_ で始まらない変数は読み込みされない
UNAVAILABLE_VAR_IN_VITE='this is unable'

参考

わかりやすい日本語でバッチリ公式ドキュメントに書いてあります。

Vite の公式ドキュメントはわかりやすいのでおすすめ、が最も有益なTipsだったかもしれません。

以上です。あなたのお役に立てればうれしいです。

ESLint の初期設定時、Airbnb のスタイルガイドが選択肢に表示されない – 手動インストールする

みなさんこんにちは、ウチイダです。

最近フロントエンドをきちんと学ぼうと思って、Reactのキャッチアップを進めています。

せっかくなのでTypeScriptで開発するようにしているのですが、その際の環境構築でつまづくことがあったので書き留めておきます。

環境

  • Windows 11 21H2
  • WSL2 Ubuntu20.04
  • Node.js v18.12.0
  • npm 8.19.3

事象:Airbnbのスタイルガイドを選択できない

JavaScriptのスタイルガイドとしてポピュラーなものに、Airbnb が作成しているものがあります。

これをESLintでのチェックに利用しようと思いました。

ESLint を導入する際、以下のコンフィグファイルの初期化コマンド を実行します。

$ npm init @eslint/config 

手順を説明しているページなどを見ると、スタイルガイドの選択時にAirbnbが出てくるようだったのですが、ウチイダの環境だとそれが表示されませんでした。

選択肢が2つしか表示されない

原因:AirbnbのスタイルガイドがTypeScriptに対応していないため

初期設定を行うコマンド eslint-config で行われた修正が原因でした。

ここで、TypeScriptに標準で対応していないスタイルガイドを表示しないように変更されていました。

https://github.com/eslint/create-config/pull/33

自分の作業手順漏れを疑っていたのですが、仕様変更だったんですね。。。

ちなみに、これは最近参加しているコミュニティの方が調べて教えてくれました。感謝!

対応:手動でAirbnbのスタイルガイドを追加する

自動でインストールしてくれないのは仕方ないので、とりあえずeslintrc の生成を済ませて、あとからAirbnbのスタイルガイドを読み込ませるように設定していきます。

1. eslintrc を生成する

スタイルガイドでStandard を選択して、設定を進めます。

次に「依存パッケージをインストールするか」を聞かれるので、no を選んでおきます。

Standardのスタイルガイドのパッケージを後から削除するのであれば、yes でもよいです。

$ npm init @eslint/config
✔ How would you like to use ESLint? · style

✔ What type of modules does your project use? · esm

✔ Which framework does your project use? · react

✔ Does your project use TypeScript? · No / Yes

✔ Where does your code run? · browser

✔ How would you like to define a style for your project? · guide

✔ Which style guide do you want to follow? · standard-with-typescript

✔ What format do you want your config file to be in? · JavaScript

Checking peerDependencies of eslint-config-standard-with-typescript@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^5.0.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0 typescript@*

✔ Would you like to install them now? · No / Yes

A config file was generated, but the config file itself may not follow your linting rules.
Successfully created .eslintrc.cjs file in /home/y-uchiida/develop/eslint_airbnb_none

2. Airbnb のスタイルガイドのパッケージを追加する

npm で、スタイルガイドのパッケージを導入します。

Airbnb のTypeScript のスタイルガイドは本家の設定の拡張なので、本家も含めてインストールします。

$ npm install --save-dev eslint-config-airbnb eslint-config-airbnb-typescript

3. eslintrc にスタイルガイドを読み込ませる

eslintrc を編集して、Airbnb のスタイルガイドを読み込みさせます。

    "extends": [
        "plugin:react/recommended",
        // "standard-with-typescript" // standard スタイルガイドは使わないので消す
        'airbnb', // 追加
        'airbnb-typescript' // 追加
    ],

ちなみに、Reactのプロジェクトかそうでないかによって、利用するパッケージが違うので注意が必要です。

詳しくはGitHubのREADMEをご確認ください…

https://github.com/iamturns/eslint-config-airbnb-typescript#setup

まとめ

ESLintの初期設定を自分でやったことがなかった&比較的最近の変更で、見つかる情報と齟齬があった(Airbnbが出てくると書いてあるものが多かった)ことでハマってしまいました。

ツールチェイン周りのキャッチアップは大変です…

ちなみに、ウチイダと同じ疑問を持った人がGitHubでissueを立てていました。

やり方を覚えてしまえばなんてことはないですが、手作業インストールするのちょっとだけ面倒ですね…

上記のissueの中で、「将来的に –config オプションを実装する予定があるので、それができたら簡単になるよ」といった旨のコメントがついていました。

https://github.com/eslint/create-config/issues/35#issuecomment-1216457480

早く利用できるようになるといいですね。

それでは以上となります。あなたのお役に立てれば幸いです。