🔥Webサービス開発ログ Part 1 (Hello World with React Native for Web)

はじめに

本エントリはWebアプリの開発記録です。GraphQLを利用したサンプルアプリを作る過程を記録していきます。
ソースコードはGitHubにpushしています。

開発対象アプリ

名称

NewsApp(ä»®)

機能

だいたい下記のように考えています。

  • 1週間のニュースをまとめて表示する(ニュースをどこから取るかは未定)
  • ニュースにLikeボタンをつける
  • Likeをつけたニュースの一覧を見れる
  • コメント機能をつける(気が向いたら)
  • 認証機能をつけるかはまだ考えていない

対象クライアント

モバイル端末のWebブラウザを想定しています。

アプリの構成

現時点では、ざっと下記のように考えています。

フロントエンド

  • React Native for Web
  • Apollo Client

バックエンド

  • Firebase Realtime Database
  • Firabase Function
    1週間ごとに起動してニュースのデータを作ります。どのように定期的に起動するかは未定です。

プロジェクト作成

まずは、React Native WebでHello Worldを表示するところまで進めたいと思います。

最初にプロジェクトを作ります(最近yarnを使う派になりました)。

$ mkdir NewsApp
$ cd NewsApp
$ yarn init -y

webpackとreact-native-webに必要なパッケージを追加します。webpackは4.xを使います。

$ yarn add --dev webpack webpack-cli webpack-dev-server babel-core babel-loader babel-plugin-react-native-web babel-preset-react-native html-webpack-plugin
$ yarn add react react-dom react-native-web

ざっとpublic/index.htmlを書きます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>NewsApp</title>
</head>
<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
</body>
</html>

src/index.jsを書きます。Hello Worldだけです。

import React from 'react';
import { AppRegistry, View, Text } from 'react-native-web';

const App = () => (
  <View>
    <Text>Hello world!</Text>
  </View>
);

AppRegistry.registerComponent('App', () => App);
AppRegistry.runApplication('App', { rootTag: document.getElementById('root') });

webpack.config.jsを書きます。なるべくシンプルな設定になるよう、create-react-nativeを参考にゼロから書きました。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  devtool: '#eval-source-map',
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    alias: {
      'react-native$': 'react-native-web'
    }
  },
  module: {
    rules: [
      {
        test: /.js$/,
        include: [
          path.resolve(__dirname, './src'),
          path.resolve(__dirname, './node_modules/react-navigation'),
          path.resolve(__dirname, './node_modules/react-native-tab-view'),
          path.resolve(__dirname, './node_modules/react-native-paper'),
          path.resolve(__dirname, './node_modules/react-native-vector-icons'),
          path.resolve(__dirname, './node_modules/react-native-safe-area-view'),
          path.resolve(__dirname, './node_modules/@expo/samples'),
          path.resolve(__dirname, './node_modules/@expo/vector-icons'),
          path.resolve(__dirname, './node_modules/react-native-platform-touchable')
        ],
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [
              "react-native-web"
            ],
            presets: [
              "react-native", 
            ]
          }
        }
      }
    ]
  }
};

package.jsonにstartコマンドを追加します。

{
  "name": "newsapp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --open"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-react-native-web": "^0.8.6",
    "babel-preset-react-native": "^4.0.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-native-web": "^0.8.6"
  }
}

Hello Word!

ちゃんとHello Worldが表示されるかを確認します。

$ yarn start

img

正しく”Hello world!”が表示されました。以外とすんなりと動いてくれたので安心しました。

Please follow and like us:

コメントを残す

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