クモのようにコツコツと

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

2020-06-01から1ヶ月間の記事一覧

【TypeScript】おみくじJSをTypeScriptに移植:型付け→モジュール分割(エラーあり)

メタ言語の続きです。前回はfsモジュールを使ってEJSファイルでJSONファイルのデータを読み込みました。今回からはTypeScriptのモジュール分割編に入ります。以前作った「おみくじJS」をTypeScriptに移植し、モジュールファイルに分割してみます。それではい…

【React】Reduxを事始める(インストール〜ストア、レデューサー、プロバイダー設定)

Reactの続きです。前回は「コンテクスト(Context)」を使ってコンポーネントに値を直接渡しました。今回はReactの拡張ツール「Redux」を使って値の状態管理を事始めてみます。それではいきましょう!

【Tone.js】いろいろなリズムが鳴らせるビート・プレイヤーを作った(BPM切り替え可能)

Tone.jsの続きです。前回はTone.Part()を使ってシャッフル、16ビートなどのリズムを作りました。今回はこれまで作ったリズムを合体させて、BPMとリズムの切り替えができるビート・プレイヤーを作りました!演奏練習用、BPM(曲の速度)調査など実用的なプレ…

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

p5.jsの続きです。前回は「Generative Design with p5.js」の「画像 P_4_1_1_01」を見ました。今回は「色 P_2_1_1_01、02」を見ていきます。それでは行きましょう!

【EJS】fsモジュールを使ってコンテンツのJSONデータを読み込む

メタ言語の続きです。前回はEJSのinclude()を使ってBEMのブロックごとにモジュール分割しました。今回はコンテンツ(見出し、本文など)部分を外部JSONファイルにしてfsモジュールを使って読み込みます。それではいきましょう!

【React】コンテクスト(Context)でネストされたコンポーネントに値を渡す

Reactの続きです。前回はステートで条件分岐やループをやってみました。今回は、コンポーネントの階層(ネスト)を超えて共通の値を渡すのに便利な「コンテクスト(Context)」という機能を体験したく。それではいきましょう!

【Tone.js】Tone.Part()でいろいろなリズムを鳴らす ※12〜32拍子&シャッフル編

Tone.jsの続きです。前回はTone.Part()を使って1〜8拍子を打ち込みました。今回も引き続きTone.Part()を使って16ビートなどのより細かいリズムを打ち込んで見ます。跳ねた感じのシャッフルビートにもトライ。それではいきましょう!

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

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

【JS】async/await構文で書いたFetch APIからJSONデータを読み込む

以前、Fetch APIでJSONデータを読み込みました。この時はthen()で処理を繋ぐ書き方をしていました。async/await構文で書くこともできて、そちらの方がよく使われているとのことで、処理を書き換えてみました。それではいきましょう!

【EJS】include()でBEMのブロックごとにモジュール分割(Sass(SCSS)も修正)

メタ言語の続きです。前回はSass(SCSS)の変数($)や@mixinを使ってモジュールを超えた値の受け渡しをしました。今回はEJSの方もBEMのブロックごとにモジュールファイルを分割してみたく。include()メソッドを使います。それではいきましょう!

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

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