クモのようにコツコツと

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

JS

【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フレームワークっぽい内容になってきましたね。それではいきましょう!

【Tone.js】リズム系のシンセ音でドラムパッドを作った

Tone.jsの続きです。前回はシンセでリズム音を流す方法を調べました。今回はこれをもとにドラムパッドを作ってみました。それではいきましょう!

【Node.js】ルーティング設定で複数ページを表示する

Node.jsの続きです。前回はルーティング設定でCSS、JSのファイルを読み込みました。今回は同じくルーティング設定で複数のHTMLページを表示をしてみました。やってみて結構URLの表示判定が厳密なこともわかりました。それでは行きましょう!

【React】イベント属性を使ってみた(onChangeとonClick)

Reactの続きです。前回はsetInterval()によるタイマー処理をやりました。今回はReactのイベント用の属性onChangeとonClickを使ってみます。それではいきましょう!

【Node.js】ルーティング設定でCSS、JSファイルを読み込む

Node.jsの続きです。前回はfsモジュールを使ってHTMLファイルを表示しました。今回はここからCSS、JSファイルを読み込みたく。そのためにはルーティング設定が必要でした。それではいきましょう!

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

p5.jsの続きです。しばらくダン先生のCodingTrainで学習していましたが、その後ついに「Generative Design with p5.js」を購入しました。だいぶ前に最初のサンプルのコードを読み解いたきりでしたが再開します!今回は色編の第二弾です。それではいきましょ…

【React】JSXレンダリングとタイマー処理(setInterval())の関係を理解する

Reactの続きです。前回は色々なループの書き方をやってみました。今回は一つ前の投稿でも触れたタイマー処理を絡めて、JSXレンダリングとの関係を理解したく。それでは行きましょう!

【JS】setTimeout()とsetInterval()の違い(一回と複数回)

JS

ネイティブJSいろいろやってみたシリーズの続きです。以前、setTimeout()を使って令和カウントダウンタイマーという記事を作りました。これと良く似たメソッドでsetInterval()があるので、2つの違いを体験したく、記事にしました。それでは行きましょう!

【Node.js】fsモジュールでHTMLファイルを表示する

Node.jsの続きです。前回はハローワールドを打ち替えてHTML形式で表示しました。今回はfsモジュールでHTMLファイルを表示します。それでは行きましょう!

【Three.js】ジオメトリ設定で形状を色々変えてみる

Three.jsの続きです。前回はマテリアルとライティングをやってみました。今回はジオメトリに入ります。Three.jsに用意されている様々な形状のジオメトリ設定を試してみました。それでは行きましょう!

【React】ループの書き方(for文エラー回避、配列、map())

Reactの続きです。前回は条件分岐のやってみました。今回はループ(繰り返し)です。条件分岐のif文と同様、JSXの中でfor文をそのまま書くとエラーになるので、その回避法とfor文以外の配列やmap()を使った書き方をやってみます。それでは行きましょう!

【Node.js】ハローワールドの打ち替え(ポート番号、日本語化、HTMLタグ化)

Node.jsの続きです。前回はWebサーバを立ててハローワールドを表示しました。今回はこのコードを色々打ち替えてみる。ポート番号を変えてみたり、日本語にしてみたり、HTMLタグにしてみたり。それでは行きましょう!

【Tone.js】シンセでリズム音を作る方法を調べた

Tone.jsの続きです。前回までは和音楽器を作っていました。今回はリズム編に入って行きたく。Tone.jsのシンセ音でドラムの音をどうやって作るのか、CodePenの作品を参考に研究していきます。それでは行きましょう!

【JS】オブジェクトのプロパティをCSSのように省略した指定ができるのか検証した

JS

ネイティブJSのやってみたシリーズ。前回まではアロー関数について掘り下げました。今回は基本に立ち返り、オブジェクトのプロパティの指定の仕方を掘り下げます。CSSみたいに途中を省略した書き方はできるのか?普段なんとなく使ってるけどフワッとしていた…

【React】条件分岐の書き方(if文エラー回避、論理演算子、三項演算子)

