効率化

ちなみに糖衣構文とは、プログラミング言語において、読み書きのしやすさのために導入される書き方とのことらしい。 Vue３のシンタックスシュガー Viteで環境構築するとデフォルトで下記のような糖衣構文が使われている。 <script setup lang="ts"> どうやらVue3.2から使用できるようになったとのこと。 こちらを使えばreact Likeな書き方ができるっぽいので調べてみた。 まずVeturを無効に まずvsCodeの拡張機能の話から入り申し訳ないが、Veturは糖衣構文に対応していないとのこと。 なのでVolarを使う必要がある。 これは公式もアナウンスしている。 setup関数がいらない この構文を使えばsetup関数をわざわざ書く必要がない。 export default defineComponent({}) をする必要もなければ、 return {} をする必要もないので、とんでもなくシンプルに書けるようになった。 というより、よりjavascriptに戻ってきた感がある。 Propsを使いたい Propsはscript内で、 defineProps<Props>(); で使用できるようになる。 デフォルト値を定義するには、 withDefaults(defineProps<Props>(), { propsVal: "", }); 上記のように。 emitを使いたい <script setup lang="ts"> type Emits { (e: "input", value: string): void; (e: "update:value", value: string): void; } defineEmits<Emits>(); const handleInput = ({ target }: { target: HTMLInputElement }) => { emit("input", target.value); emit("update:value", target.value); }; </script> 上記のように使えばできる。...

特にタイトル以上に説明することもないので、進めていく。 Viteを使用しVueをインストールする 下記コマンドでVite（ヴィート）を使用しVueをインストールすることができる。 $ npm create vite@latest Need to install the following packages: create-vite@3.1.0 Ok to proceed? (y) √ Project name: ... VueProjectBase √ Package name: ... vue-project-base √ Select a framework: » Vue √ Select a variant: » TypeScript Scaffolding project in C:\Users\username\Desktop\vite\VueProjectBase... Done. Now run: cd VueProjectBase npm install npm run dev 今回はVueプロジェクなので、frameworkはVueを指定し、もう考えることなくTypeScriptを指定する。 で、上記のように指示に従いlocal serverを立ち上げることができればVueのインストールは完了。 nodeのバージョンを指定する nodeのバージョン管理ツールにVolta使用しているので、Node エンジンの固定をする。 volta pin node volta pin npm 上記を実行するとpackage.jsonに、 "volta": { "node": "16....

How To Excelのシート名全件取得? 簡単だったので、書くことがない。 方法だけ書く。 ALT+F11 CTRL+Gキーを押して下部に「イミディエイト」ウィンドウを表示する For Each i In ThisWorkbook.Sheets: debug.print i.name : next i 上記コマンドをコピペ。 はい、以上。

treeコマンド treeコマンドとは、フォルダ構成とかを綺麗に表示してくれるもの。 実際に吐き出されるソースの見本は下記記事を参照。 インストールしたreact のファイルを検分する 使い方は簡単で、コマンドを開き、 cd 表示したいフォルダ tree で、きれいに表示される。 ちなみに、ファイル名まで表示したい場合は、 tree /f で、実行する。 bash: tree: command not found Windowsのコマンドなので（？）、vsCode 上で実行すると bash: tree: command not found というエラーができる。 そういう時はコマンドに行けばいいのだが、どうしてもvsCodeでやりたい時は下記コマンドで実行可能となる。 pwd;find . | sort | sed '1d;s/^\.//;s/\/\([^/]*\)$/|--\1/;s/\/[^/|]*/| /g' 参考：Windowsファイルツリー構造の表示とテキスト保存 参考：tree コマンドが無い環境で tree コマンドを実現

ブログ更新ってめんどくさい ブログ更新は面倒くさい。 そんなこと分かり切っている。 なかでも面倒なことの1つにアイキャッチ画像の選定がある。 面倒なことを楽にできるのがエンジニアの特権だ。 ということでアイキャッチ画像を簡単に作れるようにした。 作成されるアイキャッチ画像 本ツールを作成できるアイキャッチ画像はこんな感じ。 「本ツールを作成できるアイキャッチ画像」の部分を簡単に変更できる。 作成するうえでの考え方 JavaScriptのCanvasに背景画像を描画する その上にCanvas で文字を書く 作成したコード <div id="creatEyeCatch"> <div class="input"> <input type="text" id="input" placeholder="記事タイトルを記入する"> </div> <canvas class="canvas" id="canvas--background" width="788px" height="486px"></canvas> <div class="operation"> <button id="deleteTitle">タイトルを削除</button> </div> </div> <script> // var const deleteTitle = document.getElementById('deleteTitle') // 背景CANVASの作成 const canvasGround = document.getElementById('canvas--background') const ctxGround = canvasGround.getContext('2d') const nove = new Image(); nove.src = '画像のパス'; ctxGround.drawImage(nove, 0, 0, canvasGround.width, canvasGround.height); // 入力されたタイトルを描画する関数 const drawFont = (el) => { ctxGround....