Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ゲーム制作道 part.1
Search
suzakutakumi
May 12, 2021
Programming
0
220
ゲーム制作道 part.1
とあるゲームを制作するために、アンケートが必要で、そのアンケートを取るためのWebサイトを作る環境を構築した話。
suzakutakumi
May 12, 2021
Tweet
Share
More Decks by suzakutakumi
See All by suzakutakumi
ピクロス作成の中間発表
suzakutakumi
0
89
しゅみろん
suzakutakumi
0
140
trap-search
suzakutakumi
0
38
Pyramid Makerの作成
suzakutakumi
0
20
マークダウンパーサーの自作
suzakutakumi
0
100
絵文字ジェネレータボットの作成
suzakutakumi
0
150
send_discord
suzakutakumi
0
46
独自ドメインについて
suzakutakumi
0
38
ESP32とAlexaを用いたエアコン制御
suzakutakumi
0
1.3k
Other Decks in Programming
See All in Programming
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
VS Code Update for GitHub Copilot
74th
2
640
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
NPOでのDevinの活用
codeforeveryone
0
830
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
200
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Unsuck your backbone
ammeep
671
58k
RailsConf 2023
tenderlove
30
1.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Scaling GitHub
holman
460
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Into the Great Unknown - MozCon
thekraken
40
1.9k
What's in a price? How to price your products and services
michaelherold
246
12k
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