メタ言語の続きです。前回まではメタ言語（EJS、Sass(SCSS)、TypeScript）を同時にコンパイルする環境を作っていました。これによって、これまで「class名が長くなるんだよなー」という理由であまり手を出してこなかったBEMによるclass名がもっと楽につけれ…
p5.jsの続きです。前回は「Generative Design with p5.js」の文字編の「01」を見ました。今回は画像編「P.4. 画像」の「01」を見ていきます。それでは行きましょう！
Reactの続きです。前回はReactプロジェクトの作成と実行をしました。今回はファイルの中身を見てみて、ページに表示されているAppコンポーネント部分を書き換えてみます。それでは行きましょう！
Tone.jsリズム編の続きです。前回までドラムパッドからリズム音を鳴らしていましたが、今回からはTone.Loop()メソッドを使ってドラムのフレーズを打ち込んでみます。まずはドラムの基本、エイトビートから。それではいきましょう！
gulpの続きです。前回、HTMLテンプレート（EJS）、AltCSS（Sass(SCSS)）、AltJS（TypeScript）を同時にコンパイルしました。しかしEJSの空行を無くすgulp-replaceが動いていないようなので掘り下げてみます。正規表現の書き方を調べる機会になりました。それ…
デベロッパーツールの続きです。JSコードのデバッグ、前回はブレークポイントを設定しました。今回は次の工程、ステップ実行編です。処理をブレークすると何が嬉しいのか、ステップを実行すると何がわかるのか。実際にJSコードをデバッグしながら紐解いてい…
デベロッパーツール の続きです。JSコードのデバッグ、前回は調べたい処理の該当コードを特定する方法をまとめました。今回は特定したコードから調べたい箇所で処理を止めるブレークポイント設定編です。ステップ実行のメニューやサイドパネルの項目もまとめ…
以前、Choromeデベロッパーツールの基本的な使い方を記事にしました。今回はその続編でJSのデバッグです。まずは調べたい処理の該当コードを特定する方法（次回はブレークポイントを使ったデバッグ編です）。それでは行きましょう！
p5.jsの続きです。前回は「Generative Design with p5.js」の形編の「01」を見ました。今回は文字編「P.3. 文字」の「01」を見ていきます。それでは行きましょう！
Reactの続きです。前回はクラスコンポーネントの属性を設定して固有の値を設定しました。これまではCodePenで単一ページ内のコンテンツ作っていましたが、今回からはSPA（シングルページアプリケーション）を作るべく「Create React App」を使ってみます。そ…
Three.jsの続きです。前回は三角関数を使ってカメラの動きを制御しました。今回はさらにカメラの位置をインタラクティブに操作できるようにします。Three.jsの拡張ライブラリ「OrbitControls.js」を使います。それでは行きましょう！
gulpの続きです。前回はSass(SCSS)とTypeScriptを同時にコンパイルする環境を作りました。今回はここにEJSを加えてメタ言語（HTMLテンプレートエンジン、AltCSS、AltJS）フルセットの同時コンパイル環境にてみます。それではいきましょう！
p5.jsの続きです。前回までは「Generative Design with p5.js」の「P.1. 色」編を見ていましたが、他の機能も知りたくなってきたので「P.2. 形」「P.3. 文字」「P.4. 画像」*1も並行しようと思います*2。今回は「P.2. 形」の「01」を見ていきます*3。それで…
Reactの続きです。前回はクラスを使ったコンポーネントを作りました。今回はこのクラスの中で属性やテキストを設定してみます。それによって汎用的な使い方ができるコンポーネントになります。それではいきましょう！
Tone.jsの続きです。前回はリズム系のシンセ音でドラムパッドを作りました。今回は、パッドの音色に手を加えたく、エンベロープ設定とエフェクトを加えてみました。それではいきましょう！
gulpの続きです。gulpでメタ言語を同時にコンパイルしたい。前回はその準備編としてSass(SCSS)を「src」フォルダから「dest」フォルダにコンパイルするファイル構成にしました。今回はここに他のメタ言語のコンパイル設定も加えていきます。まずはAltJSのTyp…
Reactの続きです。前回はコンポーネントでstyle属性や四則演算を設定しました。今回はクラスを使ってみます。Reactのコンポーネントでのクラスは、親クラスReact.Componentの継承、必須であるrender()メソッド、コンストラクタのsuper()、などの書き方があり…
p5.jsの続きです。前回は「Generative Design with p5.js」の色編の第二回でした。今回は３回目です。今回は円形に配置した色のスペクトル。three.jsの記事でやった三角関数が出てきます。それではいきましょう！
前回、ブログの更新方針を見直しました。その後、ブログの更新はコンスタントにできることができました。今回は、やりたいことのボリュームを俯瞰して並走テーマの更新頻度を見直しました。
Expressの続きです。前回はExpressをインストールしてハローワールドのテキストを表示しました。今回はHTMLを表示してみたく。res.send()でHTMLタグは表示。さらにres.sendFile()でHTMLファイル、express.static()で静的サイト全体を表示します。それではい…
gulpの続きです。前回はbrowser-syncでSass(SCSS)環境の自動リロードをしました。かなり楽になったので、Sass(SCSS)だけでなくAltJS（TypeScriptなど）やHTMLテンプレート（EJSなど）も一緒にコンパイルできるようフォルダ構成をsrc→destという形に変更しま…
Reactの続きです。前回はコンポーネントを事始めました。この時は一種類のテキストを読み込んで表示するのみでしたが、今回はstyle属性や四則演算の設定を追記して、コンポーネントのバリエーションを増やします。だんだんコンポーネントを使うメリットを感…
Three.jsの続きです。前回はジオメトリ設定で色々な形を作りました。今回はカメラの制御です。コードの理解のためには三角関数の理解が必要でした。サイン、コサイン、タンジェントとか聞き覚えはあったけど、それを使う目的はわかっていなかったです。それ…
Expressの続きです。前回はExpressとJSフレームワークの違い、Expressの位置付けなどについて掘り下げました。その後、しばらくNode.jsを触っていましたが今回からExpressを触っていきます！まずはインストール〜ハローワールドまで。それでは行きましょう！
gulpの続きです。前回はwatch()メソッドで自動コンパイルを体験しました。今回はもう一歩進んでブラウザも毎回リロードするのではなくファイルの修正→保存のたびにブラウザも自動リロードをしたく。「browser-sync」を使います。Sass(SCSS)コンパイルも同時…
Reactの続きです。前回はイベント属性を使ってみました。今回からはコンポーネント編に入ります。いよいよJSフレームワークっぽい内容になってきましたね。それではいきましょう！
Tone.jsの続きです。前回はシンセでリズム音を流す方法を調べました。今回はこれをもとにドラムパッドを作ってみました。それではいきましょう！
Node.jsの続きです。前回はルーティング設定でCSS、JSのファイルを読み込みました。今回は同じくルーティング設定で複数のHTMLページを表示をしてみました。やってみて結構URLの表示判定が厳密なこともわかりました。それでは行きましょう！
メタ言語の続きです。前回はMarkdownをGulpにコンパイルしました。コンパイル系でやってみたいことはある程度やれたので次は常時監視をやってみます。コンパイルを毎回実行するのは手間なのでファイルを修正するたびに自動的にコンパイルする仕組み。watch()…
Reactの続きです。前回はsetInterval()によるタイマー処理をやりました。今回はReactのイベント用の属性onChangeとonClickを使ってみます。それではいきましょう！
