JavaScript

2023年12月5日

Three.jsでマテリアルのテスクチャーに画像や動画を設定する方法を紹介します。
さっそくデモを確認してみましょう。

3Dモデルを表示

Three.jsのShaderMateria ...

2023年11月24日

Three.jsを使って、物体(メッシュ)を複数個、ランダムに生成して散りばめる方法を紹介します。
またその応用として、ライトが必要な物体や、物体をランダムに移動させる方法も紹介しています。
大きさ ...

2023年11月22日

Three.jsを使って物体を回転、並行移動、スケールする方法を紹介します。
デモもあるので、一度確認してみてください。

Three.jsを使って物体を回転、並行移動、スケールするデモサンプルコード ...

2023年11月22日

Three.jsの最も基本的でよく使うライトであるAmbientLight, DirectionalLight, PointLightの使い方を紹介します。
　ライトがない状態のデモがあるとわかりやすいので ...

Three.jsでライトを使ったとき、物体の影を落とす方法を紹介します。
また影を薄くしたり、濃くしたり、影がギザギザのときの対処方法といった調整のやり方も紹介しています。
まずはサンプルデモがある ...

Three.jsで物体を複製する方法を紹介します。
具体的なコードとデモが見たい場合は、【WebGL&Three.js入門】Three.jsの一番シンプルなサンプルコードのチュートリアルの解説でデモ ...

2023年11月16日

WebGL&Three.jsの入門としてThree.jsのチュートリアルに記載されているサンプルコードの基本を解説します。
とっつきにくそうではなりますが、ちょっと中身がわかれば全然そんなことがな ...

Three.jsでOrbitControlsを使って簡単にマウスで視点の操作する方法を紹介します。

まずはデモを確認してみましょう。

OrbitControlsとは？

OrbitControl ...

2023年11月16日

Three.jsでMaterial(マテリアル)の色を設定するとき、いろいろな方法があります。
知らないと混乱したり、便利な使い方もあるので、色の設定方法を一覧できるように紹介します。

もしTh ...

2023年11月16日

Three.jsのMaterial(マテリアル)の基本的な種類を実際に3Dモデルのデモを動かしながら確認してみてましょう。
もしThree.jsの基本的な操作の一連の流れを知らないという場合は、Three. ...

2023年11月16日

Three.jsのGeometry(ジオメトリ)の基本的な種類を実際に3Dモデルのデモを動かしながら確認してみてましょう。
もしThree.jsの基本的な操作の一連の流れを知らないという場合は、Three. ...

2023年11月16日

Three.jsは、WebGLを簡単に使用するための現状最も有名なJavaScriptライブラリです。
Three.jsやWebGLが何？という場合は、WebGLとThree.jsの違いって何？押さえておき ...

2023年9月25日

Firebase+Vue.jsでチャット機能を作成します。

2023年9月25日

VueフレームワークのQuasar frameworkのインストールからVueファイルの作成までの手順です。
Node.jsの設定（バージョン変更の仕方）、Quasar CLIのインストール、Quasarプ ...

2023年1月15日

Reactのカスタムフックの作成方法と使い方を紹介します。

Reactのカスタムフックとは

useStateなどのReact Hookを内部で使っている関数(フック)のことをカスタムフックといいます。

2023年1月15日

ReactのuseContextについて、使い方や、いつ使うのかといった情報を共有します。
また、useContextを使って別ファイルとデータ共有の仕方や再レンダリングについても紹介します。

Rea ...

2023年1月14日

Reactでコンポーネントを他のコンポーネントに渡せるpropsのchildrenの使い方を紹介します。
childrenを上手に使うことで、再利用性の高いコンポーネントを作成することができます。

c ...

ReactでReduxを使う方法を紹介します。

ReactでReduxを使う方法

公式の手順は以下にあります。

実際はReactを作成してからReduxをいれることが多いと思うので、

Reactで独自で作成したSVGアイコンや無料のアイコンサービスなど使用する方法を紹介します。

ReactでSVGアイコンを使用する方法

他にも以下のように手軽に使えるやり方を紹介しています。
【 ...

Reactを使うとほぼ必ず出くわすReduxについて、所見では意味不明で学習したくなくなる場合も少なくないです。
Reduxってそもそも何？なんで使う必要があるの？という点について理解して、
Red ...

Reduxを理解するために、まずは仕組みを理解しましょう。

Reduxの仕組みを３分で理解する

引用:

上の図は、Reduxの公式サイトより引用しているものです。
上の図にで

ReactのuseEffectとuseLayoutEffectの違いを紹介します。

ReactのuseEffectとuseLayoutEffectの違い

まず、前提として、useEffectとuseLay ...

ReactのuseEffectの第二引数の使い方と活用事例と無限ループになってしまう注意点を紹介します。

useEffectの第二引数の役割

useEffectの第二引数は、依存配列と呼ばれます。

ReactのuseReducerを使って四則演算の結果を表示するアプリの作り方を紹介します。
数字を変更したときも、四則演算のタイプを変更したときもリアルタイムで計算結果が変わる簡単なアプリです。

R ...

ReactのuseStateとuseReducerの違いとuseReducerの使い方を紹介します。

useStateとuseReducerの違い

まずは簡単なボタンを作成して、数字をカウントアップすると ...

ReactでuseImperativeHandleを使ってrefへのアクセスを制限する方法を紹介します。

forwardRefで他のコンポーネントにrefを渡すことが可能になりますが、
DOM操 ...

Reactで他のコンポーネントのDOMを操作できるforwardRefの使い方を紹介します。

Reactで他のコンポーネントのDOMを操作できるforwardRefの使い方

コンポーネントをまたいでDOM ...

2022年12月27日

ReactでDOMを直接操作するuseRefの使い方を紹介します。

useRefの使いどころ

useRefをいつ使うかですが、DOMのメソッドを使いたいときです。
たとえば、よくあるユースケースと ...

ReactでSASS(SCSS)を使う方法を紹介します。

手順1:node-sassをインストールするnpm install node-sass手順2:css拡張子をscss拡張子に変更する

css拡張子 ...

ReactとFirebaseを使う方法を紹介します。

ReactとFirebaseを使う方法手順1:firebaseでプロジェクト作成

firebaseにログインして、プロジェクトを作成します。