クモのようにコツコツと

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

【JS】Fetch APIでPOST送信してみる(Form送信との比較も)

以前はFetch APIを使って外部のJSONデータを読み込みました。先日、それをAsync/Await構文に書き換えてみました。これらはあくまでデータの読み込みだけでしたが、今回はFetch APIを使ってデータをPOST送信をしてみます。Formタグからの送信との挙動の比較も…

【GitHub】Gitコマンドでブランチ作成→プルリク→マージ→ブランチ削除の記録(Issueもあるでよ)

GitHubの続きです。前回はGitコマンド事始めでローカルにクローン→GitHubにプッシュ→GitHub Pages連携まで行いました。今回はその続きでブランチ作成→プルリク→マージ→ブランチ削除をやってみます。Issueとの紐付けも行いました。それではいきましょう!

【GitHub】Gitコマンド事始め(ローカルにクローン→GitHubにプッシュ→GitHub Pages連携)

Web開発環境シリーズ、以前、SourceTreeを使ってローカルのファイルをGitHubにアップし、GitHub Pagesで公開しました。今回はSourceTreeを使わずにこれをやってみたく。前回の記事で作ったメタ言語環境をアップしてみます。それではいきましょう!

【TypeScript】gulpでwebpackを起動できるようにする(モジュールも再分割)

メタ言語の続きです。前回はwebpackでTypeScriptのモジュールをバンドルしました。今回はwebpackとgulpを連携して、gulpで他のタスクと一緒にwebpackのバンドルも実行します。さらにフォルダの変更やモジュール再分割も試みました。それではいきましょう!

【TypeScript】モジュールファイルをwebpackでバンドルする

メタ言語の続きです。前回はモジュール分割したTypeScriptをgulpでコンパイルしました。モジュールは分割したままでインポート設定がCommonJSになりブラウザ上ではエラーになりました。今回はモジュールを1つのファイルにバンドルすべく、webpackを使ってコ…

【TypeScript】モジュール分割で起きたエラーを調べる(CommonJSが原因)

メタ言語の続きです。前回はTypeScriptをモジュール分割しました。EJSやSass(SCSS)と違ってモジュール部分のソースは含まれず、またエラーも起きてうまく動きません。今回はエラーについて掘り下げてみました。*1。それではいきましょう! *1:結論から言うと…

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

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

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

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

【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()によるループをやってみます。それではいきましょう!

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

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

【Sass(SCSS)】変数($)、@mixinを使ってモジュールを超えた共通スタイルを設定する

メタ言語の続きです。前回はSass(SCSS)の@importを使ってBEMのブロックごとにファイルを分けました。今回は変数($)や@mixinを使って、モジュールファイルを超えた共通スタイルを設定してみます。それではいきましょう!

【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()で打ち込んでみました。予想通り細か…

【Sass(SCSS)】@importでBEMのBlockごとにファイル分割する

メタ言語の続きです。前回はBEMによるclass名をSass(SCSS)とEJSに書いてみました。今回からはモジュール設計に入ります。まずはBEMのB(ブロック)ごとにSass(SCSS)ファイルを分割してみます。@importを使います。それでは行きましょう!

【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入門」前回までは入門編、今回から「基礎編」に入ります!まずはマテリアル。質感の設定です。入門編の頃にも少し触れましたが、今回はいろいろな種類のマテリアルを貼ってみます。それでは行きましょう!

【メタ言語】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」を見ていきます。それでは行きましょう!