2020-05-28
東京都 新型コロナウイルス感染症対策サイトを読む その1
プログラミングに関して何か学習しようと思った場合、最も手っ取り早いのは以下の2つだと思っている
- なんか作る
- OSS読む
何かアイデアがあれば作って学ぶのはいいが、常に何かアイデアがあるわけでもないので
適当に有名なOSSを漁ってコードを読むのが考える時間も少なくて便利
最近はUdemyとかもいいね
色々あってフロントエンド周りの技術力を強化したくなったので、東京都 新型コロナウイルス感染症対策サイトのコードを調べてみようと思った
ちなみにNuxt.jsについてはそこまで深い知識があるわけではない(Vue.jsはちょっとわかる)
開発環境の準備
- 今回はコントリビュートを目指すわけじゃないので、東京都 新型コロナウイルス感染症対策サイトを普通にclone
.node-version
が10.19.0
なので、入ってなければ入れる(nodenv install 10.19.0
)yarn
を実行する(そこそこ時間がかかる)yarn dev
でサーバーを起動する- http://localhost:3000/にアクセスする
簡単
ちなみにプロジェクトルートを見ると、VagrantやDockerも使えるっぽいので、Docker-composeでも起動してみる
(Vagrantは昔使ったことあるけど、もう何も覚えてないのでスルー)
docker-compose up --build
を実行- http://localhost:3000/にアクセスする
やっぱdockerは便利やね
これで動かしながらコードを調査できるようになった
とりあえずファイルをみていく
やっぱアプリルートからファイルを確認していくでしょう!ということで、ルートに置かれているファイルから眺める
〇〇.md
- 貢献の仕方とか、貢献者とか、コーディング規約とか、派生サイトのリストとか、そういったドキュメントがルートに置かれている
- 個人的にはルートはファイル増えまくって荒れがちなので、適当なディレクトリに突っ込みたい
package-json
- おなじみのファイル
husky
とlint-staged
使ってコミット前にlint流している- 思ったより使っているパッケージ少ない感じ
.env.〇〇
- 環境変数を
.env.<env-name>
ファイルに記述して@nuxtjs/dotenv
で読み込むようになっているPR .env
ファイルはnuxt.config.ts
で利用されていて、modules
で読み込まれている['@nuxtjs/dotenv', { filename:
.env.${environment}}]
- 環境変数を
.babelrc
- babelの設定ファイル
- 最初の
create-nuxt-app
コミット以降変更がないのでデフォルト設定のまま - 環境がテストの時だけ設定が適用されるようになっている
@babel/preset-env
は、出力したいECMAScriptのバージョンを指定するためのプリセット- 基本的にサポートしたい範囲(ブラウザバージョンやブラウザシェア、サポートの可否など)を指定する
- 指定内容に応じて適切なバージョンのJSに変換されるようにしてくれる
node: "current"
はBrowserslistで現在使用されているNode.jsバージョンを指す- 参考: https://qiita.com/koedamon/items/92c986456e4b9e845acd#babelpreset-env
.dockerignore
Dockerfile
docker-compose-yml
- おなじみDocker関係のファイル
- めっちゃ色々やっているのかと思いきや、大変シンプルな内容でわかりやすい
- ポートは3000番
.editorconfig
- https://editorconfig.org/これ
- スペースは半角いくつだとか、そういう設定を開発に関わる人全員で統一しようというもの
- VSCodeやAtomやVimではプラグインを入れないといけないので、このファイルを見かけたらちゃんとプラグインを入れましょう(入れた)
- デザイナーさんとか、エンジニア界隈の話がよくわからない人とかいたら結構いいかも
.env.dev-no-axe
- そもそも
axe
とは何なのかだが、アクセシビリティのことのようだ - パッケージでは
vue-axe
というものが入っていた - https://yamanoku.net/vue-a11y/より引用すると
あらゆる人がアクセスできるようにするとはどういうことかというと、デバイス操作に慣れない人でも簡単に閲覧できるようにしたり、難しい言い回しを避けて理解しやすくしたり、コントラストを調整して閲覧しやすいデザインにしたり、音声読み上げをしてくれるスクリーンリーダーといった支援技術を使うために考慮するといったことです。
- 東京都が公開しているサイトなので、全国民が誰でも簡単に確実に情報にアクセスできるようになっていないといけないと言うことか。普段の開発で意識したことがなかったので、大変考えさせられた
- なお、PRによると、開発環境でこのアクセシビリティチェックがめちゃ重いらしく、無効化できるようにした際に作成されたファイルのようだった
- アクセシビリティチェックが有効の場合、
plugins/axe.ts
でロードされ、Vueに取り込まれる - ちなみに
accessibility
はa11y
と書かれるらしい。i18n
と同じやね - 参考 => Vue.jsから考えるアクセシビリティについて
- そもそも
.node-version
.nvmrc
nodenv
nvm
を使ってNode.jsのバージョンを固定しているよく見るやつ- どれを使うのがいいんだろうね?
.eslintignore
.eslintrc.js
- そのまんま
eslint
関係のファイル。JS版rubocopみたいなもの .eslintignore
はgitとかでもおなじみ無視するファイルの一覧- 特に何もしなくても
.eslintrc.js
と同じディレクトリに置いておけばいいらしい
- 特に何もしなくても
.eslintrc
は設定ファイル、package.json
に書いたり.eslint.json
に書いたりできる(お好みでどうぞ)- 御託はいいからさっさと使いたい人はこの辺の記事を見るとよさそう
- そのまんま
.gitignore
- エンジニアやっててこれ知らない人はいない
.prettierrc
- Prettierを使っているので、その設定ファイル
create-nuxt-app
すると最初から入ってるっぽい.eslintrc
でprettierをextendしてるので、eslintと組み合わせて使われている- prettierはあくまでフォーマッターなので、コードの品質部分までは見ない(そこはlinterの仕事)なので、eslintと組み合わせて使うのが一般的
.jest.config.js
- その名の通りjestの設定ファイル(これもcreate-nuxt-appデフォルトのまま)
moduleNameMapper
はjestでaliasを使うための設定(実際のパスとマッピングを行なっている)moduleFileExtensions
はテスト対象となるファイルの拡張子transform
は.vueやES6のファイルを変換してテストを行うための設定 => 参考collectCoverage
でカバレッジを取れるようにする設定で、collectCoverageFrom
で対象となるファイルを絞っている
netlify.toml
- netlifyにデプロイされているので、その設定ファイル
- 404ページはデフォルトだとnetlifyオリジナルのページになるが、ちゃんとデザインしたページに遷移するような設定が書かれている
- 参考PR
pre-commit.sh
- huskyによってコミット前に実行されるシェルスクリプト
- どうも変更されては困るファイルが変更されていた場合はエラーとする処理が書かれている模様
- https://qiita.com/ryounagaoka/items/3e7a1b44d43ad0547d4f
tsconfig.json
- Typescriptの設定ファイル
- 全オプションを理解しようとしている人がいるので詳細はそちらを参照(あとで見よう)
nuxt.config.ts
- nuxt.jsの設定ファイル
- これはいつか詳細に見たいところ
nuxt-i18n-config.ts
- 多言語対応に関するファイル
とりあえずこんなところだろうか
過去のPRとか参考になるので色々と勉強させていただこう