クモのようにコツコツと

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

【メタ言語】BEMによるclass名をSass(SCSS)とEJSで書いてみる(モジュール事始め)

メタ言語の続きです。前回まではメタ言語(EJS、Sass(SCSS)、TypeScript)を同時にコンパイルする環境を作っていました。これによって、これまで「class名が長くなるんだよなー」という理由であまり手を出してこなかったBEMによるclass名がもっと楽につけれ…

【p5.js】Generative Design with p5.js「画像 P_4_0_01」のコードを読み解く

p5.jsの続きです。前回は「Generative Design with p5.js」の文字編の「01」を見ました。今回は画像編「P.4. 画像」の「01」を見ていきます。それでは行きましょう!

【React】ReactプロジェクトのAppコンポーネントを書き換えてみる

Reactの続きです。前回はReactプロジェクトの作成と実行をしました。今回はファイルの中身を見てみて、ページに表示されているAppコンポーネント部分を書き換えてみます。それでは行きましょう!

【Tone.js】Tone.Loop()でエイトビートを鳴らす

Tone.jsリズム編の続きです。前回までドラムパッドからリズム音を鳴らしていましたが、今回からはTone.Loop()メソッドを使ってドラムのフレーズを打ち込んでみます。まずはドラムの基本、エイトビートから。それではいきましょう!

【gulp】gulp-replaceの引数に書かれている正規表現を掘り下げる

gulpの続きです。前回、HTMLテンプレート(EJS)、AltCSS(Sass(SCSS))、AltJS(TypeScript)を同時にコンパイルしました。しかしEJSの空行を無くすgulp-replaceが動いていないようなので掘り下げてみます。正規表現の書き方を調べる機会になりました。それ…

【デベロッパーツール 】JSコードのデバッグ(後編:ステップ実行編)

デベロッパーツールの続きです。JSコードのデバッグ、前回はブレークポイントを設定しました。今回は次の工程、ステップ実行編です。処理をブレークすると何が嬉しいのか、ステップを実行すると何がわかるのか。実際にJSコードをデバッグしながら紐解いてい…

【デベロッパーツール 】JSコードのデバッグ(中編:ブレークポイント設定編)

デベロッパーツール の続きです。JSコードのデバッグ、前回は調べたい処理の該当コードを特定する方法をまとめました。今回は特定したコードから調べたい箇所で処理を止めるブレークポイント設定編です。ステップ実行のメニューやサイドパネルの項目もまとめ…

【デベロッパーツール】JSコードのデバッグ(前編:コード特定編)

以前、Choromeデベロッパーツールの基本的な使い方を記事にしました。今回はその続編でJSのデバッグです。まずは調べたい処理の該当コードを特定する方法(次回はブレークポイントを使ったデバッグ編です)。それでは行きましょう!

【p5.js】Generative Design with p5.js「文字 P_3_0_01」のコードを読み解く

p5.jsの続きです。前回は「Generative Design with p5.js」の形編の「01」を見ました。今回は文字編「P.3. 文字」の「01」を見ていきます。それでは行きましょう!

【React】Create React Appのプロジェクトの作成と実行(エラー対処も)

Reactの続きです。前回はクラスコンポーネントの属性を設定して固有の値を設定しました。これまではCodePenで単一ページ内のコンテンツ作っていましたが、今回からはSPA(シングルページアプリケーション)を作るべく「Create React App」を使ってみます。そ…