ウェブデベロッパーへのキャリアチェンジ〜6週目

最終更新日

tsumitate

こんにちは。ジュークです。

ここオーストラリアはすっかり春になり、毎日暖かくなりました。気持ちの良い風も吹き、1年を通し最も過ごしやすい季節になりました。家庭菜園の花も満開を迎え、小さな喜びがあります。

種から育てたパンジーです。

さて、8月に始めたウェブデベロッパーへのキャリアチェンジも6週目に突入。だいぶJavaScriptアレルギーも解消され、「理由はわからんがとりあえず動いているからヨシ!」「理由もわからんし動かない!」といった状況もかなり減少しました。エラーコードを読めばなんとなく「ああ、ここが問題なんだな」とわかる程度にはなった気がします。

さて、今週もまとめて行きます。

APIを使ってできること

前回のブログでも紹介しましたAPI。様々なデータベースやソフトウェアが外部連携できるようにする仕組みであり、多くのソフトウェアやオンラインサービスがAPIを一定範囲で無料、全機能の場合は有料で公開しています。

今回のコースでもいくつかのフリーAPIを使っており、その1つが下記のOpenWeatherです。

Сurrent weather and forecast – OpenWeatherMap

Get current weather, hourly forecast, daily forecast for 16 days, and 3-hourly forecast 5 days for your city. Historical weather data for 40 years back for any coordinate. Helpful stats, graphics, and this day in history charts are available for your reference. Interactive maps show precipitation, clouds, pressure, wind around your location.

日本を含む世界各国の気象情報を網羅したデータベースで、API利用で特定の都市の現時点での気象情報や予報データを抽出することができます。

実際に使うとこんな感じ

と、まあ説明をしたところでなかなか具体的なイメージは掴めにくいかもしれません。そこで、今週の課題で作った簡単なウェブサイトをご紹介します!

今回の課題は、ユーザが検索した都市名の天気予報を表示し、履歴に残す、といったものです。

①UIはこんな感じです。検索ゥ〜!

都市名を入力できるようになっています。

②都市名を検索します。

例えば、東京です。トーキヨー。




③すると!摩訶不思議!

すると、東京の現時点での気象情報(気温、湿度、風速、紫外線指数と、5日間の予報)
が表示されます。

④履歴も残せます!

2つ目の都市を検索すると、検索バー下部に履歴として追加されます。もちろん履歴をクリックすると、その都市の気象情報が再度表示されます。

と、いった感じで本来であれば膨大な気象情報のデータベースやファイルが手元にないと扱えない情報もAPIを用いればお茶の子さいさい!といった感じです。

ちなみに、存在しない都市やタイプミスの時はエラーメッセージを表示できるようにしたりしました。個人的に使っていて一番イライラするソフトウェアはエラーが起きてもどこにエラーがあるのか、どういうエラーなのか教えてくれないものですね。UXで腹が立つと時間もエネルギーも浪費しますので。



エラーが出た!えらいこっちゃあ!
最後に

HTML, CSS, JavaScript, API call の4つを理解できるようになると、だいぶできることの幅が広がったなという印象です。特にAPIは理解できるようになると、これまで自分のレポジトリにあるデータしか扱えなかったのが実質無限大のデータソースを自分のウェブサイトやアプリに落とし込むことができますね。最初に考えた人頭いいですね〜。

落ち着いたらGitHubのアドレスも公開予定です。その折には実際に触れていただけますと幸いです。

正直まだわからないことも多いですし、むしろわからないことの方が多いです。毎日1つずつ少しずつ自分のわかることの積み上げていく。それが今の自分が半年後の自分にしてやれる最大の貢献だと思います。

それでは今日はこの辺で。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


コメントする