Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ゲーム制作道 part.1
suzakutakumi
May 12, 2021
Programming
0
120
ゲーム制作道 part.1
とあるゲームを制作するために、アンケートが必要で、そのアンケートを取るためのWebサイトを作る環境を構築した話。
suzakutakumi
May 12, 2021
Tweet
Share
More Decks by suzakutakumi
See All by suzakutakumi
trap-search
suzakutakumi
0
12
Pyramid Makerの作成
suzakutakumi
0
7
マークダウンパーサーの自作
suzakutakumi
0
30
絵文字ジェネレータボットの作成
suzakutakumi
0
41
send_discord
suzakutakumi
0
4
独自ドメインについて
suzakutakumi
0
7
ESP32とAlexaを用いたエアコン制御
suzakutakumi
0
620
スターリンマージソート
suzakutakumi
0
40
ESP32でWebHook
suzakutakumi
0
5
Other Decks in Programming
See All in Programming
What's new in Android development tools まとめ
mkeeda
0
400
Running Laravel/PHP on AWS (AWS Builders Day Taiwan 2022)
dwchiang
0
170
engineer
spacemarket
0
4.8k
設計ナイト2022 トランザクションスクリプト
shinpeim
11
2.1k
短納期でローンチした新サービスをJavaで開発した話/launched new service using Java
eichisanden
6
2k
実践エクストリームプログラミング / Extreme Programming in Practice
enk
1
570
Improving Developer Experience Through Tools and Techniques 2022
krzysztofzablocki
0
1.2k
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @wad2022
manfredsteyer
PRO
0
140
IE Graduation (IE の功績を讃える)
jxck
20
12k
NEWT.net: Frontend Technology Selection
xpromx
0
280
IE Graduation Certificate
jxck
6
4.9k
"What's new in Swift"の要約 / swift_5_7_summary
uhooi
1
350
Featured
See All Featured
Docker and Python
trallard
27
1.6k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Designing with Data
zakiwarfel
91
3.9k
Navigating Team Friction
lara
175
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Thoughts on Productivity
jonyablonski
43
2.3k
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
Statistics for Hackers
jakevdp
781
210k
Adopting Sorbet at Scale
ufuk
63
7.6k
In The Pink: A Labor of Love
frogandcode
131
21k
Building a Scalable Design System with Sketch
lauravandoore
448
30k
Robots, Beer and Maslow
schacon
152
7.1k
Transcript
ゲーム制作道 part.1 2021/5/12 Zli×ビズリーチ合同LT
自己紹介 HN:朱雀 匠(本名:鈴木 拓眞) Twitter: @suzakutakumi3
None
None
昨日の予定 1,2限:英語のテスト 3-6限:統計のテスト勉強 7,8限:統計のテスト その後: 今回のLT用の成果物とLT作成
何作ろうかな? 「***と勝負」的なゲームを作りたい!
具体的に あるB4の先輩が強いので、プログラミング問題 で対決 その先輩だけじゃつまらないので、 「会津大生と勝負」が良いのでは!
強さをどうやって決めるか 会津大生に実際に問題を解いてもらって、正解 率や答えるまでの速度を決める。 実際に問題を解いてもらうために、問題を答え るWebサイトを作ろう!
part. 1 Webサイトを作るための下準備をする。 具体的には、 ・React ・golang ・fetch API の環境構築・テストをする
環境等 wsl 2(ubuntu) webpack・babelを使ってうまくやる Go言語では、Ginを使用する
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 でディレクトリを初期化
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関連をインストール 他の設定ファイルはサイトを見てください
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') )
Reactのテスト(2/2) npm run build でコンパイル npm start でwebサーバがローカルで立つ はずが、エラーが起こるので諦め (普通にindex.htmlを開けば、実行できる)
Goの環境構築 Go自体のインストールはすでにしてありました。 ディレクトリで go mod init その後 go get -u
github.com/gin-gonic/gin でginをインストール
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") }
Goのテスト(2/2) go run main.goをやれば実行できる しかし、JSがうまく動作しない 404がでてしまう 頑張って調べたら、main文内の2行目に router.Static("/js", "assets/js/") を追加すれば、静的になりうまく動作した。
そして、備忘録として1本記事を書いた
Fetch APIの環境構築 npm install whatwg-fetch --save-dev でfetchのインストール
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'))
POSTテスト
感想 React・Goの環境が整えられた。 しかし、”おまじない”で書いていることが多い。 モダンなWebに触るのがほとんど初めてだったの で、楽しかった。 前日に成果物を作るのは止めた方がいいです。 おやすみなさい(4:35)
関連リンク GitHubのリポジトリ:github.com/suzakutakumi/open-quiz 書いた記事: qiita.com/suzakutakumi3/items/123460ba5d24a8210228