$$ \huge\textsf{\textbf{\color{#7caf4c}世界の都市の天気提供サービス}} $$

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0fb2db70-d069-479e-8cd8-3f44fba669d3/blank.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0fb2db70-d069-479e-8cd8-3f44fba669d3/blank.png" width="40px" /> 大学プログラミングサークル（GDSC DEU）React初級クラスで行った実習プロジェクトです。 全世界の都市の天気をリアルタイムで確認することができます。

</aside>

World weather

https://github.com/thelight0804/World-weather-React

🖥️ アーキテクチャ

🛠️ 技術スタック

React

Reactを利用すると、Single Page Application（SPA）の開発がより容易になります。SPAはページ全体を再読み込みすることなく、必要なデータのみを更新し、ユーザーに提供する技術です。これにより、ユーザーが都市のボタンをクリックするたびに、直ちに天気情報を提供できるようになります。

コード例

<Button
  //...
  onClick={() => {
    setCity(cities[index]);
    setSelected(cities[index]);
    setEngCity(cityToEnglish(city));
  }}
>{city}</Button>

ユーザーがボタンをクリック(onClick)した際に、ページを新しく更新せずに、データ(state)を動的に更新して画面に表示します。

React Bootstrap

フロントエンドを初めて学ぶ勉強会のメンバーにとって、CSSにまだ慣れていないため、スタイルを適用する作業が複雑で難しく感じられるかもしれません。そんなCSSの作業負担を減らすために、React Bootstrapを採用しました。