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
170
ゲーム制作道 part.1
とあるゲームを制作するために、アンケートが必要で、そのアンケートを取るためのWebサイトを作る環境を構築した話。
suzakutakumi
May 12, 2021
Tweet
Share
More Decks by suzakutakumi
See All by suzakutakumi
ピクロス作成の中間発表
suzakutakumi
0
80
しゅみろん
suzakutakumi
0
98
trap-search
suzakutakumi
0
33
Pyramid Makerの作成
suzakutakumi
0
14
マークダウンパーサーの自作
suzakutakumi
0
89
絵文字ジェネレータボットの作成
suzakutakumi
0
120
send_discord
suzakutakumi
0
36
独自ドメインについて
suzakutakumi
0
25
ESP32とAlexaを用いたエアコン制御
suzakutakumi
0
1.1k
Other Decks in Programming
See All in Programming
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
新宿ダンジョンを可視化してみた
satoshi7190
2
260
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
350
Apache Hive 4 on Treasure Data
ryukobayashi
0
340
2 週間で Twitter Bot を作ってみた
contour_gara
0
540
Git Rebase
bkuhlmann
11
1.6k
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
2
820
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
340
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
380
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Code Review Best Practice
trishagee
55
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Into the Great Unknown - MozCon
thekraken
10
990
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Building Your Own Lightsaber
phodgson
99
5.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Product Roadmaps are Hard
iamctodd
44
9.7k
GitHub's CSS Performance
jonrohan
1025
450k
The Mythical Team-Month
searls
216
42k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
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