ゲーム制作道 part.1

とあるゲームを制作するために、アンケートが必要で、そのアンケートを取るためのWebサイトを作る環境を構築した話。

Transcript

1. ゲーム制作道 part.1 2021/5/12 Zli×ビズリーチ合同LT
2. 自己紹介 HN:朱雀 匠(本名:鈴木 拓眞) Twitter: @suzakutakumi3
5. 昨日の予定 1,2限:英語のテスト 3-6限:統計のテスト勉強 7,8限:統計のテスト その後: 今回のLT用の成果物とLT作成
6. 何作ろうかな? 「***と勝負」的なゲームを作りたい!
7. 具体的に あるB4の先輩が強いので、プログラミング問題 で対決 その先輩だけじゃつまらないので、 「会津大生と勝負」が良いのでは!
8. 強さをどうやって決めるか 会津大生に実際に問題を解いてもらって、正解 率や答えるまでの速度を決める。 実際に問題を解いてもらうために、問題を答え るWebサイトを作ろう!
9. part. 1 Webサイトを作るための下準備をする。 具体的には、 ・React ・golang ・fetch API の環境構築・テストをする
10. 環境等 wsl 2(ubuntu) webpack・babelを使ってうまくやる Go言語では、Ginを使用する
11. Reactの環境構築(1/2) 1. nodebrewをインストール curl -L git.io/nodebrew | perl - setupでインストール 2. node.js の最新版をインストール nodebrew ls-remoteでバージョン確認 nodebrew install v16.1.0で最新版をインストール nodebrew use v16.1.0で最新版に切り替え 3. npmの環境構築 npm init でディレクトリを初期化
12. Reactの環境構築(2/2) 4. webpackとbabel,Reactのインストール・設定 このサイトを参考にインストール npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev でwebpack関係をインストール npm install @babel/cli @babel-cli @babel/preset-env @babel/preset-react --save-dev でbabel関係をインストール npm install react react-dom --save-dev でReact関連をインストール 他の設定ファイルはサイトを見てください
13. Reactのテスト(1/2) import React from 'react' import ReactDOM from 'react-dom' function App(props) { return (<center>{props.name}</center>) } ReactDOM.render( <App name="test"/>,document.getElementById('app') )
14. Reactのテスト(2/2) npm run build でコンパイル npm start でwebサーバがローカルで立つ はずが、エラーが起こるので諦め (普通にindex.htmlを開けば、実行できる)
15. Goの環境構築 Go自体のインストールはすでにしてありました。 ディレクトリで go mod init その後 go get -u github.com/gin-gonic/gin でginをインストール
16. Goのテスト(1/2) package main import "github.com/gin-gonic/gin" func main() { router := gin.Default() router.LoadHTMLGlob("assets/*.html") router.GET("/", func(ctx *gin.Context) { ctx.HTML(200, "index.html", gin.H{}) }) router.POST("/post", func(ctx *gin.Context) { ctx.JSON(200, gin.H{ "message": "postできたよ!", }) }) router.Run(":8080") }
17. Goのテスト(2/2) go run main.goをやれば実行できる しかし、JSがうまく動作しない 404がでてしまう 頑張って調べたら、main文内の2行目に router.Static("/js", "assets/js/") を追加すれば、静的になりうまく動作した。 そして、備忘録として1本記事を書いた
18. Fetch APIの環境構築 npm install whatwg-fetch --save-dev でfetchのインストール
19. Fetch APIでPOSTテスト import React, { useState } from 'react' import ReactDOM from 'react-dom' import 'whatwg-fetch' function App() { let [status, setStatus] = useState("") return ( <div> <button onClick={() => { fetch('/post', { method: 'POST' }).then((res) => res.json()).then((resJson) => { setStatus(resJson.message) }) }}> push me! </button> <br/> {status} </div> ) } ReactDOM.render(<App />, document.getElementById('app'))
20. POSTテスト
21. 感想 React・Goの環境が整えられた。 しかし、”おまじない”で書いていることが多い。 モダンなWebに触るのがほとんど初めてだったの で、楽しかった。 前日に成果物を作るのは止めた方がいいです。 おやすみなさい(4:35)
22. 関連リンク GitHubのリポジトリ:github.com/suzakutakumi/open-quiz 書いた記事: qiita.com/suzakutakumi3/items/123460ba5d24a8210228