クモのようにコツコツと

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

フロントエンドのモダンな開発環境を作るために調べていること

開発環境を「モダン環境」にしたいなーと思いつつ知識がなさすぎて足踏みしていました。「ないならば、つけてしまおう知識ギス」というこでとにもかくにも調べ始めています。はい。

【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デザイナーが「その次(フロントエンドエンジニア)」に進むための重要なキーワード…

ラテラルシンキングとロジカルシンキングを使って右脳も左脳もフル稼動しよう!

右脳を使う「ラテラルシンキング 」と左脳を使う「ロジカルシンキング」が対な関係で面白い!右脳型の方も左脳型の方も二つの思考法を車の両輪のように活用して、脳をフル稼動させましょう♪(ちなみに私は典型的な左脳型人間ですw)。なお、今回は二つの思考…

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

JS

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

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

JS

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

GlideならPWAを5分で作れるというのでBeatle DBというアプリを作ってみた

令和からアクティブに行こう!ということで初めて勉強会に参加してみた。「PWA Beginners 勉強会 #5」、PWAは前から記事などで気にはしていたけど実際にどんなものなのか知っておきたく。当日、「Glide」を使ってスプレッドシートから5分でアプリを作る実演…

【Laravel】MVCのコントローラ(C)ことはじめ(3年B組金八先生を表示する!)

PHP

Laravelの続きです。前回はルーティングファイルでページ生成、パラメータ読み込みをしました。今回は「MVCアーキテクチャ」の「C」にあたる「コントローラ」を理解する。それではいきましょう!!

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

JS

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

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

JS

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

CSS Gridで12分割グリッドシステムが簡単に作れた(grid-template-areas推し!!)

CSS

HTML要素を横に並べる方法はいくつかあるが、その中の一つ「CSS Grid」。これまでちゃんと触ったことがなかったのでトライしてみた。CSS Gridとグリッドシステムは相性がいいのではないか?と思い実際に作ってみた。なお、自分はgrid-template-areas推しです…

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

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

【Laravel】ルーティングファイル(routesディレクトリのweb.php)にページを直書きしてみる

PHP

Laravelの続きです。前回はローカルのMAMP環境からHerokuにデプロイしました。今回はルーティングファイル(Routresディレクトリのweb.php)にページ情報を直書きして、いくつかの動的なページを作ってみました〜。完成品はHerokuにデプロイしてます。それで…

【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!

LaravelをMAMP環境からHerokuにデプロイするためにやったこと調べたこと

PHP

Laravelシリーズ、前回はLarvelのファイル構成を確認し、Hello worldしました。今回はローカルのMAMP環境に作ったLaravelをHerokuにデプロイします。それでは、行ってみまSHOW♪

Laravelの/publicをルートに変更しHello worldする

PHP

前回、MAMP環境でLaravelの白い画面を出しました。今回はLaravelのファイル構成を見ながら、URLパスの変更やHello worldなどを行いました。

Laravel元年!インストールしてMAMP環境で白い画面出す!!

PHP

令和元年。そして(私にとって)Laravel元年!!何はなくとも始めました。まずはLaravelをインストールしてローカルのMAMP環境で白い画面を出すところまで。

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

JS

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

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

JS

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

【CSS】#fffと#eee、#111と#000 の間はどのくらいグラデーションになるか

CSS

CSSで色を指定するときによく使う#fff、#eeeなどの3桁コード。便利だけど色の差が若干激しい?16進数ではどのくらいのグラデーションになるか調べてみた。

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

JS

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

【JS】Math.random()でつくるサイコロとおみくじ

JS

JSのMathオブジェクトには数値系の組み込み関数が用意されています。その中の乱数(ランダムな数字)を返す関数Math.random()を使ってサイコロとおみくじを作ってみました。

【WordPress】Gutenbergでコードを1行も書かずにペライチページを作る!

PHP

WorPressは更新作業をダッシュボードで完結させることができ、クライアントが自分で自由にコンテンツを更新することができます。そうなってくるとペライチページも同じように更新したくなってきますよね。Gutenbergのブロックを使えば可能なんじゃないか?と…

【indeed】Web業界(フロントエンド〜サーバサイド)技術キーワード別の求人件数(2019年4月)

Web業界(フロントエンド〜サーバサイド)の記事には次々と新しい技術キーワードが登場します。「○○はオワコン」「これからは○○!」などいろいろ書かれています。現時点のWeb業界ではどんな技術が求められているのでしょうか。前回までと同様、indeedの件数…