クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【Vue.js】コンポーネントにカウンターを仕込む(※dataオプションを無名関数に!)

JS

Vue.jsシリーズ続きです。前回はコンポーネントでハローワールド的一歩を踏みしめました。今回はコンポーネントにカウンターを仕込んでみます。ポイントはdataオプションの値を無名関数にすることです。それではいきましょう!

【p5.js】Generative Design with p5.js「色 P_1_0_01」のコードを読み解く

p5.jsの続きです。前回まではドットインストールのコードを紐解きました。今回からは「Generative Design with p5.js」のコードを見ていきたく。最初は「色」編です。それではいきましょう!

【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)

JS

Vue.jsシリーズの続きです。前回まではlocalSltrageとの連携でしたが、今回からコンポーネント。コンポーネントって部品を一まとめにする機能ですが、独自のタグ名を命名できます。これを見かけるとJSフレームワーク感が高まるんですがw、いよいよ自分でも実…

WebエンジニアやWeb業界の日本産業界での位置付け(総務省資料より)

「Webエンジニア」と「フロントエンド エンジニア」「バックエンドエンジニア」とか「IT業界」と「Web業界」などの位置付けが曖昧だったので調べてているうちに、総務省の資料に辿り着き、日本産業界全体の中での位置付けも把握できました。それでは、どうぞ…

【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-3)

JS

Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はJS編その2としてVueインスタンス以外のコードを見ていきました。localStorageを読み込む箇所も見受けられました。今回がラスト。Vueインスタンス本…

カスタムデータ属性をCSSやJSで読み込む(テキストをHTMLに集中させる)

HTML5から追加された「カスタムデータ属性」。data-hogeといった形式で独自の属性を作れます。これを使うと、これまでCSSやJSの中に直接書いていたテキスト情報をHTMLに集中させて、CSSやJSはカスタムデータ属性からテキストを読み込む形にできます。テキス…

【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-2)

JS

Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はJS編その1としてコードの全体像を見ていきました。今回から詳細編。ひとまずVueインスタンス本体以外の部分を見ていきます。localStorageの設定も…

【CSS】conic-gradientで放射状の光線を放つ太陽を作る

CSS

CSSのグラデーションで最近追加されたconic-gradient。これを使うと放射状の光線を表現できるようなので、前々から存在は気になっていました。実際に触ってみた。光線ということで「太陽」を作ってみました。それでは、いきましょう!

【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-1)

JS

Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと連携したTodoリストのコードを読み解く。前回はHTML、CSS編でした。今回はJS編。localStorageと関わる部分を見たかったけどボリュームがあったのでまずは全体像から。それではいきましょう!

【Tone.js】3コード楽器を1オクターブに拡張する

JS

Tone.jsシリーズ、前回は3コード楽器のコードを拡張しやすいようにリファクタリングしました。今回は鍵盤を1オクターブ分に拡張しました。また、和音の一箇所を打ち替えるだけでメジャー調をマイナー調に変更することにも成功。それではどうぞ!