chai入門
はじめにテストやるぞ〜２種類assertここで{ほにゃらら}の値になっていることを確認する的なやつ。BDDexpectとshouldを使う。こっちはもっと複雑な表現ができる。自然言語(つまり普通の英語)みたいな文法で書け […]
Posted Date 5月 17th, 2020
Category in JavaScript, test
vue-property-decoratorで他のcomponentを読み込む
やりたいことこれのTypeScript バージョン
import Logo from ‘~/components/Logo.vue’
export defaul […]
Posted Date 1月 25th, 2020
Category in Nuxt.js, Vue.js
【JavaScript】foreachの in と ofの違い
なんかごっちゃになってた。inの場合プロパティ名を取得するみたい。(中身じゃない)なのであんまり使わんかも。for (let block in collections) {
console.log(block […]
Posted Date 1月 5th, 2020
Category in JavaScript
Vue Composition API とSvelteの比較
Svelteとの比較非常に異なるルートを取りますが、Composition APIとSvelte 3のコンパイラベースのアプローチは、実際には概念的にかなり共通しています。並べて例を示します。Vue
Posted Date 12月 30th, 2019
Category in Svelte, Vue.js
JavaScript replace
構文リプレスした文字列 = リプレイスしたい文字列.replace(regexp or substr, newSubstr or function)
第1引数(パターン)regexpRegExp オ […]
Posted Date 12月 16th, 2019
Category in JavaScript
【ESLlint】 Use object destructuringとは？
配列とオブジェクトからの破壊を優先する（prefer-destructuring）コマンドラインの–fixオプションは、このルールによって報告された問題の一部を自動的に修正できます。JavaScript ES […]
Posted Date 12月 14th, 2019
Category in JavaScript
three js 比較
three jsとは？デフォルトのWebGLをいい感じに使うためのライブラリです。WebGLウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様。WebGLはHTML5のcanvas要素に描画する。 […]
Posted Date 12月 2nd, 2019
Category in JavaScript
SVG入門
SVGとは？かつあい！！SVGファイルの中の探索rectrect 要素はSVGの基本図形であり、四角形を生成する際の基準となる座標と、そこからの幅と高さを指定します。また、角の丸まった四角形を作ります。なぜこれが必要なの […]
Posted Date 12月 1st, 2019
Category in JavaScript, SVG
End to End (E2E) テストをやりたい！！
いきさつ弊社ではまったくテストを導入してきませんでした汗ユニットテスト導入を検討したこともあったのですが・・・・汗大きな理由としては「開発スピードが落ちる」正直マイクロチームで開発スピードを重視するとテス...
Posted Date 11月 29th, 2019
Category in JavaScript, test
JavaScript計算Mathまとめ
いきさつMathとかってよく出ててるけどあんまりよくわかってないご。Mathの例 Math.min(Math.max(val, min), max);
Mathオブジェクトとは？JavaScript […]
Posted Date 11月 17th, 2019
Category in JavaScript
【コードリーディング】spritesmith.js・クラス記法使わない編。
spritesmith読んでみるよ！spritesmithとは？CSS画像スプライト作ってくれるやつです！詳しくはこちらhttps://github.com/twolfson/spritesmith特徴とかこれ昔書かれた […]
Posted Date 11月 11th, 2019
Category in JavaScript
【コードリーディング】backbone.js読んだ感想
ざっくりコアな部分はそれほど複雑ではありません。要はEventがすべての鍵を握っていて、具体的には親クラスになります。(JSなので厳密にいえばプロトタイプになるんだけど)ListienTo()に登録すると内部的にはon( […]
Posted Date 10月 27th, 2019
Category in backbone.js, JavaScript
Vue コードリーディング・・・・
ゆっくりよみましょ・・・Vueパッケージのbuildディレクトリってなに・・・？packete.jsonのbuldにビルド内容が書いてあります。ようはwebpackです。config.jsの内容がある。// Runtim […]
Posted Date 10月 11th, 2019
Category in Vue.js
XMLHttpRequest
いきさつchromeのデベロッパーツール画面のNetwork欄を見ていて気になりました。typeのXHRとは？XHRとは？XMLHttpRequestの略です。XMLHttpRequestとは？APIです。ブラウザで非同 […]
Posted Date 9月 29th, 2019
Category in JavaScript
TypeScript namespaceとは？
namespaceとは？内部モジュール = namespace使用例こんなかんじで別ファイルであっても同じ名前空間を参照させることでinterfaceを拡張することができる// node.d.ts
declar […]
Posted Date 9月 7th, 2019
Category in TypeScript
初めてReact触ってみた感想。
前提Nuxt.jsの人の目線です。ざっくりいうとうわ〜。。本当にライブラリって感じだ〜。。。こりゃー１から作っていくとなるときついだろうな〜。。というかNuxt(Vue)にそっくりやな〜。Nuxtよりも低レベルって感じだ […]
Posted Date 9月 3rd, 2019
Category in JavaScript, React
ParcelのPromise関数がUncaught ReferenceError: regeneratorRuntime is not definedエラー
なんやねんこれどうやらacync/awitがだめみたい。対策方法.babelrcファイルと作成する2.以下のように記入します{
“presets”: [
[“env”, {
“targ […]
Posted Date 8月 13th, 2019
Category in JavaScript, Parcel
data:image/jpeg;base64,/9j/4AA…base64の先頭についてるのヘッダのようなものはなんですか？
いきさつbase64を触れているとこんな出力になりました。これはすべてbase64ということになるんですか？いいえ、違います。これはData URIです。DataURLはこれらすべて。データの書式方式だと覚えておけば良い […]
Posted Date 8月 12th, 2019
Category in JavaScript
【JavaScript】ArrayBufferとはなにか？
一言でいうとバイナリデータを扱うための仕様だよ。引数のnumberの数だけ物理メモリの領域を確保してくれるよ。その物理メモリのことをバッファと呼ぶよ例//
var buffer = new ArrayBuff […]
Posted Date 8月 12th, 2019
Category in JavaScript
BLOB URLとはなにか？
参考src=”blob:https://example.com.video”とかってなに？Blob URLは、ブラウザによって内部でのみ生成できます。 URL.createObjectURL（）は […]
Posted Date 8月 11th, 2019
Category in HTML, JavaScript
yarn create とはなにか?
yarn create とはなにか？yarnを使っていい感じにパッケージをインストールして実行してくれるやつ。主にプロジェクトの雛形を作成するのに使われてます。reactとかもyarn create react-app […]
Posted Date 7月 5th, 2020
Category in JavaScript
WebKitとは？
いきさつwebviewいじってたらwebkit問題に遭遇した。しかしながら私はあまりよくwebkitについて知らないことに気づいた。WebKitとは？WebKit（ウェブキット）は、アップルが中心となって開発されているオ […]
Posted Date 2月 3rd, 2020
Category in JavaScript
Property ‘value’ does not exist on type EventTarget in TypeScript
いきさつエラーはまり。。解決Eventエレメントは基本的にHTMLElementが入ってるんだけど厳密には確約されているわけではいので怒られたみたい。なのでキャストを書いて明示的にHTMLElmenet入ってますよ〜って […]
Posted Date 1月 13th, 2020
Category in TypeScript
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
いつ？github actionのワークフローでビルド時。warning package-lock.json found. Your project contains lock files generated by to […]
Posted Date 1月 3rd, 2020
Category in npm
【JavaScript】Lodashとは？
はじめにJavaScriptプロジェクトでは「Lodash」というよく使わているライブラリが使われている。lodashとは？ユーティリティー関数を集めたライブラリです。UnderScore.jsにインスパイアされて作られ […]
Posted Date 12月 23rd, 2019
Category in lodash
【TypeScript】Utility Types読んでみた。
概要ざっと見てみる。感想書いてみる。Partialいいね！使える。Readonlyいいね！使える。Recordいいね！
使える。Pickまぁまぁ。Omit
Posted Date 12月 15th, 2019
Category in TypeScript
【Vue】v-ifとv-showの違い
いきさつようやく理解した。前提この前提がわかってないと意味がつかめません。cssのdisplay:noneでもそのDOMはブラウザにレダリングされるので初期表示時にコストがかかる。切り替えるだけならappend & […]
Posted Date 12月 5th, 2019
Category in Vue.js
SVGの線を動的に引く方法
いきさつ弊社案件で文字の線を動かすやつをやりたいってことになりました。どうする？strokeDashoffsetを操作する！！以上！！…もう少し詳しくstroke-dashoffsetとは？線の位置を指定する […]
Posted Date 12月 1st, 2019
Category in JavaScript
バーチャルDOMってなに？コードレベルで確認したい
いきさついつも適当にやってたのでちゃんと理解したい。調べる前の自分の予想結局ただの関数結局実際のDOMへとレンダリングしたいといけないのだから速度的にはそんなに変わらないのでは？What is the Virtual D […]
Posted Date 11月 30th, 2019
Category in JavaScript
Javascriptで型定義ってできるの？と思ったらflowだった話
いきさつ.jsのファイルに型定義のやつが書いてあって、「あれ？ES6とかでも型定義できるの？」と思ったらflowでした。…これ初めて知りました。flowとは？facebookが作ったタイプチェッカーです。&# […]
Posted Date 11月 24th, 2019
Category in JavaScript
JavaScript deferredのthenとdoneの違い
いきさついつもわすれるので書いておく。まずdoneは？？doneはPromiseがresove(成功)を返した場合です。じゃあthenは？？doneとfailのショートハンド..というか一括で定義できる方法です。第1引数 […]
Posted Date 11月 15th, 2019
Category in JavaScript
JavaScript prototype拡張触ってみた。
いきさつprototype拡張って「prototype汚染」っていう言葉を知ってたから実際問題使うことなんて無いなんて思ってました。が！！！！暇なのでvueのコード見てたら結構prototype拡張使っているところありま […]
Posted Date 11月 3rd, 2019
Category in JavaScript
backbone.js入門
はじめにわかりづらいのがMVCなのよね〜。ModelViewCollectionコレクションってなによ？まぁ焦らず見ていきましょう・・・・backbone.jsの最も大きなビジョンはUIとビジネスロジックの分離です！！V […]
Posted Date 10月 22nd, 2019
Category in backbone.js
JavaScript Svelteとは？
Svelteサイバネティックに強化されたWebアプリ…とのことです。まぁ一口でいうとReactやVueのようなUIの状態を管理するライブラリ・・・って感じです。ざっとみた記述形式もReactやVueに似ていま […]
Posted Date 10月 11th, 2019
Category in JavaScript, Svelte
TypeScript型定義ファイルとはなんなのか？
いきさつTypeScript勉強中。d.tsファイルってなに？いまだによくわかってない。。d.tsとは？型定義ファイルといいます。型宣言ファイル何に使うの？ライブラリの型定義ができるようにするためです。グローバルライブラ […]
Posted Date 9月 7th, 2019
Category in TypeScript
【TypeScript】interfaceとtypeの違い
いきさついつもてきとーにつかってますが、イマイチわかってませんでした。何が違うの？なぜそんなものがあるの？interface常に名前付きのオブジェクトになるいわゆるオブジェクト指向におけるClassに対してのinterf […]
Posted Date 9月 7th, 2019
Category in TypeScript
WebSocketとは？
いきさつ今の案件でチャットを作ることになりそうなので調べてみた。WebSocketとは？双方向通信専用プロトコルのこと、及びそれによる双方向通信のこと全体を指すことも。なにができるの？チャットとか。ああいうのです。Aja […]
Posted Date 8月 17th, 2019
Category in JavaScript
JavaScriptで画像のオリジナルの大きさを取得する方法
はじめにこれ便利だな〜と思ったのでメモしときます。これがnaturalWidth&Heightだ！！画像のHTMLImageElementにはnaturalWidthとnaturalHeightというプロパティが […]
Posted Date 8月 12th, 2019
Category in JavaScript
【JavaScript】URL.createObjectURL(blob)とはにか？
一言でいうとURL.createObjectURL() 静的メソッドは、引数で指定されたオブジェクトを表す URL を含む DOMString を生成します。 URL の寿命は、それを作成したウィンドウ内の docume […]
Posted Date 8月 12th, 2019
Category in JavaScript
BlobとBase64の違い
はじめに…どっちもバイナリ…くらいの認識でした。ちゃんと理解しないと..BlobBinary Large OBject の略。要はバイナリ。バイナリはテキストとか画像とかのおおもとだということです […]
Posted Date 8月 11th, 2019
Category in JavaScript
最近のコメント