最近業務でgulpを使う機会があったので、プライベートでも触ってみて、まとめました。 gulpとは gulpjs.com gulpとは、JavaScript・CSS管理におけるタスクランナーツールと呼ばれるものです。 作成したJS・CSSを、minifyしたり、多環境対応したり、といった…

引き続き、プロフィールページを作成していきます。 yushi-dev.hatenablog.com 技術スタックは下記の通りです。 nuxt.js SCSS Tailwind CSS 今回は、CSS開発のための様々な準備を行います。 tailwindcssの導入 今回は、tailwindcssを使ってみます。 以前の別…

引き続き、プロフィールページを作成していきます。 yushi-dev.hatenablog.com 技術スタックは下記の通りです。 nuxt.js SCSS Tailwind CSS node.jsのバージョン node.jsは、Maintenance LTSのv14を採用します。 Releases | Node.js 最新のv16も試してみたの…

以前一度、プロフィールページを作りました。 yushi-dev.hatenablog.com 作成時から一年ほど経ち、プロフィールもフロントエンドのスキルも多少更新されたので、 今回プロフィールページを更新してみようと思います。 方針 前回よりは、デザイン・CSSに力を…

タイピングゲームを作っています。 yushi-dev.hatenablog.com 技術スタックは下記の通りです。 Vue.js3 Vite 今回は、"っ"に対応します。 "っ"の対応 小さい"っ"の入力は、例えば「って」と入力したい時に、 ltute tte の2種類の入力方式があります。 「1. l…

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

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

タイピングゲームを作っています。 yushi-dev.hatenablog.com 今回は、Composition APIを導入します。 技術スタックは下記の通りです。 Vue.js3 Vite Composition APIについて Composition APIについては、過去記事で言及しています。 Vue3の目玉機能の一つ…

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

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

ここ数年をプログラマとして過ごしてきた人で、「リーダブルコード」の名前を知らない人はあまりいないんじゃないかと思います。 リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice) 作者:Dustin Boswell,Trev…

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

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

タイマーアプリを作っています。 yushi-dev.hatenablog.com 技術要素 Vue.js3 Vite キー操作 ルービックキューブのsolve（解くこと）の時間計測をする際にいちいちマウス操作していられないので、 キーボードで操作できるようにします。 methods: { keyActio…

最近のマイブームで、ルービックキューブにはまっています。 パズルとして解くのではなく、手順を覚えてタイムアタックする感じです。 せっかくなので、自分でストップウォッチを作って、それで時間計測できるようにしたいと思います。 技術要素 今回もVue.j…

ブログを始めて一年になりました。 週一休まず、我ながら頑張ったなと思っています。 どんな記事を書いていたか、振り返ってみたいと思います。 過去のブログを振り返る 最初期は、社内勉強会の題材だったスクラムの書籍について記事にしました。 この本は読…

コツコツ将棋盤を作ってます。 使用技術 Vue.js3 Vite SCSS yushi-dev.hatenablog.com 公開ページ https://nek0meshi.github.io/shogi-board/ 今回はテストフレームワークのjestを導入してみます。 jest jestとは、JavaScriptのテストフレームワークです。 …

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

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

コツコツ将棋盤を作ってます。 使用技術 Vue.js3 Vite SCSS yushi-dev.hatenablog.com 今回は、駒台の駒を使えるようにします。 製作中の盤はgithub pagesで公開しています。 nek0meshi.github.io 実装 今回は、既存の機能にちょこちょこ追記するだけです。 …

初めてAtCoderのコンテストに参加してみました。 しかしC問題でTLE（Time Limit Exceeded）に悩まされたので、その解説です。 問題 C - IPFL "IPFL"というタイトルですが、これは"FLIP"のアナグラムです。 詳しくは問題文の通り...。 TLEした版 問題文を読む…

コツコツ将棋盤を作ってます。 使用技術 Vue.js3 Vite SCSS yushi-dev.hatenablog.com 今回は、github pagesで公開していきます。 github pagesとは Githubの機能で、静的ファイルをごく簡単に公開できる機能です。 GitHub Pages について - GitHub Docs リ…

2021/04/09に開催されたDeveloper eXperience Day 2021というイベントを見てきました。 dxd2021.cto-a.org "日本CTO協会"という団体が開催しているそうで、登壇者もCTO/VPoEの人が多いようです。 最初に平井大臣出会ったり、有名ベンチャー（ヤフー、freee、…

エンジニアの方はご存知の方が多いと思いますが、競技プログラミングというものがあります。 多くの場合プログラミングでは、それ自体ではなくそれによって作られるものが目的ですが、 プログラミング自体の速さや解決能力、質を競うのが、競技プログラミン…

引き続き将棋盤を作っていきます。 使用技術 Vue.js3 Vite SCSS yushi-dev.hatenablog.com 駒を成る機能を実装します。 駒を成る機を実装 今回は正直、粛々と実装するのみです。 駒をなれるか、また特に現在成れるかの判定機能を実装します。 get canPromote…

引き続き将棋盤を作っていきます。 使用技術 Vue.js3 Vite SCSS yushi-dev.hatenablog.com 駒を動かせるマスの表示と制限をしていきます。 前回は失敗したのですが...今回はその修正です。 yushi-dev.hatenablog.com 駒の動けるマスの、定義し直し 香車、飛…

引き続き将棋盤を作っていきます。 使用技術 Vue.js3 Vite SCSS yushi-dev.hatenablog.com 今回は、駒を動かせるマスの表示と制限をしていきます。 ...のつもりでしたが、ミスりました。 十分検討せずに実装を始めてしまうとどうなるのか、共有していきます…

久しぶりにTODOリストを作っていきます。 yushi-dev.hatenablog.com 今回は、本番デプロイができるようなDocker環境を用意します。 開発環境用のDocker環境 そもそもですが、Dockerは開発環境用と本番環境用で2つの使い方ができると思っています。 開発環境…

引き続き将棋盤を作っていきます。 使用技術は下記の通りです。 Vue.js3 Vite SCSS 今回は、駒を動かす機能を作成します。 駒台を用意する 駒の一覧から、先手・後手それぞれの駒台の置かれる駒と、その数を抜き出すcomputed propertyを用意します。 const r…

引き続き将棋盤を作っていきます。 使用技術 Vue.js3 Vite SCSS 今回は、駒を並べる機能を作成します。 型定義 ほぼ初めてTypeScriptを使ってみます。 駒の種類を型として定義します。 union型を使っていますが、ググるとenumよりをこちらを使えと出てきたか…