久しぶりに、プロフィールページを作成していきます。 プロフィールページ カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 nuxt.js SCSS Tailwind CSS 今回は、写真セクションを追加します。 写真 最近ミラーレス…

引き続き、プロフィールページを作成していきます。 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 技術スタックは下記の通りです。 Vue.js3 Vite 今回は、"ん"に対応します。 "ん"への対応 "ん"が特殊な動きをするのは、例えば"あんこ"と入力するときに、"annko"という入力の他、"anko"という入…

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

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

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

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

コツコツ将棋盤を作ってます。 使用技術 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 実装 今回は、既存の機能にちょこちょこ追記するだけです。 …

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

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

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

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

将棋盤を作っていこうと思います。 弊社スマレジに将棋部があることもあって、ここ数ヶ月将棋にはまっています。 せっかくなので何か関連して開発もしてみようということで、今回の企画です。 展望としては、 対局ができる 将棋対局アプリの対局データを取得…

引き続きTODOリストを作っていきます。 yushi-dev.hatenablog.com 前回追加したBulmaを活用して、編集のモーダルウインドウを追加します。 完成品はこんな感じです。 そしてPull Requestはこちらです。 Edit modal by nek0meshi · Pull Request #9 · nek0mes…

Vueのwatchを使いたくなった時は、computedで置き換えられないか検討すること。 computedに比べてwatchはできることが多いが、その分使い所を選ばないとリスクも大きくなる。 例 baseValueおよび、これに1を足したplus1Valueを利用したいとする。 computedの…

引き続きTODOリストを作っていきます。 yushi-dev.hatenablog.com 今回は、一覧APIと作成APIを追加します。 下記の書籍を参考にさせていただいています。 Goプログラミング実践入門 標準ライブラリでゼロからWebアプリを作る impress top gearシリーズ作者:S…

前回より、TODOリストを作っています。 yushi-dev.hatenablog.com 今回は、簡単な画面と、作成・完了の最低限の機能を作ります。 完成品はこちら。 簡単なリスト表示と追加機能 https://github.com/nek0meshi/todo-list/pull/2 一番下の行のテキストフィール…

先日Vue3が公開になりました。 yushi-dev.hatenablog.com 今回はVue3の目玉機能の一つ、Composition APIを触ってみます。 Composition APIとは 公式ドキュメントはこの辺りです。 vue-composition-api-rfc.netlify.app v3.vuejs.org Composition APIを利用す…

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