WebGL & Three.js

Three.jsのShaderMaterialを使って画像や動画を出力する方法を紹介します。
WebGL(GLSL)を使うので、これができるとWebサイトなどでは即応用ができるようになります。
デモ ...

WebGL & Three.js

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

3Dモデルを表示

Three.jsのShaderMateria ...

WebGL & Three.js

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

WebGL & Three.js

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

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

WebGL & Three.js

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

WebGL & Three.js

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

WebGL & Three.js

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

WebGL & Three.js

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

WebGL & Three.js

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

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

OrbitControlsとは？

OrbitControl ...

WebGL & Three.js

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

もしTh ...

WebGL & Three.js

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

WebGL & Three.js

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

WebGL & Three.js

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

Vue.js

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

Vue.js

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

Apache

ApacheのRewriteで別のフォルダの同じファイル名へリダイレクトさせる方法を紹介します。

PHP

PHPの配列の繰り返し処理の基本的な使い方を紹介します。
また、配列の長さを動的に取得する方法を紹介します。

PHP

JavaScriptを触ったことがあるコーダーやフロントエンド開発者に向けて、
phpで一番最初に知っておくべき基礎知識をまとめました。

React

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

Reactのカスタムフックとは

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

React

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

Rea ...

React

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

c ...

React

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

ReactでReduxを使う方法

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

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

React

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

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

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

React

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

React

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

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

引用:

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

wordpress

wordpressでReactを使ってブロックエディタ「Gutenberg」の自作ブロックを作成したときに、
背景色と文字色をクラスのある場合とインラインの場合で切り替える方法を紹介します。
カラー ...

wordpress

wordpressのブロックエディタ「Gutenberg」でReactを使って自作したブロックのサイドバーをカスタマイズする方法を紹介します。

wordpressでReactを使って自作したブロックのサイドバ ...

wordpress

wordpressのブロックエディタ「Gutenberg」でカスタムブロックを作成した際のブロックツールバーのカスタマイズ方法を紹介します。

ブロックツールバーのカスタマイズ方法(自作ブロック)

edit ...

React

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

ReactのuseEffectとuseLayoutEffectの違い

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

React

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

useEffectの第二引数の役割

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