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
TypeScriptでDXを上げろ! Hono編
yusukebe
3
770
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
530
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
190
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.7k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
760
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.6k
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Designing Experiences People Love
moore
142
24k
Making Projects Easy
brettharned
116
6.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
BBQ
matthewcrist
89
9.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Navigating Team Friction
lara
187
15k
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