AI Programmer日本語で指示を出すだけでコードを 自動で生成してくれます。 AI Programmer エンジニアを強力にサポートします。現在プロトタイプを無料で公開しています。AI プログラマーに指示を出してソースコードを生成してみてください。できるだけ具体的に指示を出すと期待通りのコードが書けます。
【Vuejs】watch immediate: trueはライフサイクルのどこで実行されるのか？ - Qiita
この記事は、Vue #2 Advent Calendar 2019 の2日目の記事です(4日目に飛び入り)。 前置き Vue.jsにはVueインスタンス(コンポーネント)上のデータの変更を監視する watch というプロパティがあります。 さらに、 watch には immediate というオプションがあります。 watch は通常監視を始めて、データが変わった直後にコールバックが呼ばれますが、 immediate オプションを付与した watch は監視を始めた直後に一回コールバックが呼ばれます。 また、Vueにはインスタンスのライフサイクルに合わせて関数を実行する ライフサイクルフック という仕組みがあります。 そこで、 immediateオプション付きのwatchはライフサイクルにおけるどのタイミングで呼ばれるのか？ という疑問が湧いたので調べてみました。 画像は Vue インスタ
わかりにくいvue.jsのwatch（ウォッチャ）のオプションを使った書き方 - Qiita
オプションについてはなぜかちょっと遠いところで、APIの中に記載があります。 [vueのドキュメントの説明]https://jp.vuejs.org/v2/api/index.html#vm-watch deep 通常、objectのプロパティの変更は、watchが発火しません。 data: () => ({ someObject: {}, )}, watch: { someObject(newVal, oldVal) { console.log(newVal); }, } methods: { onClick: function() { // watchが発火しない！ someObject.hoge = 'hoge'; }, data: () => ({ someObject: {}, )}, watch: { someObject: { deep: true, handler(newV
【Vue.js 再入門】 v-model を正しく理解して親子間コンポーネントのデータ伝播をマスターする - Qiita
はじめに 本稿は Vue 2.x が対象になります。Vue 3 に関する記事はこちらを参照ください。 Vue.js のコンポーネント間のデータのやりとりについて、親コンポーネントから子コンポーネントへデータを渡すには、v-bind 属性と props オプションを利用します。これにより親コンポーネント側でデータを変更すれば、子コンポーネントの props 経由で渡されたデータも変更されます。しかし、子コンポーネント側で props 経由で渡されたデータを直接変更することは非推奨です。しかし、子コンポーネントの変更を親コンポーネントへ反映したい場合があります。たとえば、再利用性のある入力フォームのコンポーネントを親子間でやりとりするケースです。この問題を解決するには v-model を正しく理解する必要があります。本稿で紹介するコードは CodeSandbox にて共有します。 サンプルコー
フロント開発をするときにブックマークしておくと役立ちそうなオンラインツールまとめ - Qiita
概要 フロント開発をするとき、レイアウトやアニメーション、その他CSS等の生成をしてくれるWebツールのまとめです。 使いやすそうなツールがあれば追記していく予定です。 ドキュメント類 何はともあれドキュメントは読む癖をつけて、正しい使い方ができるようになるのが良いでしょうということで mdn (Mozilla Developer Network の略) ウェブ標準ドキュメント 個人ブログやQiita内で「こう使うといい！」って書いてあってもその内容自体が間違っている可能性もあるので、より正確な情報を得るにはmdnを参照する Can I use ブラウザごとにCSSやjsの標準関数等が使用可能かどうか一覧表示してくれる ジェネレーター系 Interactive CSS Grid Generator Gridを使ったレイアウトをGUIで作り、コード生成できる そのレイアウトをもとにCodeP
TypeScriptで書かれたオープンソースのヘッドレスCMS・「Alinea」
AlineaはTypeScriptで書かれたオープンソースのヘッドレスCMSです。コンテンツはGitでバージョン管理されるGitベースとなっており、埋め込み型のSQLiteにインデックスされる事で高速なクエリと全文検索も可能との事です。 ダッシュボードもユーザーフレンドリーなものとなっており、コンテンツを階層的にナビゲートするUIで迷うことなく目的を達成できそうです。また、ページのライブプレビューでは、変更点がどのように見えるかを正確に表示できる等、開発者と利用者への配慮が感じ取れました。 特にコンテンツの編集や管理は非常に分かりやすいUIで個人的には案件でも十分使えると思いました。時間を作って学んでみたいと思います。ライセンスはMIT。 Alinea
売掛金と売上の関係性とは？管理上の課題や効率化させる方法なども解説 | 企業のお金とテクノロジーをつなぐメディア「Finance&Robotic」
企業は全ての取引を種類ごとに仕訳をして管理する必要があります。仕訳の基準は勘定科目と呼ばれる分類項目に従って決められており、資産、負債、純資産、収益、費用の5つに分類されています。このなかで、会社の収益に直結するのが資産に分類される「売掛金」と、収益に分類される「売上」です。 この2つは掛け売りや掛け取引を行う会社にとって、収入の状況を表すものとして会社運営上重要な役割を果たします。本記事では売上の概要、売上と売掛金の関係性、売掛金・売上金の管理などについて解説します。 売上とは ここでは売上という言葉の意味を理解するために、売上の回収方法と利益・収益との違いについて解説します。 売上の回収方法 取引先に商品やサービスを提供した時は、売上として帳簿に計上されます。計上する時期は、販売業は商品を提供した時点、サービス業はサービスの提供が完了した時点です。そして、売上を計上したら売上代金の回収
電気・ガス・水道代はいつ経費に計上するか？の答えが「支払日でもOK」である理由 | モロトメジョー税理士事務所
上記２通りの仕訳について、「８月の経費」とした金額を比較してみましょう。こうなります ↓ 使用日に経費にする仕訳 … 12,000円支払日に経費にする仕訳 … 10,000円この点でまず、「12,000円も 10,000円も、そんなに変わらないよね」という見方があります。 電気にしてもガス・水道にしても、１年を通じてだいたい同じような金額なのだから、使用日と支払日とでちょっとズレるくらいいいだろう？ と言われれば、たしかにそのとおりにも思えますよね。 また、正しく使用日に経費計上しようとすると。余計な「手間」が問題になります。 たとえば、７月分の電気代について。使用量の検針は、必ず月末というわけではありません。むしろ、検針日が29日だったり、翌月の３日だったり、ということもあるでしょう。 電気代は検針日に応じて請求されますから、結果として「７月１日〜７月31日」までの電気代は請求書からはわ
2022年の最新標準！Vue 3の新しい開発体験に触れよう - ICS MEDIA
2021年のVue.jsは新しいVue 3のコアが安定し、開発環境からライブラリやコードの書き方まで、新しい発表の多い一年でした。ICSではすでに複数のプロジェクトでVue 3やVite等の新しいフレームワーク・ツールを使用していますが、まだまだ様子見という方も多いでしょう。 変化の大きいVue 3の周辺ですが、2021年11月のVueConf Toronto 2021（セッション動画）でようやく次の定番と言える構成がアナウンスされました。この記事では、Vite・cteate-vue・<script setup>・Piniaといった新しい推薦構成を紹介し、Vue 2時代から何が良くなるのかを比較します。 新しい構成は何が良くなる？ メリットを確認 新しい構成ではプロジェクトを作成する際のコマンドラインツールからVS Codeの機能拡張やコードの書き方まで、さまざまな部分が変わっています。個
新Vue.js「Vue 3」でコンポーネント実装法を大きく変える「Composition API」
はじめに Vue.jsは、Webページのユーザーインタフェース（UI）を構築できるフレームワークです。2015年のバージョン1（Vue 1）、2016年のバージョン2（Vue 2）に続き、バージョン3（Vue 3）が開発中で、2020年第2四半期にリリース予定です。 本記事では、全2回にわたって、Vue 3の新機能を紹介していきます。今回は、Vue 3で導入されるコンポーネントの新しい記述形式「Composition API」を説明していきます。 対象読者 Vue 3の概要を把握したい方 新しいライブラリーを試してみたい方 これからVue.jsをプロジェクトに採用する予定の方 必要な環境の準備 本記事のサンプルコードは、以下の環境で動作を確認しています。 Windows 10 64bit版 Node.js v10.18.1 64bit版 Vue.js 3.0.0-beta.15 Vue C
Vue.js Piniaを使って状態管理(データの共有)を行ってみよう | アールエフェクト
Piniaとは PiniaはVue用のState Managementライブラリで複数のコンポーネントでデータを共有するために利用することができます。アプリケーションの中にStoreという場所を準備しその中にコンポーネント間で共有の必要があるデータを保存していきます。またデータを保存するだけではなくデータを更新する機能も備えています。 Piniaによるデータ管理のイメージ Vueプロジェクトの作成 Piniaを利用するためにVueのプロジェクトの作成を行います。本文書ではViteでプロジェクトを作成後にnpmコマンドでpiniaのインストールを行います。 viteではなくnpm init vue@latestコマンドを利用するとプロジェクトの作成と同時にpiniaをインストールすることもできます。 Viteによるインストール npm init viteコマンドを実行してVueのプロジェクト
【Vue 3】Composition API の基本
はじめに※ Vue 2の知識があることを前提の記事となっています。 今回の題材である Composition API 導入により、Vueの<script>部分の記述が大きく変わります。 Vue 2からVue 3への変更で一番大きなものは Composition API の導入と言っても過言ではないでしょう。 Composition APIは、Vue 2でも拡張機能として導入することはできましたが、多くのユーザーは基本的な Options API を使用していたはずです。 Options APIでは、オブジェクトプロパティとしてdataやmethodsなどの役割ごとにまとめて記述していました。 <script> export default { data: () => ({ count: 0, }) methods: { increment() { this.count++; }, decr
【Vue 3】Vue 2との違いについて
はじめにNuxtJSをメインに使用していることもあって、執筆時点でも今だにVue 2を使用している筆者ですが、 Nuxt3がRC版になったということでようやく重い腰を上げてVue 3を触っていきたいと思います。 この記事では、Vue 2からVue 3への変更点について、いくつかピックアップして紹介していきます。 参考：はじめに | Vue.js 導入Vue 3の導入（インストール）については公式ドキュメントを参考にしてください。 参考：インストール | Vue.js 導入方法自体は変わらないと思います。 CLIについては、Vue 2と同様に公式のVue CLIが提供されていますが、 Vue 3からはViteというツールも使用できます。 Viteについては割愛しますが、Vue CLIよりもビルドがかなり速いため、快適に開発を進めたい方にはおすすめです。 筆者も簡単にしか試したことがないので、
フリーランスにかかる個人事業税！？都税や県税事務所からのおたずね（手紙） - 佐藤綜合会計事務所
慌ただしく作業した確定申告も終わり、頭の中から税金なんて抜け落ちた6月から7月。突然都税事務所や県税事務所からこんなお便りが届くことがあります。 「何て言ってるのかさっぱり分からん。。。けど7月までに何とかしないといけないみたいだ。。。」 こんなフリーランスを悩ませる個人事業税問題について紹介していきます。 個人事業税ってそもそも何？ 個人の方が営む事業のうち、地方税法等で定められた事業（法定業種）に対してかかる税金です。現在、法定業種は70の業種があり、ほとんどの事業が該当します。 出典：東京都主税局HP わたしの場合でいうと、公認会計士業・税理士業は個人事業税の対象です。 一方で個人事業税に該当しない業種として例示されている業種があります。 以下の業種に該当される方には個人事業税はかかりません。 林業 鉱物採掘業 農業 国外における事業 文筆業 画家・漫画家 音楽家 スポーツ選手 芸能
家事按分とは？計上できる経費や計算方法、確定申告での注意点を解説
適切な家事按分を行えば、より多くの経費を計上できます。按分割合を比較的自由に決められるため、税務署から指摘を受けないようにするためには、正しい知識を身に付けておくことが重要です。家事按分できる経費や計算方法、注意点について解説します。
Playwright を使うなら Jest は要らない？ : (*x).b=z->a+y/c
◆ Playwright でも Jest と同じ expect() を使える ◆ ユニットテストにも使えるなら Jest はなくてもいい？ ◆ モック機能は Jest が便利なのであったほうがいいかも ◆ Playwright のセレクタで React のコンポーネントが使えるけど minify してるとダメ Playwright と Jestちょっと前に Playwright 使おうかなーと書いて最近使ってみてました Puppeteer の場合はブラウザを操作するだけなので テストに関する機能は別のツールを使う必要があります ユニットテストで Jest を使っているならそのまま Jest を使えます Playwright だとそういう機能が組み込まれています 便利だけどユニットテストで Jest を使ってると共存するのはどうするのがいいんでしょう？ 探してみると jest-playwri
PlayWright を使ってE2Eテストを書いてみた | Tech Blog | CRESCO Tech Blog
こんにちは。クロステック・オフィスの benishouga です。 この記事は「CRESCO Advent Calendar 2020」20日目の記事です。 今回は PlayWright というライブラリについて、調べる機会があったので、PlayWright とは？という説明を少しと、簡単な使い方として「ユーザー操作を記録してのコード生成」「マルチブラウザ向けの E2E テスト」を行ってみたいと思います。
【vue2 / vue3 】書き方の変更点まとめ(TypeScript) - Qiita
TypeScriptで書く、vue2とvue3の変更点 詳しい説明は割愛した書き方の変更点の備忘録です。 ※他の変更点等もあると思いますが、現時点で自分が使ったもののみを挙げています。 ここにない情報やご指摘などぜひ教えてください！ まずは同じコードのvue2とvue3の比較です。 ↓表示させたい画面はこちら インプットタグに入力した文字をv-modelで表示させるシンプルな挙動です。 クリアボタンを押下すると入力した文字が消えます。 vue2での書き方 <template> <div> <h3>名前を入力してください</h3> <span>名前：</span> <input type="text" v-model="name" /> <br /><br /> <div> 私の名前は「{{ name }}」です。 <button type="button" v-on:click="clea
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsの2系でTypeScriptを使う「Options API」と「Class API」 | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
Vue3のCompositionAPIの書き方を、もっと簡潔にしてみる[Vue.js]