スマレジエンジニアyushiのブログ

スマレジエンジニアのブログ

TypeScript

【テトリス #5】ブロックを動かす

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回はブロックを動かします。 キーハンドラ まずはキーハンドラを更新します。 左右…

【テトリス #4】ESLint・テストコードの導入

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回は、ESLintの導入やテストコードの記述をしてみます。 ESLintの導入 ESLintを導入…

【テトリス #2】背景とブロックの描画

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 背景の作成 まずは背景を作ります。 背景は、10 x 25個のタイルの積み重ねで作ります…

【テトリス #1】テトリスを作りたい

今回から、テトリスを作っていきます。 最近30分で作るXXが話題になっていたので、興味が出た次第でした。 ただ自分ではそんなスピーディには作れないので、React・TypeScriptの勉強も兼ねつつじっくり作っていきます。 技術スタックは下記の通りです。 Type…

【タイピングゲーム 第5回】"ん"に対応する

タイピングゲームを作っています。 yushi-dev.hatenablog.com 技術スタックは下記の通りです。 Vue.js3 Vite 今回は、"ん"に対応します。 "ん"への対応 "ん"が特殊な動きをするのは、例えば"あんこ"と入力するときに、"annko"という入力の他、"anko"という入…

【タイピングゲーム 第4回】ひらがなに対応する

タイピングゲームを作っています。 yushi-dev.hatenablog.com 技術スタックは下記の通りです。 Vue.js3 Vite 前回までは英字のみに対応していましたが、今回はひらがな対応をします。 ひらがな対応 ひらがなのローマ字打ちに対応していくのですが、重要なポ…

【タイピングゲーム 第2回】タイマーを設置する

タイピングゲームを作っています。 yushi-dev.hatenablog.com 今回は、タイマーを設置します。 タイマー機能 タイマーを設置して、「決められたテキストを、時間内に打ち込む」というゲームにアップグレードします。 タイマー機能は、setIntervalを利用しつ…

【タイピングゲーム 第1回】タイピングゲームを作る

タイピングゲームを作っていこうと思います。 学生時代に少しタイピングゲームにハマっていた時期があったのですが、 当時遊んでいたゲームたちはFlash Playerとともに死んでしまいました...。 夜の森タイピング neutralx0.net 皿打 neutralx0.net 僕は絵が…

【将棋盤 第13回】TypeScriptのclassのテストコードを記述してみる

コツコツ将棋盤を作ってます。 使用技術 Vue.js3 Vite SCSS yushi-dev.hatenablog.com 公開ページ https://nek0meshi.github.io/shogi-board/ 今回は、vueファイルのテストコードを書いてみます。 ライブラリの導入 前回の記事で導入済みです。 yushi-dev.ha…

【将棋盤 第12回】vueのテストコードを記述してみる

コツコツ将棋盤を作ってます。 使用技術 Vue.js3 Vite SCSS yushi-dev.hatenablog.com 公開ページ https://nek0meshi.github.io/shogi-board/ 今回は、vueファイルのテストコードを書いてみます。 vite2へのmigration vite2がリリースしていたので、こちらに…

【将棋盤 第10回】今後実装したい機能を考える

コツコツ将棋盤を作ってます。 使用技術 Vue.js3 Vite SCSS yushi-dev.hatenablog.com 公開ページ https://nek0meshi.github.io/shogi-board/ だんだんそれっぽく動くようになってきたので、今回は今後実装したい機能を書き出してみました。 今後について 将…

【将棋盤 第9回】Composition APIの導入

コツコツ将棋盤を作ってます。 使用技術 Vue.js3 Vite SCSS yushi-dev.hatenablog.com 今回はついに、Composition APIの導入です。 製作中の盤はgithub pagesで公開しています。 nek0meshi.github.io Composition APIとは? 過去にブログを書いていましたの…

TypeScriptに入門してみた

最近TypeScript(TS)への注目度が高まっているように感じます。 先日リリースされたVue.js3もTypeScriptで記述されています。 yushi-dev.hatenablog.com そこで今回は、書籍を読みつつ、TypeScriptに入門してみました。 速習 TypeScript こちらの書籍で学習し…

ありったけの夢をかき集め(Vue3リリース)

Vue3がついにリリースされました! github.com ここしばらくワクワクしながら待ってたのですが、ついにこの時がきました...! "One Piece" とコードネームがつけられています。 初めて知ったのですが、これまでもずっとアニメ(だいたい日本の)の名前がつけ…

PHPと型

Wantedly主催のWebエンジニア向けイベントに参加した。主題は、フロントエンドとサーバサイド。 そこで特に感じたのは、GoとTypeScriptへの注目度だった。2つの言語の共通点は静的型付けであることであり、それ自体が注目されている主要因のようである。その…