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
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
800
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
330
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
効率的な開発手段として VRTを活用する
ishkawa
0
140
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
130
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
GitHub's CSS Performance
jonrohan
1031
460k
Typedesign – Prime Four
hannesfritz
42
2.7k
It's Worth the Effort
3n
185
28k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
A better future with KSS
kneath
238
17k
Why Our Code Smells
bkeepers
PRO
336
57k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
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