[JP] Svelteで天気確認アプリを作ってみましょう
--
Svelteはすごく簡単で軽いUIフレームワークと聞いたことがあります。それで簡単なプロジェクトを通じてsvelteを勉強してみようと思いました。
Change Log
- 2020.02.18 環境変数からAPIキーを獲得するように変更しました。
事前準備
node 12.13.1 バージョンを使用しました。
天気情報を取得するためにOpenWeatherMap APIを使うつもりです。下のサイトに会員登録して得られるAPIキーを覚えておいてください。
APIの使い方が詳しいない方はMDN web docs about Fetch APIを参考してください。
プロジェクトを始まる前に
僕は各セクションの一番最後にhash値を書いておくつもりです。セクションが終わった時のソースコードが必要な方は下記のコマンドを叩いてください。
テンプレート利用して新しいプロジェクト生成
Svelteは新しいプロジェクトを生成する時に使えるテンプレートを提供しています。たった1行のコマンドでテンプレートソースコードを使うことができます。
テンプレートコードを実行するとHello Worldが実行されます。確認してみたいという方々はプロジェクトのルートディレクトリーから下記のコマンドを実行し、ブラウザーからhttp://localhost:5000にアクセスしてみてください。
hash value: be32f0e
簡単なアプリ設計
実際にコードを作成する前に簡単にアプリを設計してみましょう。ただ数行の設計があるとプロジェクトを進行する時にその方向性を失う可能性をなくすことができるので、設計するのは本当に重要だと思います。
- 都市名を入力するために使われる1つのinputフォームがあります。
- 天気カードを追加する時に使われる1つのbuttonがあります。
- 都市名、天気アイコン、現在気温が天気カードに表示されます
- 1.5秒以上天気カードをクリックしている場合、削除のためのUIが表示されます。
- Deleteを選択した場合、天気カードは削除されます。
下のイメージはアプリを作る前に簡単に描いてみたUI図です。
SASSプリプロセッサインストール
sassプリプロセッサではsvelte-preprocess-sassを使おうとしました。
このパッケージを使うため、/rollup.config.jsファイルを修正する必要があります。
この修正を通じてscss文法がコンポーネントのスタイル部分で使えるようになりました。
SASSプリプロセッサの動作確認のため/src/App.svelteファイルを修正してみました。
ブラウザーからフォントの色が変わったことが確認できましたら、SASSプリプロセッサが正しく動作しているということです。
hash value: cdae25d
ヘッダー追加
アプリのヘッダーを追加する前、/public/global.cssファイルを修正しました。
/src/Header.svelteコンポーネントを生成します。
コンポーネントを生成した後、/src/App.svelteからコンポーネントを使用してみましょう。
import文を通じて簡単にコンポーネントが使えます。
hash value: a865e3d
Store追加
公式ドキュメントではsvelte/storeモジュールを次のように定義しています。
A store is an object that allows reactive access to a value via a simple store contract.
あるコンポーネントからある値にアクセスするためにはStoreを追加する必要があります。Storeを使用するために/src/store.jsファイルを追加しましょう。
subscriptionを通じて値を読んだり、修正したりするためにwritableをインポートしました。writable 은データを操作するために3つのメソッドを持っています。
1つ目のメソッドはsubscribeです。このメソッドはsubscriberたちに値の変化を知らせるために使われます。2つ目のメソッドはsetです。このメソッドはStoreの値をセットするために使われます。このメソッドはStoreの値を完全にリプレイスするため、単純にnew_valueだけを引数として受け入れます。3つ目のメソッドはupdateです。このメソッドもStoreの値を設定するためのメソッドです。しかしこのメソッドは関数を引数として受け入れるため、Storeの値を一部変更する必要がある時にはupdateメソッドを使用しなければなりません。
/src/store.jsファイルをもう一回確認してください。weatherListをエクスポートし、ファイルの内部には3つのメソッドが実装されています。1つ目のメソッドはsubscirbeで、このメソッドがどんなことをするのかは先をど説明したので省略します。2つ目のメソッドはaddで、天気情報を追加するために利用されるメソッドです。3つ目のメソッドはremoveで都市名を利用してStoreから天気情報を削除するために使用されます。僕はupdateメソッドを利用してaddとremoveメソッドを実装しました。
hash value: e10b3b5
検索フォーム追加
検索フォームを作る前にOpenWeatherMap APIのキーをアプリに追加しましょう。
キーをjsファイルを利用してアプリに追加しました。 (2020.02.18 時点のアプリでは環境変数からキーを呼び出すように変更しました。その方法に対してはこの記事の一番下の方に記録しておきました。)
/src/key.jsファイルを生成してください。
キーファイルを生成した後には/src/Search.svelteファイルを追加してください。 このファイルは天気カードをアプリに追加するための検索コンポーネントを定義するためのファイルです。ファイル内部には都市名を入力して天気情報を呼び出す時に使われるinputとbutton要素を追加しました。.
コンポーネントからStoreを使うためにweatherListをインポートしました。その後、Storeに天気情報を追加するための関数を定義しました。このファイルからは次の点に対して確認してください。
cityName変数をinput要素の値にバインドするためにはbind:value={cityName}という文法を使用しました。addWeatherInfo変数をbutton要素のクリックイベントにバインドさせるためにはon:click={addWeatherInfo}という文法を使用しました。- Storeの値をアップデートするために
addWeatherInfo変数内部からweatherList.addメソッドを使用しました。
Searchコンポーネントを/src/App.svelteから使ってみましょう。
hash value: ba5925e
Store 修正(Store定義時に誤りがありました。)
WeatherCardを実装しながら前に設計したweatherList.removeメソッドが不適切だと気づきました。なぜ適切ではないでしょうか？index値を得るために計算する必要がなかったからです。なのでremoveメソッドを次のように修正しました。
hash value: 2dc0b3d
天気カードの追加
input要素に都市名を入力しbutton要素をクリックすると天気情報を取得することができます。この情報はjsonタイプのデータなので天気カードにデータを表示させるのはとても簡単です。
データは下のような構造です。
天気カードのリストを表示させるためのBoardコンポーネントを作りましょう。/src/Board.svelteファイルを確認してください。
/src/App.svelteファイルにコンポーネントを追加しました。
都市の天気情報を検索すると、文字列になった天気情報がBoardコンポーネントに表示されます。表示される情報を天気カードコンポーネントで表示させるために/src/WeatherCard.svelteコンポーネントを追加しました。
このファイルではマウスイベントに対して詳しくみておいてください。最初の設計を実装するため、マウスイベントを作っておいたからです。
クリックイベントが発生した時間を測定し、その時間が1.5秒を超えた瞬間削除のためのUIが表示されます。
天気カードコンポーネントを生成した後には/src/Board.svelteを修正する必要があります。
プロパティーの名を書かなかったことを確認してください。Svelteは短い構文をサポートしています。{weather}という構文はweather={weather}構文と完全に一致します。
僕の初めてのSvelteアプリケーションが完成されました！
hash value: e3a9f85
2020.02.18 環境変数からAPIキーを獲得するように変更しました。
ファイルでAPIキーを管理するのはとても危ないことですね。もしGitHubなどにAPIキーをプッシュでもした瞬間、僕のAPIキーを全ての人々に公開され、誰でもそのキーを使うことができるからです。
そんな危険性があったので、僕のコードは修正しなければならないと思いました。（実は会社の上司のコードレビューからこれを指摘されました。）
replaceプラグインを追加しましょう。このプラグインはファイルに含まれている文字列を設定した文字列に置換してくれるプラグインです。
npm install @rollup/plugin-replace --save-devその後、src/key.jsファイルを修正しましょう。
export const key = 'API_KEY';最後に/rollup.config.jsファイルに追加したプラグインを使用するための設定を追加しましょう。
import replace from '@rollup/plugin-replace';
...plugins: [
replace({
'API_KEY': process.env.API_KEY
}),
],
...
これから、環境変数を利用してアプリが実行できるようになりました。下記のコマンドを入力して実行してみましょう。
API_KEY=<api-key> npm run devhash value: a212007
結論
Svelteはすごくシンプルですし、公式ドキュメントはSvelteを身につくために必要な情報が丁寧に書いてあります。もうちょと勉強したくなるUIフレームワークです。
