Chiaki

勉強、技術、トラブルシューティングの備忘録/便利な事の紹介:)🩵

Chiaki

勉強、技術、トラブルシューティングの備忘録/便利な事の紹介:)🩵

v-col、勝手にflex-grow: 1;があたる

課題 FontAwesomeで挿入したアイコンに、flex-grow: 1;が勝手にあたり、この余白をどうにか詰めて親要素v-rowを右寄せにしたい 解決法 v-colにクラス名を付与し、flex-grow: 0;指定。v-rowへはd-flex justify-endを指定にて解決 ・FontAwesomeのアイコン要素を囲っているv-colに「icon-box」クラスを付与 ・CSSにて「flex-grow: 0;」を指定 ・親要素のv-rowにd-flex ju

Chiaki

    • FontAwesomeをコピペで使用する

      以前、Vuetifyドキュメント通りに導入をしたものの、なぜかコピペで使用できず一部修正を加えてアイコンを挿入した為、コピペで使用する方法を備忘録として記録する 開発環境 MacBook Pro M1（OS Sonoma14.1.1) Vuetify 3.5.1 Node.js 17.9.1 Yarn 1.22.19 TypeScript 5.3.3 1.以下をすべてインストール yarn add @fortawesome/fontawesome-svg-co

      Chiaki

      • コワーキングスペースならAWS Startup Loft Tokyo

        こんにちは、ちあきです。 設計書の作成＋コーディングに注力し、noteの更新がおろそかになっておりました（深く反省） さて、以前にAWS Startup Loft Tokyoを利用させていただき、非常に快適でしたので遅ればせながらご紹介したく存じます。 AWS Startup Loft Tokyoとは ・Amazon Web Services, Inc.が提供している無料のコワーキングスペース ・営業時間は平日10：00〜18：00 ・電源、WiFi 、軽食、飲み物、電

        Chiaki

        • Vuetifyのv-btnを小文字にしたい

          はじめに Vuetifyを使用してログイン画面を実装時、ボタンの大文字LOGINをLoginで表示させたいという課題にぶつかった。 解決法 CSSでtext-transform: none;を指定 //template<v-btn class="btn" type="submit">Login</v-btn>//CSS.btn { text-transform: none; //他CSSは割愛 } ※text-transformとは 　英数字における

          Chiaki

        v-col、勝手にflex-grow: 1;があたる

        Chiaki

          Macログイン項目「バックグラウンドでの実行を許可」を削除する方法

          はじめに 　メモリの消費が激しく、色々トラブルシューティングを実施している際「"バックグラウンドでの実行を許可"にアンインストール済みのAppが表示されているな」 ということに気づいた。（adobeとMAMP PROをアンインストール実施済み） システム環境設定からは消去出来る様子が無い為、以下方法にて削除した。 「バックグラウンドでの実行を許可」に表示される不要なApp表示削除方法 　MacintoshHD＞ライブラリ＞LaunchDaemons内の不要なplist

          Chiaki

          Macログイン項目「バックグラウンドでの実行を許可」を削除する方法

          Chiaki

          CompositionAPIで書かれたPiniaStoreの構文、VueDevtoolsではどのように表示されるのか検証してみた

          先日DevtoolsでPiniaの欄を開いた際に疑問に思った。 「state,gettersが表示されているけど、CompositionAPIのsetupで書かれたStoreの構文、Devtoolsではどのように表示されるの？」 前提 CompositionAPIのsetupを用いてStoreを記述する際、以下のように記述する export const useCounterStore = defineStore('counter', () => { const cou

          Chiaki

          CompositionAPIで書かれたPiniaStoreの構文、VueDevtoolsではどのように表示されるのか検証してみた

          Chiaki

          TypeScript型注釈一覧

          TypeScriptの学習をした為、一覧化していく TypeScriptとは 2012年、Microsoft社が発表したJavaScriptを拡張した言語 厳密な型付けをすることができる為、大規模開発で効果を発揮 型注釈 let 変数名：データ型 文字列(string) 数値(number) 数値で扱えない範囲の数値(bigint) 真偽値(boolean) null(null) undefined(undefined) シンボル(symbol) le

          Chiaki

          TypeScript型注釈一覧

          Chiaki

          TypeScript学習前のJavaScriptデータ型復習

          初めに TypeScript型注釈の学習前に、前提としてJavaScriptのデータ型の認識が必要である為復習していく number型 ・数値であることを表す ・-9007199254740991〜9007199254740991を表すことができる ・文字列から数値への変換を誤る等、数値ではない値である場合にNaNが返ってくることがある 100 //整数1.5 //小数111_222_111 //桁の大きい数字はアンダースコアで表すことができる bigint型 ・

          Chiaki

          TypeScript学習前のJavaScriptデータ型復習

          Chiaki

          JavaScriptアロー関数のルール

          アロー関数とは ES6で拡張された、簡潔に記述するための構文である アロー関数のルール ・無名関数の場合、functionの省略が可能 ・引数の後ろにアロー演算子=>を追加する ・引数が1つしか受け取らない場合は引数の（）の省略が可能 →ただし引数がない場合、または引数が2つ以上は引数の（）省略不可 ・関数内の処理が1行のみの場合に{}の省略が可能（任意であるため省略せず記述しても問題ない） →{}を省略すると、自動でreturnされたことになるためretuen(戻り

          Chiaki

          JavaScriptアロー関数のルール

          Chiaki

          Vue.jsでCSSアニメーションのtransitionを使用する場合

          Vue.jsでアニメーションを使用する際、以下3つの方法がある事を学んだので記録していく。 transitionで囲まれた要素に対し、以下デフォルトClass名を適用させる .v-enter-from .v-enter-to .v-enter-active .v-leave-from .v-leave-to .v-leave-active <!doctype html><html lang="ja"> <head> <meta charset="UTF-8" /

          Chiaki

          Vue.jsでCSSアニメーションのtransitionを使用する場合

          Chiaki

          v-if/v-showの違い

          どちらも条件式が成立する際に表示、条件式が不成立の場合に非表示になるが、違いは非表示の際にDOMにデータが残るか、またはDOMから完全に削除されるか v-if ・条件式が成立する際にDOMに出力、条件式が不成立の場合はDOMに出力されず完全削除される ・v-if/v-else-if/v-elseで条件分岐が可能（記述方法はバニラJavaScriptのif文頭に「v-」をつけた形） ・再レンダリング毎にDOMノードヘの追加、削除が発生する。そのため値の変化が少ない場合や、D

          Chiaki

          v-if/v-showの違い

          Chiaki

          SPA（シングルページアプリケーション）と仮想DOMの概念

          モダンな開発を行う上で必要な知識のため、アウトプットを兼ねて掘り下げてみる SPA（シングルページアプリケーション）とは ユーザが操作を行う際、ページの全体を読み込まずに差分のみを更新する技術のこと ・初回にページ全体を読み込み、以降は差分のみを更新するため高速な処理が可能 （従来のMPAでは都度ページ全体を読み込むため、SPAと比べると動作が遅い） ・SPAで実装するとSEO対策でヒットしづらくなるが、対処することで向上可能 仮想DOMとは 実際のDOMと同期させる

          Chiaki

          SPA（シングルページアプリケーション）と仮想DOMの概念

          Chiaki

          v-model/v-bind/v-onの使用用途

          データバインディングの明確な違い v-model 双方向データバインディング ・コンポーネントが持つデータとユーザがフォームコントロールから入力する内容を双方向にバインド。DOMにリアルタイムで反映させる ・初期値にvalue属性、checked属性、selected属性の設定不可。dataで設定する必要がある ・文字入力するとinputイベントが発生、かな入力している場合にEnterで入力候補が確定するとchangeイベントが発生 （※半角文字入力の場合はchangeイ

          Chiaki

          v-model/v-bind/v-onの使用用途

          Chiaki

          MacOS Sonomaにしたら、GitHubへプッシュできなくなった話

          はじめに MacOS Montereyの紫色のデスクトップ画面が気に入っていた為、OSをアップグレードしていなかったが気が向いたのでSonomaにアップグレードしてみた。 しかし開発を行う上で弊害が発生、ターミナルでエラーが表示された。 エラー1 xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Dev

          Chiaki

          MacOS Sonomaにしたら、GitHubへプッシュできなくなった話

          Chiaki

          なんとなくで使用していた非同期処理【async/await/promise】

          お恥ずかしながらaxiosでjsonデータをGETで引っ張ってくる際、検索で出てきたソースコードの一部を変更してなんとなくで使用していました。 実装はできたものの、知見がないことに危機感を覚えました。 非同期処理とは 処理を並行して、バックグラウンドで別処理させる方法 (通常、プログラムは上から順に処理を実行、完了、また次の処理実行…であるが、割り込み処理するイメージ) コールバック関数とは 関数に引数として渡される関数 // 非同期処理を行う関数function

          Chiaki

          なんとなくで使用していた非同期処理【async/await/promise】

          Chiaki

          Vue.jsライフサイクルについて学んでみた（OptionsAPI)

          Vue.jsのライフサイクルフックの概念がいまいち理解できておらず、ユースケースと合わせて調べてみた。 beforCreated インスタンス初期化時に実行 （dataオプションで定義したデータはまだリアクティブになっていない） created インスタンスの生成が完了し、dataオプションに定義したデータがリアクティブになった時 　・非同期処理の初期化（APIの呼び出し処理） 　・イベントハンドラの登録 beforMount コンポーネントのインスタンスがDOM

          Chiaki

          Vue.jsライフサイクルについて学んでみた（OptionsAPI)

          Chiaki