自作ブログを作っています。 yushi-dev.hatenablog.com 技術スタック TypeScript React Next.js Styled Components GitHub Pages 今回は、CSS適用を行います。 CSS Modules Next.jsで推奨されているCSS適用方法の1つは、CSS Modulesです。 Styling: CSS Modu…

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

現在はこちらのはてなブログで記事を書いていますが、ブログを自作してみたいなとも思いました。 実際に移設するかどうかは置いておいて、とりあえず作ってみます。 方針を考える フロントエンドについては、最近のトレンドに倣って下記を採用します。 TypeS…

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回は、下記の2つの対応を行います。 説明パネルの作成 GitHub Actionsの追加 説明パ…

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回は、揃った行を削除します。 データ構造の修正 最初にデータ構造を修正します。 …

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回はタイマーでブロックを落とすようにします。 方針 前回まではキー操作でブロック…

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回はブロックを積み上げます。 方針 前回までの実装では、落ちてきたブロックは地面…

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

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

引き続き、プロフィールページを作成していきます。 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 前回までは英字のみに対応していましたが、今回はひらがな対応をします。 ひらがな対応 ひらがなのローマ字打ちに対応していくのですが、重要なポ…

コツコツ将棋盤を作ってます。 使用技術 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.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 リ…

引き続き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 今回は、簡単な画面と、作成・完了の最低限の機能を作ります。 完成品はこちら。 簡単なリスト表示と追加機能 https://github.com/nek0meshi/todo-list/pull/2 一番下の行のテキストフィール…

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

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