すずかのプログラミング勉強記

元教員からエンジニアを目指す、プログラミング勉強記録です。

トップ > JavaScript > 自作のnpmパッケージを公開しました

自作のnpmパッケージを公開しました

JavaScript

FJORD BOOT CAMPでは「自作のnpmをパッケージサイトへ公開する」という課題があります。

私は学校コード検索 APIを使用して、コマンドラインツール「gakkou-search」を作ったので、成果物について書きたいと思います。

ソースコード：GitHub - SuzukaHori/gakkou_search www.npmjs.com

できること

校種・都道府県・設置区分・キーワードを指定して、日本の学校を検索します。 Image from Gyazo

特定の学校の選択すると詳細を表示します。「地図を開く」を選択するとブラウザが立ち上がり、Googleマップが表示されます。 Image from Gyazo

作った理由

Web APIを使ってみたかった

今までWeb APIを触ったことが無かったため、今回は使うと決めていました。 色々と検索して学校コード検索APIを見つけ、単純に学校を検索するのが面白かったこと・リリースされたばかりであることなどからこのAPIを使ってみたいと思いました。

学校データの活用に興味があった

教員時代、他校の住所・電話番号・地図などの学校情報を検索する機会が結構ありました。 似たような学校名が多いため、検索しても一発で出てこないことがあります。

例：「川越高校」の検索結果
埼玉県立川越高等学校・三重県立川越高等学校・川越市立川越高等学校・埼玉県立川越総合高等学校・埼玉県立川越女子高等学校・・・・などまだまだある。

いつか学校のデータがわかりやすく管理されて、先生たちの仕事が楽になったらいいなという気持ちで作りました。

起動方法

  • 「学校コード検索 API」への登録・トークンの生成
    学校コード検索 APIのウェブサイトにアクセスし、アカウントを作成します。 ログイン後、「トークンの一覧」ページから「トークンの生成」を行ってください。

  • API トークンを環境変数に設定
    export GAKKOU_SEARCH_API_TOKEN='あなたのAPIトークン'を実行し、トークンを設定します。

  • インストール・起動
    npx gakkou-searchを実行します。

工夫したこと

地図を開けるようにした

学校情報の詳細画面で「地図を開く」を選択すると、Googleマップが開きます。 地図を開く画面のスクリーンショット

実装は以下の方法で行いました。

  • 住所データからGoogleマップのURLを作る
    Googleマップの検索のURLhttps://www.google.com/maps/search/の後ろに住所を指定すると、学校の地図が表示できました。 URLの生成にあたっては、url-joinと encodeURIを使用しました。
  • ターミナルからWebブラウザを開く
    child_processを利用してシェルコマンドのopenを実行し、Webブラウザで地図のURLを開くようにしました。

情報を取捨選択した

元のAPIでは、取得できる情報や指定できる検索条件がもっと多いのですが、シンプルに検索するため使用頻度が低いと思われるものを省略しました。（検索条件の「郵便番号」や詳細情報の「本校 or 分校」など）

悩んだのは「校種」で、「義務教育学校」や「専修学校」は一般の人には馴染みが薄いかもしれないため、当初省略することを考えました。しかし「世の中には色々な学校がある」のを知ってもらうのもいいと思い直し、13種類から選択できるままにしました。

学校種リスト

  ["0", "指定しない"],
  ["A1", "幼稚園"],
  ["A2", "幼保連携型こども園"],
  ["B1", "小学校"],
  ["C1", "中学校"],
  ["C2", "義務教育学校"],
  ["D1", "高等学校"],
  ["D2", "中等教育学校"],
  ["E1", "特別支援学校"],
  ["F1", "大学"],
  ["F2", "短期大学"],
  ["G1", "高等専門学校"],
  ["H1", "専修学校"],
  ["H2", "各種学校"],

例外処理

原因不明で何度やってもエラーになることを絶対に避けたいと思いました。最低限困らない例外処理として、「APIトークンの未設定」「APIトークンの間違い」「通信の失敗」などは日本語でメッセージが出るようにしました。

苦労したこと

どのAPIを使って何を作るか決めること

学校検索APIの他にも沢山のWeb APIを触り、うち2つでは実験的なnpmを作ってみました。しかし、使ってみると想像通りに動いてくれるものは思ったより少なかったです。
APIを使う場合は、作りたいものに対する十分な機能を持っているかを下調べする重要性を感じました。

何の機能を作って何を作らないのか決めること

当初の予定では、詳細検索と簡易検索の2つを作ったり、電話番号を取得できたりようにする予定でした。加えて、APIトークンの設定は面倒なので、本当はログイン不要のAPIを探したかったです😅
ただ、かけられる時間と天秤にかけて、やりたいことが実現できる最低限の機能に絞りました。

Enquirerの仕様を把握すること

対話型のCLIを作れるライブラリです。今回は単一選択や自動補完・ユーザの入力を受け付けるものなど、複数の質問形式を使用しました。
基本的に使いやすかったのですが、質問文が大量に出るなどバグ出てしまい、英語のREADMEや関連するIssueを調べるのが大変でした。

感想

何を作るか決めるところから取り組むのは初めてでしたが、非常に楽しかったです！

やりたいことの全てが実現できたわけではありませんが、初めて自分の力でプログラムを作り、それを公開して見てもらった時の喜びはひとしおでした✨

自作サービスで何を作るか悩み中ですが、作りたいものが決まれば楽しく開発できる気がしています。引き続き頑張ります。