とあるプログラマーの技術ブログ
Poker

Reactサンプルアプリ開発 プラニングポーカー (1)始める

管理人
4:52 pm

勉強のためのサンプルアプリ開発の過程で得た知識をまとめようと思い、ブログを始めたのだったけれど、全然できていなかった。もともとは星取表(スキルマップ)をサンプルの題材に考えていたが、少し難しそうだったのでプラニングポーカーに変更して改めて開発を始動。

メインとなる画面をまずはハリボテで作成した。こんな感じ。

メインの画面

いきなりReactコンポーネントで書いていくのは難しいので、まずはHTMLを作成してからReactコンポーネント化する手順で行ったが、フロントど素人なのでHTML書くのにも四苦八苦。Flexレイアウトとメディアクエリを使って、一応レスポンシブな感じにはしてみた。

ちなみに主な技術スタックは以下で考えている。

  • HTML5/CSS3
  • TypeScript
  • React
  • Python
  • Flask
  • Heroku
  • Redis

WebSocketによる双方向通信も実装しないといけないし、思ったより大変な気がしてきたが、ほとんどの技術が仕事では使ったことがないので楽しみではある。

今回の技術メモはwebpackに関して。webpackは本当に何も知らなくて、ググったサンプルを利用させてもらってなんとかやってみたが、複数のエントリポイントからそれぞれバンドルしたJSを出力する方法がなかなかわからなかった。

最終的には以下のようにすればよいことがわかった。entryをオブジェクトにして、outputfilename[name]を入れてあげればtop.bundle.js table.bundle.jsのように別々のファイルが出力されるのだな。

const path = require('path')

module.exports = {
    mode: "development",
    entry: {
        top: "./src/top.tsx",
        table: "./src/table.tsx",
    },
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: "[name].bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            }
        ]
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    devServer: {
        contentBase: "dist",
        open: true
    }
}

今回、開発の流れは以下のように進めている。

  1. 素のHTML/CSSでコーディング
  2. TSでReactコンポーネント化し、webpackdevServerで確認
  3. ローカルでflaskWebアプリを立ち上げて確認
  4. ローカルのGitにコミットし、git push heroku materHerokuへアップ

次はコンポーネントをもう少し作り込んでいこうと思う。

サンプル開発
%d人のブロガーが「いいね」をつけました。