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

Poker サンプル開発

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

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

メインの画面

いきなり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へアップ

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

コメント

  1. […] Reactサンプルアプリ開発 プラニングポーカー (1)始めるReactサンプルアプリ開発 プラニングポーカー (2) モーダルダイアログReactサンプルアプリ開発 プラニングポーカー (3) 親コンポーネントへ反映Reactサンプルアプリ開発 プラニングポーカー (4) 他のコンポーネントとの相互作用Reactサンプルアプリ開発 プラニングポーカー (5) 画面遷移Reactサンプルアプリ開発 プラニングポーカー (6) AjaxでプレイヤーリストをフェッチReactサンプルアプリ開発 プラニングポーカー (7) 他のプレイヤーが参加できるようにするReactサンプルアプリ開発 プラニングポーカー (8) WebSocketで通知するReactサンプルアプリ開発 プラニングポーカー (9) Redisを使うReactサンプルアプリ開発 プラニングポーカー (10) Bidの通知Reactサンプルアプリ開発 プラニングポーカー (11) カードのオープン、次のゲームReactサンプルアプリ開発 プラニングポーカー (12) React Transition GroupによるアニメーションReactサンプルアプリ開発 プラニングポーカー (13) Flask-SocketIOでWebSocket通信のグルーピングを行うReactサンプルアプリ開発 プラニングポーカー (14) カスタムフックを使った処理の再利用Reactサンプルアプリ開発 プラニングポーカー (15) デッキのタイプを変更 – Contextの利用 […]

タイトルとURLをコピーしました