【入門】コピペで作るReact NativeでRSSニュースアプリ
突然ですが、iOSアプリを爆速で作成する方法を知ってますか？
答えは『React Native x Expo』です
みんなの悩み
「 アプリを作るのは、むずかしそう ... 」
「 Swiftじゃないの ... ？ 」
「 Reactも触ったことないけど大丈夫 ... ？ 」
こう思っている人が多いのではないでしょうか？
私もそうでした笑
でも実際に作成してみて、
簡単にハイクオリティなアプリが作成できることができました
React Nativeは『フロントエンド技術』のみでアプリを作れます。
【つまりアプリ技術と一緒にフロントエンド技術が身に付く】
まさに、一石二鳥 ← ⭐️Reactのすごいところ⭐️
みんなの悩み、その2
「で、でも、作るのむずかしいのでは。。。？」
そんな悩みを持つ人のために、コピペでOKなnoteにしました
iPhoneアプリを作成したいけど難しそうという方に
10,000文字越えの渾身Noteをどうぞ！初回は一時無料です！
〰〰〰〰〰〰今回作るアプリ〰〰〰〰〰〰
コピペで作るアプリシリーズ
1/3 ... ニュース記事の取得 & 表示するアプリ：300 → 一時無料
2/3 ... 引っ張ってニュースを更新する機能作成：600 → 500円
3/3 ... 記事をあとで読む、メモ機能作成：800 → 500円
💡この記事だけで、基本的な動作はOKです💡
〰より実践的なアプリを作成したい "限定" 〰
コンビニおにぎりの料金くらいで、あとの記事が読めます↓↓↓
1/3 ... ニュース記事の取得 & 表示するアプリ ← イマココ
2/2 ... 引っ張ってニュースを更新する機能作成
3/3 ... 記事をあとで読む、メモ機能作成
🚨本記事は、下記のように絵文字を使います
✅ ... チェックポイント
✍️ ... コピペポイント
🚨 ... 重要ポイント
今回はRSSニュースアプリを作ります。
RSSとは、サイトの記事を取得する機能でニュースアプリの基本技術です。
本書の流れ
1. はじめに
2. 環境構築（Expo cliのインストール）
3. Expoアプリの作成
4. ホーム画面、詳細の作成
5. 画面遷移の作成
6. RSSの設定
1. はじめに
想定読者
・プログラミングはしたことあるけど、得意ではない人
・iPhoneアプリを作ってみたいけど、何をしたらいいかわからない人
・React Nativeは聞いたことあるけど、使ったことない人
本記事のゴール
・React Nativeで、イチからアプリが作れる
・Expoの使い方がざっくりわかる（重要）
・基本的な画面遷移がわかる（React Navigatorを利用）
前提となる知識
・Npmを使ったパッケージ管理
Expoとは...
React Nativeを使ってiPhoneアプリをかける便利フレームワークです
⭕️ Expoを使うメリット1 ... iPhoneアプリを簡単に書くことができる
普通はNativeアプリを書くための設定をしなければいけません
⭕️ Expoを使うメリット2 ... ディレクトリ構成に迷わない
アプリセットアップを行った段階で、ディレクトリ構成ができています
❌ Expoを使うデメリット ... 複雑な処理をしたい時、ネイティブのコードを書かなくてはならない時がある
またReact Nativeは、Reactを使って、プログラミングします
Reactについて、細かい記述は省きます
2. 環境構築（Expoコマンドの導入, expo-cli）
環境構築でやること
✅ 1. Expoコマンドをインストール
✅ 2. expoのアカウントを作成する
✅ 2.1. Expoコマンドをインストール
✍️下記のコマンドを実行していきましょう
# (1) expoのコマンドを入れる
$ sudo npm install -g expo-cli
# (2) バージョン確認（小文字のvだとエラーになる）
$ expo -V
4.0.15✅ 2.2. expoのアカウントを作成する
こちらでアカウントを作成しましょう
3. Expoアプリの作成（初期設定）
さっそく、Expoをつかってアプリを作成していきましょう！！
初期設定の流れ
✅ 1. initコマンドを叩く
✅ 2. 設定項目を決めていく
✅ 3. アプリを開く
✅ 3.1. initコマンドを叩く
✍️ expoアプリを作成するのは、下記のコマンドだけです！
// (叩くコマンド)
$ expo init <アプリケーション名>
// 例. コピペ用（アプリケーション名 ... rss-application）
$ expo init rss-application✅ 3.2. 設定項目を決めていく
initコマンドを打ち込むとテンプレートを選ぶ項目が出てきます
💡下記が設定項目です
----- Managed workflow -----
・blank ... 何も設定されていない状態からスタート
・blank (TypeScript) ... TypeScriptで記述する設定以外、なにも設定されていない状態からスタート
・tabs (TypeScript) ... TypeScriptで記述する設定と、タブによるページ遷移の設定が済みからスタート
----- Bare workflow -----
・minimal ... 何も設定されていない状態からスタート（bare workflow）
・minimal (TypeScript) ... TypeScriptで記述する設定以外、なにも設定されていない状態からスタート（bare workflow）
🚨初心者の方は『Blank』で始めることをオススメします！🚨→ 自分で設定をすることで理解できるため
$ expo init rss-application
┌─────────────────────────────────────────────────────────────────────────┐
│ │
│ There is a new version of expo-cli available (4.0.17). │
│ You are currently using expo-cli 4.0.15 │
│ Install expo-cli globally using the package manager of your choice; │
│ for example: `npm install -g expo-cli` to get the latest version │
│ │
└─────────────────────────────────────────────────────────────────────────┘
? Choose a template: › - Use arrow-keys. Return to submit.
----- Managed workflow -----
❯ blank a minimal app as clean as an empty canvas
blank (TypeScript) same as blank but with TypeScript configuration
tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript
----- Bare workflow -----
minimal bare and minimal, just the essentials to get you started
minimal (TypeScript) same as minimal but with TypeScript configuration↓（blankで設定をすすめると ... ）
$ expo init rss-application
┌─────────────────────────────────────────────────────────────────────────┐
│ │
│ There is a new version of expo-cli available (4.0.17). │
│ You are currently using expo-cli 4.0.15 │
│ Install expo-cli globally using the package manager of your choice; │
│ for example: `npm install -g expo-cli` to get the latest version │
│ │
└─────────────────────────────────────────────────────────────────────────┘
✔ Choose a template: › blank a minimal app as clean as an empty canvas
✔ Downloaded and extracted project files.
🧶 Using Yarn to install packages. You can pass --npm to use npm instead.
✔ Installed JavaScript dependencies.
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following yarn commands.
- cd rss-application
- yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- yarn android
- yarn ios
- yarn web初期設定終了！🎉
✅ 3.3. アプリを開く
エディタで『rss-application』を開きましょう
✍️ VSコード上でターミナルを開きましょう
// (1) VSコード上で、下記を押す
command + shift + p
// (2) terminalと入力
terminal
// (3) Terminal: Focus Terminalを選択
✍️ターミナル上で下記を打ち込み『アプリを起動』しましょう
$ yarn ios
（許可を求められたら『OK』を押しましょう）
するとchromeが起動し、iPhoneシミュレーターも起動するはずです
（expo のログインが求められたら、ログインします）
4.ホーム画面、詳細の作成
アプリを作成した後のディレクトリ構成は下記です
✍️画面遷移を作成したいので下記を作成しましょう
・screens ... ディレクトリ
・Home.js ... ファイル（ホーム画面）
・Detail.js ... ファイル（詳細画面）
作成後のディレクトリ構成
5. 画面遷移の作成
上記で画面を作成したので、実装していきましょう
🚨画面遷移にはreact-navigatorを使います
react-navigatorはバージョンによって実装方法が異なり、今回は現段階の最新5系を利用します（https://reactnavigation.org/docs/getting-started ）
✍️まずは画面遷移に必要な『react-navigator』ライブラリをインストールするために、コマンドを叩きましょう
# (1) React Navigationの追加
$ yarn add @react-navigation/native
# (2) Expoの管理ライブラリとして、モジュールを追加
$ expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
# (3) React Navigationの画面遷移（stackは、ページ遷移）を追加
$ yarn add @react-navigation/stack✍️App.jsの編集
import React from 'react';
import {StyleSheet} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {HomeScreen} from "./screens/Home";
import {DetailsScreen} from "./screens/Details";
export default function App() {
const Stack = createStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});✍️Home.jsの編集
import React from "react";
import { Button, View, Text } from 'react-native';
export const HomeScreen = ( {navigation} ) => {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="GO TO Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}✍️Details.jsの編集
import React from "react";
import {Text, View} from 'react-native';
export const DetailsScreen = () => {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}これで基本的な画面遷移は完了です。
これに修正していく形で、実装を進めていきます。
6. RSSの設定
🚨RSSは特定サイトの更新情報を取得する仕組みです
RSSの設定の流れ
✅ 1. RSSで情報を取得するサイトを決める
✅ 2. 必要なライブラリをインストールするコマンドを打つ
✅ 3. Home.jsのコードを修正する
✅ 4. Details.jsのコードを修正する
✅ 6.1. RSSで情報を取得するサイトを決める
RSS検索サイトで『RSSのURL』を取得しましょう
→ https://berss.com/feed/Find.aspx
試しに『 https://tech-parrot.com/ 』を検索してみてください
→ https://tech-parrot.com/feed/
このように検索できるサイトであれば、RSSフィードできます
本Noteでは、こちらの『https://tech-parrot.com/feed/』を使っていきます
✅ 6.2. 必要なライブラリをインストールするコマンドを打つ
RSSは、そのままでは利用できません
そのため、構造分析するライブラリをインストールします
✍️ react-native-xml2jsのインストール
$ yarn add react-native-xml2jsまたRSSで取得したページは、webview（ウェブビュー）というwebページを表示する機能を使って表示します。
✍️そのため、こちらもインストールしておきましょう
$ yarn add react-native-webview
$ react-native-elements✅ 6.3. Home.jsのコードを修正する
RSSを指定し、最新の記事一覧を取得するコードを作成します
RSSの結果は配列で取得されるので、もとのコードからの変化を確かめてみてください
✍️こちらがコードです
import React, {useState, useEffect} from "react";
import { Button, View, Text, TouchableOpacity, FlatList, RefreshControl, StyleSheet } from 'react-native';
import {ListItem} from 'react-native-elements';
import xml2js from "react-native-xml2js";
export const HomeScreen = ( {navigation} ) => {
const [rssList, setRssList] = useState();
const fetchRss = async () => {
await fetch('https://tech-parrot.com/feed/')
.then(res => res.text())
.then((xml) => {
const parser = xml2js.Parser();
parser.parseString(xml, (err, result) => {
setRssList(result.rss.channel[0].item);
})
})
}
useEffect(() => {
fetchRss()
}, [])
return (
<View style={styles.container}>
<FlatList
ItemSeparatorComponent={ () => <View style={ styles.separator } /> }
data={ rssList }
renderItem={({ item }) => (
<ListItem>
<TouchableOpacity onPress={() => {
navigation.navigate('Details', { item: item })
}}>
<View style={ styles.row }>
<Text style={ styles.title }>{ item.title[0] }</Text>
<Text style={ styles.link }>{
new Date(Date.parse(item.pubDate[0])).toLocaleDateString('ja') }</Text>
</View>
</TouchableOpacity>
</ListItem>
)}
keyExtractor={ item => item.link[0] }
/>
</View>
);
}
const styles = StyleSheet.create({
base: {
padding: 0,
},
body: {
backgroundColor: '#fff',
},
header: {
color: '#fff',
fontSize: 20,
fontWeight: '500',
},
container: {
flex: 1,
backgroundColor: '#FFF',
},
row: {
flex: 1,
paddingHorizontal: 10,
paddingVertical: 5,
},
title: {
color: '#000',
fontSize: 16,
},
link: {
color: '#db7093',
fontSize: 12,
},
separator: {
flex: 1,
height: 1,
backgroundColor: '#ddd',
},
});✅ 6.4. Details.jsのコードを修正する
Details.js では、Home.jsで取得したブログ情報を『Webview』で表示しています。
✍️こちらがコードです
import React from "react";
import WebView from "react-native-webview";
export const DetailsScreen = ({route, navigation}) => {
const { item } = route.params
console.log(route)
return (
<>
<WebView
source={{ uri: item.link[0] }}
stye={{ marginTop: 0 }}
/>
</>
);
}これでRSSについて完成しました。
アプリケーションを動かしましょう
✍️アプリを動かす
$ expo start --iosこの記事が気に入ったらサポートをしてみませんか？