【Vue.js】script setup 構文がすごくすごい
Vue.js 3.x から script setup 構文が使えるようになりました。これは単一ファイルコンポーネント(SFC)内で Composition API を使用している際に使える糖衣構文です。下記のようなメリットを得ることができ、
azukiazusa のテックブログ2
Web フロントエンド要素多めの技術ブログです。週に1度更新されます。
【Vue3.2】styleタグ内でJavaScript変数をバインドできる
Vue.js3.2からは、JavaScriptの変数をCSS変数としてバインドできるようになりました。 つまりは、CSSの値を動的に設定できるということです。 ものは試しのやってみましょう。
Vue2のプロジェクトをVue3へマイグレーションsする
Vue 3が正式リリースされてから約1年が経過しました。 Vuetifyのリリース目標である2021年Q3も近づく中でそろそろVue3へのアップデートを検討されている方もいらっしゃることでしょうか？ この記事ではVue 2からVue 3
【Vue.js】Mixinを使うのはもうやめよう
禁止まで言ってしまうとなんだか強い言葉のように聞こえてしまいますが、mixinは基本的にあまり良いアプローチとは考えられません。 実際に、Reactにも過去にはMixinが存在していましたが現在は廃止されています。
あの日見たaxiosの機能を僕達はまだ知らない。
axiosは、JavaScriptにおけるHTTPクライアントのデファクトスタンダードといえるでしょう。 Promiseベースで非同期通信を行えるHTTPクライアントとして、ブラウザ標準のfatchやjQuery.ajaxなどがありますが
VuetifyのテーマをCSS変数として使用する
VuetifyのテーマをCSSの変数として生成して使用します。
青春JSDocはTypeScript先輩の夢を見ない
時には、TypeScriptという概念が存在しない退屈な世界で開発を行わなけらばならない状況はあるでしょう。私はもはやキーボードでタイピングすることすらままなりません。 そんなJavaScriptしか利用できない状況で代替手段となるのが、
【TypeScript】型定義をする際にもDRY原則を守る
DRY原則は非常に有名な原則ですし、普段から特に考えずとも自然と重複をさけるようなコードを書いている方も多いことでしょう。 とはいえ、TypeScriptにおいて`interface`や`type`などを用いて型定義を行う際に重複した型定
Jest setTimeout()のようなでタイマー関数をテストする
JavaScriptには、setTimeout()のような時間に関する便利な機能が用意されています。しかし、これらの関数はユニットテストを記述する際に厄介です。Jestのタイマーモックはこのような場合に利用できる便利な機能です。
【TypeScript】型アノテーションと型アサーションの違い
型アノテーションと型アサーションによる変数宣言は、一見同じ結果をもたらすように見えます。しかし、型アサーションには明確な欠点が存在します。
【mongoose】日付のカラムで時間ごとにグループ化してドキュメント数をカウントする
タイトルのとおりです
【mongoose】Cannot overwrite 'Model' model once compiled. エラーの直し方
mongooseで遭遇するCannot overwrite 'Model' model once compiled. エラーの解消方法です
JSONオブジェクトのあれこれ
`JSON`オブジェクトはJavaScriptにおいて、JSONをパースしたり値をJSONに変換するためにもっぱら使われます。 普段使っている`JSON.stringify()`や`JSON.parse()`にはオプショナルな引数を渡すこ
【JavaScript】Objectがプリミティブに変換されるとき
JavaScriptがプリミティブな値に変換されるとき、string型に変換されようとするか、number型に変換されようとするかで挙動が変化する
ReactのErrorBoundaryで内部のエラーをキャッチする
Error Boundaryとは、自身の子コンポーネントツリーで発生したJavaScriptのエラーをキャッチ・記録しフォールバックのUIを表示するコンポーネントです。 例えるなら、`try/catch`構文を行うコンポーネントのようなも
仕事で役に立つかもしれないHTML5のマイナー要素
HTMLは書いたことがありますか？プログラミング初心者が最初の一歩として書き出すのに好まれる言語ですが、セマンティクスを追求すると奥深い言語だとわかります。タグの種類も数多くあり、全てを把握している人はそう多くなないでしょう。 今回は、そ
Nuxt Sentryでユーザーフィードバックを受け取る
Sentryでは、エラーが発生した際に簡単にユーザーフォードバックを求めるダイアログを表示することができます。 Nuxt.jsでは、エラーが発生した際には`layouts/error.vue`へ遷移させることでエラーページを表示するので、
Node.js(Express)でcsvを生成してダウンロード
Node.js(Express)でCSVファイルを生成してダウンロードさせます。
CKADにも合格した
開発者向けのK8sの試験であるCKADにも合格したので同様に合格体験記を記載したいと思います。 といっても、大枠の部分はCKAのときとあまり変わらないのでCKAと異なる部分を中心に記載したいと思います。
Vue CLIで作成したプロジェクトをViteに置き換える
Viteは、一言でいうとフロントエンドのめっちゃ早いビルドツールです。Vue CLIで作成したプロジェクトをViteに置き換えるためにvue-cli-plugin-viteをというプラグインを使います。
KubernetesのapiVersion
Kubernetesのマニフェストを作成するときには、`apiVersion`フィールドを指定する必要があります。 例えば`Pod`の場合には`v1`を、`Deployment`の場合には`apps/v1`を指定しますが、これらはどのような
etcdのバックアップとリストア
etcdは、kubernetesのクラスターの情報を保存するkey-valueストアです。
kubectl JSONpath
kubectlはアウトプットの形式としてJSONPathをサポートしています。
Vue.jsでIE11対応
人生でときにはIE11に対応させなければいけない時があるでしょう。Vue.jsでIE11に対応しなけらばいけなくなったときに読むものを記載しておきます。
e2eテスティングフレームワークCypress
Cypressは、JavaScript製のE2Eテスティングフレームワークです。 実行速度が早い、HTTPリクエストの実行を待つなどテストが壊れにくい仕組みが整っています
Kubernetes Tips
知っていると時間を短縮できるようなkubectlコマンドのtipsです。
Sassの基礎文法
SassはCSSのメタ言語です。CSSに比べてコード量が減り、保守性が優れるといった開発体験を向上させてくれる特徴があります。
Kustomizeとは
Kustomizeとは、Kuberbetsコミュニティのsig-cliが提供しているマニフェストのテンプレーティングツールです。環境ごとにマニフェストを生成したり特定のフィールドを上書きするといった機能が提供されています。
KubernetesのパッケージマネージャーHelm
Helmは、Kubernetsのパッケージマネージャーです。 例えば、npmを利用して第三者が作成したパッケージをレポジトリで管理して検索・インストールするように、Helmではチャート(Chart)と呼ばれる設定ファイルをレポジトリで管理し
Kubernetes用語集
仕事上kubernetesを学ぶ必要が出てきました。 筆者のレベルは、Docker・kubernetesの概念・必要性をやんわりと理解している状態です。 勉強をすすめる上で、わからない用語が次々と出てきたて頭の中がパンクしそうになったので
DenoでREST API
この記事では、Denoを使い簡単なCRUD操作を行うREST APIを構築します。
TailwindCSSでダークモード
昨今のアプリケーションでは、ダークモードを提供しているのがもはや当たり前になってきました。 OSのレベルでダークモードを設定することができ、ダークモードが提供されていないサイトは眩しく感じしてしまって敬遠してしまうなんて経験はあるのではない
はじめてのGraphQL
GraphQLとは、Facebookが開発したAPI向けのクエリ言語です。RESTに変わるサーバーとクライアントの通信手段として注目を集めています。 リクエスト・レスポンスの型の定義ができる、フロント側から取得するデータを選択することができ
Sapper + contentful + VercelのJamstackで高速なブログを構築する
JamstackのJamはJavaScript/APIs/Markupの頭文字です。 従来の手法と比較して、高速化・堅牢なセキュリティ。より簡単なスケーラブル・開発体験の向上という特徴を持っています。実行時にAPIから取得したデータを動的に
【Svelte + TypeScript + tailwindcss】本検索サイト チュートリアル
この記事でははSvelte + TypeScript + tailwindcssで本検索サイトを作成します。 Svelteを使ってアプリケーションを作成1から作成することができます。 以下のことが学べます。 - Svelteの基礎文法 -
Vue3 コンポーネントのテスト
コンポーネントのテストをするのフレームワークとしてJest、vue-test-utils 2を利用します。Vue2系をターゲットにしているvue-test-utils 1とは一部APIが異なります。
TailWindCSSとは
TailWindCSSはBootStrap・Materialize CSSなどに代表するCSSフレームワークの一つです。 その特徴として、**Utility First**を掲げています。
JavaScriptライブラリ Svelteとは
Svelteとは、ReactやVue.jsのような宣言的UIライブラリの一種です。その最大の特徴は、ReactやVue.js・Angularと異なりSvelteはコンパイラであることを謳っているところです。Svelteによってコンパイルされ
Firebase Functions https.onCall()トリガーでアプリから簡単に呼び出す
Firebase Functionsとは、Firebaseの提供するサーバレスフレームワークです。HTTPSリクエストによって関数を実行したり、FireStore・Cloud Storage・AuthenticationのCRUDイベントを
JavaScript テストフレームワークのJestのモックがすごくすごい
Jestは、JavaScriptのシンプルなテスティングフレームワークです。ゼロコンフィグを謳っており、細かい設定なしに動作させることが可能です。 Jestの中でも特に強力な機能がモッキングです。Jestのモックを利用すれば、外部ライブラ