クモのようにコツコツと

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

JS

【Vue.js】コンポーネントにpropsオプションで値を渡す

JS

Vue.jsシリーズの続きです。前回はコンポーネントにカウンターを仕込みました。今回はコンポーネントに値を渡してみます。propsオプションを使います。それではいきましょう!

【Tone.js】コード切り替えボタンを設置(鍵盤とは未連動)

JS

Tone.jsシリーズの続きです。前回は一箇所の打ち換えでメジャーコードとマイナーコードを切り替えできました。次は画面上で切り替えられるようにするために、ラジオボタンを設置しました。

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

JS

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

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

JS

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

【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の設定も…

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

JS

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

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

JS

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

【Vue.js】localStorageと連携したTodoリストを読み解く(HTML、CSS編)

JS

Vue.jsで単純なものを作るとリロードしたときに初期状態に戻ってしまって儚い(はかない)。。かといってデータベースと連携したものをつくるのはまだハードルが高い。前段階として以前にも触れたLocalstrageと連携して値を保存してみたい。公式サイトのサン…

【Vue.js】Google Chartsのグラフと連動させる

JS

Google Chartsの記事で描画したグラフとVue.jsの連動に挑戦。入力した数字

【p5.js】クリエイティブコーディングに挑戦(その2)

JS

p5.jsシリーズ、前回、挑戦したドットインストールの「p5.jsクリエイティブコーディング」の続きです。今回は「# 07」以降、「色」と「動き」です。

Google Chartsでスプレッドシートを読み込んでグラフを表示する

JS

以前、GoogleChartsをQuickにStartしました。この時は連想配列の値を読み込んだのですが、今回は同じGoogleサービスであるGoogleドライブのスプレッドシートのデータを読み込んでみました。それではいきましょう!

【Vue.js】transitionタグでアニメーション効果をつける

JS

Vue.jsの続きです。前回はwatch(監視プロパティ)で簡単なクイズを作りました。今回はtransitionタグというVue.jsの独自タグでアニメーション効果をつけます。それでは、いきましょう!

【Vue.js】watch(監視プロパティ)で戦国時代クイズを作った

JS

Vue.jsの続きです。前回はcomputed(算出プロパティ)で割り勘アプリを作りました。今回はwatch(監視プロパティ)で簡単なクイズを作ってみます。それではいきましょう!

WordPressのCSSやJSをテーマのphpファイルをいじらずにダッシュボードだけでカスタマイズする方法

WordPressの前回の記事でGutenbergのブロックを使いコードを1行も書かずにペライチページを作りました。それにしてもTwenty Nineteenは…クセが強い!CSSとJSのカスタマイズ、テーマのphpファイルをいじらずにダッシュボードだけで完結できました。自作テーマ…

【Tone.js】3コード楽器のコードをリファクタリング(ループとイベントと即時関数)

JS

Tone.jsの続きになります。前回作った3コード楽器のコードに重複している部分があったのでリファクタリングしました。クリックイベントをfor文でループしたら思うようにうごかず手こずりました。目指せ全音階&全和音楽器!への布石になった回。それではどう…

webpackを理解するために調べたこと(Webデザイナー→フロントエンドエンジニアへの脱皮)

Webデザイナーとフロントエンドエンジニアを分かつキーワードがいくつかありますが、その中の一つ「webpack」について急速に知りたくなり、調べてみた記録。たぶんこれはWebデザイナーが「その次(フロントエンドエンジニア)」に進むための重要なキーワード…

【Vue.js】computed(算出プロパティ)で割り勘アプリを作る(おまけでこち亀アプリも)

JS

Vue.jsの続きです。前回はv-modelでリアルタイムにフォームの入力文字を表示した。今回はv-modelのcomputed(算出プロパティ)で複数の処理をリアルタイムに行う。「割り勘アプリ」を作る。(おまけで「こち亀アプリ」も作るw)それではいきましょう!

【p5.js】クリエイティブコーディングに挑戦(その1)

JS

p5.jsの続きです。前回はp5.js習得のためになりそうなサイトや書籍をまとめました。今回はその中でドットインストールの作例「p5.jsクリエイティブコーディング」が素敵だったので挑戦してみます。それではいきましょう!

【Tone.js】PolySynth()で和音を鳴らす(3コード楽器を作る)

JS

Tone.jsの続きです。前回はTone.Part()でメロディのタイミング、長さ、音量を調整しました。今回は和音に挑戦。3コードを奏でる楽器を作った。それではいきましょう!

【Vue.js】v-modelデータバインディング事始め(リンダリンダの歌詞を変えてオリジナルラブソングを作る)

JS

Vue.jsの続きです。前回はv-vindでボタンでリアルタイムにclass名の追加、削除をした。今回はv-modelでリアルタイムに「データバインディング」体験してみる。データバインディングとは何ぞや?フォームに入力した情報をリアルタイムで画面に反映できる。ど…

p5.jsを習得するために参考になりそうなサイト、書籍、動画たち

p5.jsの続きです。前回はいろんな図形をcanvas要素に配置してみました。次のステップに進むにあたり、ちょっと方向性が見えにくかったため、習得の上で参考になりそうなサイトや書籍をいろいろ調べてみました。

【Tone.js】Tone.Part()でメロディのタイミング、音の長さ、音量を調節する(マリオのゲームオーバー音)

JS

Tone.jsの続きです。前回はメロディ再生、シンセ音源加工、エフェクター接続を行いました。マリオの地上面メロディを打ち込みました。今回は「Tone.Part()」とうメソッドを使ってもう少し細かくメロディのタイミング、長さ、音量を調節しました。マリオのゲ…

【Vue.js】v-bindでclass名を動的に追加、削除する!(北斗の拳の名言編)

JS

Vue.jsの続きです。前回まではJSONファイルの読み込みをしました。今回は属性値の動的な変更をします。v-bindを使ってclass名の追加、削除を行います。それではいきましょう!

p5.js事始め:いろんな図形を配置してみる

JS

ブラウザでインタラクティブコンテンツを作りたくて検討をした結果、一番興味深かったp5.jeを事始めます。p5.jsは2001年からあるProcessingをJAVAからJSに移植したJSライブラリですが、WebGLに対応したりと今も進化を遂げ続けており、ワクワクしかしません!…

【Tone.js】メロディ再生、シンセ音源加工、エフェクター接続(マリオを打ち込んだ!)

JS

Tone.jsシリーズ、前回まではTone.jsに用意されているシンセ音源たちを見ていきました。今回はメロディの再生、シンセ音源加工、エフェクター接続を行います。それではいきまSHOW!

【JS】DateとsetTimeout()で作るカウントダウンタイマー(令和まであと何日?)

JS

平成最後の日に作る、令和まであと何日?カウントダウンタイマーです。JSの組み込みオブジェクトDateと組み込みメソッドsetTimeout()を使います。ふ〜、なんとか間に合った〜。それでは参ります!

【Vue.js】axiosでJSONファイルを読み込む(はっぴいえんど編)

JS

Vue.jsで外部JSONファイルの値を読み込むシリーズ、前回の続きです。前回はデータ情報が全部表示されましたが、今回はJSONデータの中の値のみを読み込みます。

【JS】変数 varとletとconst(再代入、再宣言の挙動の違い)

JS

ES2015から新しく加わった変数letとconst。なんとなく新しいから使おう、良いものらしいから使おう、というのもアレなので、挙動の違いを体験してみる。