$$ \huge\textsf{\textbf{\color{#dc645b}Subak Market}} $$

<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" /> 中古品販売アプリで必要な機能を実装してみたサイドプロジェクトです。

</aside>

https://github.com/thelight0804/subak/releases

🛠️ 技術スタック

React Native

Reactを学んでいるうちに、アプリ開発にも興味を持つようになり、React Nativeを使用しました。React NativeはJavaScriptを使って開発できるため、AndroidとiOSのモバイルアプリを同時に開発することが可能です。さらに、Reactのデベロッパーであれば、誰でも容易にアプリを開発できる利点があります。

コード例

<View style={shared.container}>
  //...
  <View style={styles.content}>
    <Image
      style={styles.image}
      source={require('../../assets/image/launch_screen.png')}
    />
    <View>
      <Text style={[styles.text, styles.title]}>あなたの近所のSubak</Text>
      <Text style={styles.text}>町だからできること</Text>
      <Text style={styles.text}>今すぐ地域を選んで始めましょう！</Text>
      //...
    </View>
  </View>
  //...
</View>

React NativeはReactと異なり、HTMLの文法の代わりに様々なコアコンポーネントを活用します。例えば、<View>はレイアウトを構成するコンテナとして、HTMLの<div>と類似しています。<Text>はテキストを表示しスタイリングするために使用され、これはHTMLの<p>タグと似た役割を果たします。

Axios

AxiosはHTTPリクエストを送信するために利用されるライブラリで、fetchと異なり様々なブラウザで互換性があり、データを自動的にJSON形式に変換してくれます。また、ページを再読み込みせずにデータの送受信することが可能です。メインページでユーザーが画面を下にスクロールする際、追加のポストデータを取得する機能を実装するためにAxiosを利用しました。

コード例

axios.get(`http://${Config.DB_IP}/posts?offset=${start*10}&limit=10`, {
  headers: {
    Authorization: `Bearer ${userToken}`,
  },
  timeout: 2000
})
  .then(response => {
    // リクエストが成功した場合
  })
  .catch(error => {
    // リクエスト中にエラーが発生した場合
  });

Axiosを利用してサーバーからポストデータを取得します。headersオブジェクトでユーザー認証を経て、安全にポストデータを取得できます。また、データの取得が成功した場合とエラーが発生した場合を区別して処理しました。

Redux

React Reduxは、複数のコンポーネント間でpropsを効率的に管理するために使用されるライブラリです。ユーザーデータを複数のコンポーネントで共有し、管理する目的でReduxを活用しました。