クモのようにコツコツと

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

JS

【React】ステートで制御構造(条件分岐、ループ)

Reactの続きです。前回はステートでsetState()、タイマー処理、イベント処理をやってみました。今回は三項演算子による条件分岐と、map()によるループをやってみます。それではいきましょう!

【Tone.js】Tone.Part()でいろいろなリズムを鳴らす ※1〜8拍子編

Tone.jsの続きです。前回はTone.Part()で細かいタイミングのエイトビートを鳴らしました。今回はエイトビート以外のリズムも鳴らしてみたく思います。今回は1〜8拍子編です。奇数拍子や変拍子も作ってみました。それではいきましょう!

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

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

【React】Reactプロジェクトでステートを事始め(setState()、タイマー処理、イベント処理)

Reactの続きです。前回はReactプロジェクトでクラスコンポーネントを作成しました。今回はステートを事始ます。setState()による値の変更と、setInterbal()によるタイマー処理、onClick属性のイベント処理をやってみます。それではいきましょう!

【Tone.js】Tone.Part()で細かいタイミングのエイトビートを鳴らす

Tone.jsの続きです。前回はTone.Loop()を使ってエイトビートを鳴らしました。ただ、この方法だと細かいタイミングでリズムを変えることが出来なそうなので、今回は以前、マリオのゲームオーバー音の時に使ったTone.Part()で打ち込んでみました。予想通り細か…

【p5.js】Generative Design with p5.js「形 P_2_0_02、03」のコードを読み解く

p5.jsの続きです。前回は「Generative Design with p5.js」の「P.4. 画像」の「01」を見ました。今回は画像編「P.2. 形」の「02」「03」を見ていきます*1。それでは行きましょう! *1:似た内容だったので同時に行けた

【React】Reactプロジェクトでクラスコンポーネント作成、入れ子、ファイル分割まで

Reactの続きです。前回はReactプロジェクトのAppコンポーネントを打ち替えてみました。今回は複数のクラスコンポーネントを作って、入れ子関係にしたりファイル分割してエクスポート、インポートする構造を作ります。それではいきましょう!

【Three.js】いろいろなマテリアルを貼ってみる

Three.jsの続きです。ics.mediaの「Three.js入門」前回までは入門編、今回から「基礎編」に入ります!まずはマテリアル。質感の設定です。入門編の頃にも少し触れましたが、今回はいろいろな種類のマテリアルを貼ってみます。それでは行きましょう!

【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」を使ってみます。そ…

【Three.js】OrbitControls.jsでカメラの位置をインタラクティブに動かす!

Three.jsの続きです。前回は三角関数を使ってカメラの動きを制御しました。今回はさらにカメラの位置をインタラクティブに操作できるようにします。Three.jsの拡張ライブラリ「OrbitControls.js」を使います。それでは行きましょう!

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

p5.jsの続きです。前回までは「Generative Design with p5.js」の「P.1. 色」編を見ていましたが、他の機能も知りたくなってきたので「P.2. 形」「P.3. 文字」「P.4. 画像」*1も並行しようと思います*2。今回は「P.2. 形」の「01」を見ていきます*3。それで…

【React】クラスコンポーネントで属性を設定する

Reactの続きです。前回はクラスを使ったコンポーネントを作りました。今回はこのクラスの中で属性やテキストを設定してみます。それによって汎用的な使い方ができるコンポーネントになります。それではいきましょう!

【Tone.js】ドラムパッドにエンベロープ(ADSR)とエフェクトを設定する

Tone.jsの続きです。前回はリズム系のシンセ音でドラムパッドを作りました。今回は、パッドの音色に手を加えたく、エンベロープ設定とエフェクトを加えてみました。それではいきましょう!

【gulp】Sass(SCSS)とTypeScriptを同時にコンパイルする環境を作る

gulpの続きです。gulpでメタ言語を同時にコンパイルしたい。前回はその準備編としてSass(SCSS)を「src」フォルダから「dest」フォルダにコンパイルするファイル構成にしました。今回はここに他のメタ言語のコンパイル設定も加えていきます。まずはAltJSのTyp…

【React】クラスを使ったコンポーネントの書き方(React.Component、render()、super())

Reactの続きです。前回はコンポーネントでstyle属性や四則演算を設定しました。今回はクラスを使ってみます。Reactのコンポーネントでのクラスは、親クラスReact.Componentの継承、必須であるrender()メソッド、コンストラクタのsuper()、などの書き方があり…

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

p5.jsの続きです。前回は「Generative Design with p5.js」の色編の第二回でした。今回は3回目です。今回は円形に配置した色のスペクトル。three.jsの記事でやった三角関数が出てきます。それではいきましょう!

【Express】静的HTMLファイルの表示(res.sendFile()、express.static())

Expressの続きです。前回はExpressをインストールしてハローワールドのテキストを表示しました。今回はHTMLを表示してみたく。res.send()でHTMLタグは表示。さらにres.sendFile()でHTMLファイル、express.static()で静的サイト全体を表示します。それではい…

【React】コンポーネントの属性値を読み込む(style、テキスト、四則演算)

Reactの続きです。前回はコンポーネントを事始めました。この時は一種類のテキストを読み込んで表示するのみでしたが、今回はstyle属性や四則演算の設定を追記して、コンポーネントのバリエーションを増やします。だんだんコンポーネントを使うメリットを感…

【Three.js】カメラ制御を実現している「三角関数」を理解する!(サイン、コサイン、タンジェント)

Three.jsの続きです。前回はジオメトリ設定で色々な形を作りました。今回はカメラの制御です。コードの理解のためには三角関数の理解が必要でした。サイン、コサイン、タンジェントとか聞き覚えはあったけど、それを使う目的はわかっていなかったです。それ…

Express事始め(インストール〜ハローワールドまで)

Expressの続きです。前回はExpressとJSフレームワークの違い、Expressの位置付けなどについて掘り下げました。その後、しばらくNode.jsを触っていましたが今回からExpressを触っていきます!まずはインストール〜ハローワールドまで。それでは行きましょう!

【gulp】browser-syncによる自動リロード(watch()の分離、defaultでSassと同時に実行)

gulpの続きです。前回はwatch()メソッドで自動コンパイルを体験しました。今回はもう一歩進んでブラウザも毎回リロードするのではなくファイルの修正→保存のたびにブラウザも自動リロードをしたく。「browser-sync」を使います。Sass(SCSS)コンパイルも同時…

【React】コンポーネント事始め(一文字目は大文字!)

Reactの続きです。前回はイベント属性を使ってみました。今回からはコンポーネント編に入ります。いよいよJSフレームワークっぽい内容になってきましたね。それではいきましょう!