KAEDE Hack blog

JavaScript 中心に ライブラリなどの使い方を解説する技術ブログ。

JavaScript Object の === による比較では中身は比較されないので JSON.stringify() して比較する

object の中身が比較で見られていないことを確認する === で同じ内容の object が true にならなかった object の比較をして、うまくいかなかった const dog = { name: 1, age: 5, } const dog2 = { name: 1, age: 5, } console.log(dog === dog2); これが …

Vue VNode render での element() での html tag の作成

参考 Vue.js & Nuxt.js 超入門 Ch 02 88P 子ノードの組み込み render で element を直接書く 普段とどう違うのか 普段書いている template に html タグや Vuetify タグなどは、 最終的に createElement で出力されている 今回は element を直接 render する…

Vue Vuetify モーダル エディタのガワを作る

why モーダルで開く管理画面のエディタを作りたくなった。 todo - やること kei-s-lifehack.hatenablog.com 前回の記事でモーダルは作れた とりあえず v-card の中に input をいくつか作ってみる v-card に v-text-field を入れる 前回作った v-modal の中の…

経営 会計知識 -- 利益周りの知識を整理する -- 粗利、営業利益、経常利益、純利益

why 最低限、人と話をするのに必要だから 参考 経常利益、純利益、営業利益・・・「利益」の違いを答えられますか?-Manegyニュース | Manegy[マネジー] manegy.com の記事 biz.moneyforward.com moneyforward の記事 用語一覧 粗利、営業総利益 ( 売れた価…

基本情報 -- 統計問題

正規分布 -- H19 Spring 8 www.fe-siken.com この問題で出たが、u も P も図の見方もわからない bellcurve.jp ググってみると、統計学の知識らしい。やってみる そもそも標準正規分布表というものがある 横の行が 0.0 ~ 2.0 縦の列が 0.0 ~ 0.9 まであって、…

Vuetify v-dailog で最小限のモーダルを作って出す

やりたい事 モーダルの状態管理。 isOpen で管理する isOpen が true の時に空いていて、false の時に close になる isChanged の状態を作成し、これが変わっていればモーダル閉じる時に忠告する 用意するもの モーダルのそのものを作成しないとロジックは組…

Vuex store getter を store 内部で試してみる

why 仕事で必要になったから Vuex の getter setter とは Vuex はフロントエンド側にコンポーネントを凌駕した状態を持たせるもの。 Store という 大枠の中に、state を定義して その getter setter を作成する。 バックエンドの getter setter を逐次呼び出…

Vue.js LifeCycle -- created, mounted, computed, watched, beforeRouteLeave, beforeDestroy

v3.vuejs.org why React の componentDidMount などとは違った Vue のライフサイクルのタイミングメソッドを整理したくなった。 各ライフサイクルとタイミング とりあえず全部 console に出す beforeCreate, created, BeforeMount, moutend, beforeDestory …

Vue のプロジェクトを html js 1 ファイルずつのみで最小限で作る

why 何も理解せずにホイホイ入れるのもダメだと思って how <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> {{ msg }} </div> index.html を作る cdn の vue の dist をロードする div id app を作成、中で js の vue 部分から定義される msg の data 変数を展開する var app = new Vue ({ el: "#app", data: { …

Vuex Store -- state, mutation を作成して store の外、 App.vue で呼び出す

why 仕事で store をたくさん使うから。Module export 訳がわからないよ! CDN と npm インストール vuex.vuejs.org https://unpkg.com/vuex@2.0.0 これを CDN のように利用するか npm install vuex --save npm でインストール こうやって使用を宣言する。 v…

基本情報 負の 10 進数の 2 進数変換と 8 bit ( 1byte ) 表記。補数変換+1

参考 https://note.cman.jp/convert/bit/ cman jp の変換サイトが計算も出るので便利。 任意の数を入力して 変換と 8bit 表記の計算まで解説してくれる。 ユーザー登録も通信もいらないし、私もフロントでこういうサイトを作りたい。 1 と -1 の実例。反転+1…

Vuetify v-select でフォームを作る。-- 初期値のセットと関連する選択肢の非活性化切り替え

why 仕事で必要になったから。 最小限でフォームとして必要な機能が揃っているものを作る。 todo -- この記事でやること Vuetify の セレクトボックス作成ツールである v-select の使い方の説明 初期のセット 関連する選択肢の無効化 v-selct フォーム周りで…

基本情報技術者試験 (FE) を受けようとしたがまだ受け付けていなかった

why 超基本的なコンテキストとして身につけておく必要があるから what is this 基本情報技術者試験(FE) ~ ITエンジニアの登竜門 ~ [ Fundamental Information Technology Engineer Examination ] 午前 80 問 午後 5/11 問 ( 選択 ) how to apply www.jitec…

Day.js -- 月と週の日本語化と日付のYYMMDD の表示を変えられるライブラリ

why 日本語化の際に 苦戦したのでやってみる dayjs とは 特定の言語の週と月の名前の配列を取れるライブラリ install day.js.org npm i dayjs added 1 package, and audited 2 packages in 1s シンプルだからかとても軽い。 locale: [Function: S], [11/39] …

Nuxt アプリを立ち上げてディレクトリ構造を見る

why 仕事で Nuxt を使っていて、下記の目的を1から実装できるようになりたいため。 S3 に静的サイトを上げられるようになったし、個人サイトの人と会ったり Zoom したりゲームする予約フォームを作成したい。Vue で。 To Do -- 目的 Nuxt での基本的な _id …

基本情報 10進数と2進数の双方向計算、小数部と循環小数、2進数から8,16進数の変換。

参考 やさしい基本情報技術者講座 2016, 高橋麻奈, P7 ~ www.rapidtables.com 変換テーブルアプリ、検算とか問題作るのに使える 10 進数からの変換 2進数 への変換が計算が必要で一番難しい。 10 進数から 2進数 -- 2 to 10 , 4 to 100, 8 to 1000 2進数へ。…

技術と資格の方針 From 2021-7-25 to 11-30

Vue 現状の技術は遅れない程度にタスクの補完と復習中心の勉強をする FE 基本情報。これをメインでやる。インフラでもアプリでも必要。 書籍を購入して過去問道場に一番時間を使うことにする。 Linuc 102 いつでも受けられるから、忘れない程度に持っている…

AWS S3 の buckets に html を upload してアクセスできるようにする

why シンプルに FW なしで S3 での公開を試してみたくなった ref https://qiita.com/dogwood008/items/a92abae789f4b0466f38 AWS アカウントの作成と Amazon の買い物アカウントのリンク これらを作成すると S3 の buckets を作成できるようになる ROOT と I…

Vue.js 説明記事書くことリスト

解決できそうなことは解決して記事にする 少し試せば理解できそうなこと そもそも bind とは何? $emit の使い道 v-model を v-bind と v-on のサンプルと使い分けて詳しく説明 Vue.component での template とタグとして template 書いちゃう場合の違い Vue…

Vue Prop の値を v-bind で親コンポーネントを継承して子コンポーネントで表示する

まずは Vuetify 起動時の data からの表示を見てみる App 側でのとってくるコンポーネントの指定と描画 Vuetify の App コンポーネントで HelloWorld コンポーネントを import して使うコードを見てみる。 まず script のタグのところから見ていくと import …

Vue Vuetify prop ? な name を data のように出力しようとしたができなかった

michaal in thiessen の説明、子供に渡す方法 michaelnthiessen.com Data は プライベートで、なんでもストアできるところ Props は data を親コンポーネントから子供コンポーネントに渡す「方法」 と書いてある。 <HelloWorld coolProp="coolprop"/> のように継承するのは React と同じのよう</helloworld>…

Vue watch, Watcher での状態監視処理の使い方。

watch とは 監視メソッド。値をとって、それが変化する時に処理を走らせることができる。 data: () => ({ message: 'How is you job status?', jobStatus: 'your status is ...', jobItems: ['never change', 'changing', 'changed recently'], }), watch: {…

Vuetify v-select の items と v-model の違いを比較する

qiita.com Vue では data に書いた変数をを v-model で双方向 binding といって、input の側からも変数を変更できるようにできる。 これを v-select でだめす 試す 普通に vuetify の v-select を使ってみる サンプルは公式の vuetifyjs.com この見た目を実…

Vue computed(), data(), watch(), を調べる

css-tricks.com この記事によると Methods はそのまま関数 Computed は data と同じで特定のデータの変更に反応する。依存性に基づく。 フォームに v-model と使うことで、入力中に検索される UX を実現できるらしい。 Watcher は Vue にストアされたプロパ…

Vuetify テンプレの HelloWorld コンポーネントの 内部ベタ書きのデータの取り回しを見てみる

why 前回は vuetify でのルートの App.vue を見た kei-s-lifehack.hatenablog.com App では template の中に v-app, v-app-var, があり、v-main で HelloWorld コンポーネントを呼び出していた。 なので HelloWorld コンポーネントを見てみる template 全体…

Vuetify を動かしてテンプレートの template, v-app, v-app-var, v-main, を見てみる

install libraries Vue の Install vuejs.org npm install vue added 1 package, and audited 2 packages in 5s found 0 vulnerabilities npm notice npm notice New minor version of npm available! 7.6.1 -> 7.19.1 npm notice Changelog: https://github…

Vue Learning 1 -- {} と vue data

## ref https://youtu.be/F7PLPJqVotk 11m50s ## ブラケットの展開 ´´´ div app {{ title }} div ´´´ と言う app の id をつけた html を書いて ´´´ const app = {... data return title = 'hoge' } ´´´ vue で仕込める ## クリックで関数発火 v-on:click = …

Linuc 101 合格 613点 -- 初IT資格

合格詳細 2021-07-04 合格 ボーダーライン 480 獲得点数 613 why インフラでもアプリでも役に立つとの事で。 工数 約2ヶ月 受け方 ピアソン vue のサイトで申し込んだ 申し込んだ翌日の横浜西口テストセンターで受けられた。 税込 16,500 円 概要 Linux のイ…

Docker で 複数の distribution を動かすためにやり方を思い出す

why Linuc level1 の勉強で、apt, yum, dpkg, などを使っていて、各種 OS を入れ替えて使いたくなった そこでは Virtual Box を使っていたが、重いアプリをポチポチ動かすより、CUI でカーネルリソースを割り当てられて快速なはずの Docker でやりたくなった…

Linux 標準入出力と入出力先の切り替え

Linux Redirect, File descriptor, 標準入出力とは en.wikipedia.org Linux では 0, 1, 2, のコマンドの引数として使える数値がある これは 標準入力と標準出力、標準エラーのことだ 英語だと stdin, stdout, stderr, と表記される steams of { input, outpu…