Mission-Street.

2020-05-28

東京都 新型コロナウイルス感染症対策サイトを読む その1

プログラミングに関して何か学習しようと思った場合、最も手っ取り早いのは以下の2つだと思っている

  • なんか作る
  • OSS読む

何かアイデアがあれば作って学ぶのはいいが、常に何かアイデアがあるわけでもないので
適当に有名なOSSを漁ってコードを読むのが考える時間も少なくて便利
最近はUdemyとかもいいね

色々あってフロントエンド周りの技術力を強化したくなったので、東京都 新型コロナウイルス感染症対策サイトのコードを調べてみようと思った
ちなみにNuxt.jsについてはそこまで深い知識があるわけではない(Vue.jsはちょっとわかる)

開発環境の準備

簡単

ちなみにプロジェクトルートを見ると、VagrantやDockerも使えるっぽいので、Docker-composeでも起動してみる
(Vagrantは昔使ったことあるけど、もう何も覚えてないのでスルー)

やっぱ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
  • tsconfig.json
  • nuxt.config.ts
    • nuxt.jsの設定ファイル
    • これはいつか詳細に見たいところ
  • nuxt-i18n-config.ts
    • 多言語対応に関するファイル

とりあえずこんなところだろうか
過去のPRとか参考になるので色々と勉強させていただこう

参考