Reactの続きです。前回ではJSXで関数の入れ子をやってみました。今回からは制御構造に入って行きます。まずは分岐から。JSXはif文をそのまま書くとエラーになるという衝撃の事実から、回避方法をご紹介。論理演算子(&&、!)、三項演算子(?、:)で書く方法…

【p5.js】変数を上書き、変数にオブジェクトを設定:Coding Train(p5.js2.2-3)

p5.jsの続きです。ダン先生のCoding Train、前回からいよいよアニメーション編に入り、p5.jsの組み込みメソッドを使って簡単なお絵描きアプリを作りました。今回はp5.jsの基本的な書き方として変数とオブジェクトについて解説しています。これはJSの基本でも…

【Node.js】Webサーバを立ててハローワールドを表示する

JS de バックエンド!の続きです。前回、ExpressとJSフレームワーク(React、Vue、Angular)との位置付けについて調べました。今回はNode.jsでWebサーバを立てるというのも体験したく(Expressを事始めようと思ったがその前に!)。それではいきましょう!

【JS】アロー関数のthisの挙動(プロトタイプとクラスの違い)

JS

アロー関数の続きです。前回はアロー関数の書式の違いについてでした。今回は従来の関数とアロー関数の挙動の違いについて。特に影響が大きそうなのはthisの挙動。この違いを認識しないまま単純に従来の関数をアロー関数に書き換えていくと動かない事態もあ…

【React】JSXの中に別の関数のJSXを読み込む(入れ子状態)

Reactの続きです。前回はJSXを事始めて、変数でテキストやCSSスタイルを読み込んでみました。今回はJSXの中に別の関数のJSXを読み込むのをやってみます。JSXの入れ子状態です。それではいきましょう!

ExpressとJSフレームワーク(React、Vue、Angularなど)との関係について調べたこと

Node.jsのフレームワークExpress。存在は前から知っていたけどイマイチ何ができる物なのかわかっていなかった。以前の記事でRest APIについて調べたことをキッカケに、ExpressとJSフレームワーク(Vue、React、Angularなど)の関係についても調べました。そ…

【JS】アロー関数の複数の書き方を試してみた

JS

ES6(ES2015)で追加されたアロー関数。従来の関数よりもコンパクトに書けます。IE非対応とはいえ、もう5年も経っているのでそろそろこちらをメインで行きたい!アロー関数には複数の書き方があります。自分的に直感的ではないと感じた書き方もありましたが…

REST APIとは何かを調べまくったらようやくイメージができてきたのでまとめた

数年前からキーワードとしては知っていた「REST API」。それが何かはいまいち理解できていなかった。調べまくったところフロントエンドとバックエンドの分業の流れがようやく理解できました。「API」と「JSON」への理解も重要でした。それではいきましょう!

【JS】Jestでテストを事始める(TDD:テスト駆動開発)

フロントエンド開発環境の続きです。コードチェック(ESLint)、コード整形(Prettier)ときて、次はコードテストです!JSをTestするからJestというわかりやすい名前w テスト駆動開発(TDD)とは何か?それでは行きましょう!

【コードフォーマッター】PrettierでHTML、CSS、JSのコードを整形してみた

フロントエンド開発環境の続きです。前回はESLintでコードチェックをしてみました。今回はコードフォーマッター「Prettier」でコードの整形をしてみます。JSだけでなくHTML、CSSなどもできるみたい。それでは行きまっしょい!

【JS】ESLintで構文チェックを事始める

以前、フロントエンドの開発環境についていろいろ調べた記事を書きました。その後、Gulp、Babel、Webpackのフロント開発三兄弟を体験しました。今回はESLintを使った構文チェックをやってTRY!それではいきませう。

webpackでJSのモジュールファイルをバンドルする

webpackの続きです。これまでフロント開発3銃士のうちGulpとBabelを触ってみたので、今回は最後の一つ、webpackを触ってみる。以前のJSモジュールの記事のjsファイルをバンドルしてみました。それでは行きましょう!