WebGL & Three.js
【WebGL】GLSLのフラグメントシェーダー(Fragment Shader)とは？わかりやすく解説
WebGL(GLSL)を学習する上で、必ず理解しないといけないものの一つに、フラグメントシェーダー(Fragment Shader)があります。 フラグメントシェーダーとは何かについて、説明します。 Three.jsやW…
CATEGORY
JavaScript
JavaScriptに関する基礎、実装例、トラブル解決の記事をまとめています。
111ARTICLES
WebGL & Three.js
【WebGL】GLSLで使う数学(三角関数、ベクトル)を文系エンジニアのために実務でいるところだけ解説
WebGLにおいてGLSLを書く時、どうしても数学がでてきます。 ここでは数学(三角関数、ベクトル)を文系エンジニアのために、まず最初に抑えておきたいポイントだけ解説します。 難しいことは私もわかりませんし、GLSLを扱…
WebGL & Three.js
【WebGL】GLSLで定数を定義する方法(define, constとその違いと注意点)
WebGL(GLSL)で定数を定義する方法を紹介します。 定数を定義するのは、2通りあります。 define const この2つの使い方、その違いからくる注意点をみてみましょう。 基本的なGLSLの計算方法については、…
WebGL & Three.js
【WebGL】GLSLで円や三角形、四角形、その他多角形の図形を描写する方法
WebGL(GLSL)で円や三角形、四角形、八角形、十角形といった多角形の図形を描写する方法を紹介します。 基本的なGLSLの計算方法については、GLSLで使う数学(三角関数、ベクトル)を文系エンジニアのために実務でいる…
WebGL & Three.js
【Three.js】物体(メッシュ)を複数ランダムに生成して散りばめる方法(デモあり)
Three.jsを使って、物体(メッシュ)を複数個、ランダムに生成して散りばめる方法を紹介します。 またその応用として、ライトが必要な物体や、物体をランダムに移動させる方法も紹介しています。 大きさも、ジオメトリの種類も…
WebGL & Three.js
【Three.js】ライトで影を落とす方法と影の調整のやり方(デモつき)
Three.jsでライトを使ったとき、物体の影を落とす方法を紹介します。 また影を薄くしたり、濃くしたり、影がギザギザのときの対処方法といった調整のやり方も紹介しています。 まずはサンプルデモがあるので、以下をご確認くだ…
WebGL & Three.js
【Three.js】Three.jsの基本的な操作の一連の流れを解説
Three.jsは、WebGLを簡単に使用するための現状最も有名なJavaScriptライブラリです。 Three.jsやWebGLが何？という場合は、WebGLとThree.jsの違いって何？押さえておきたい基本的なこ…
Vue.js
Quasar frameworkの始め方(Vueフレームワーク)
VueフレームワークのQuasar frameworkのインストールからVueファイルの作成までの手順です。 Node.jsの設定（バージョン変更の仕方）、Quasar CLIのインストール、Quasarプロジェクトの作成を説明しています。
React
【React】Redux toolkitの使い方(Slice作成、Redux Dev Toolsでstateを確認)
ReactでReduxを使う方法を紹介します。 ReactでReduxを使う方法 公式の手順は以下にあります。 https://react-redux.js.org/introduction/getting-starte…
React
【React】SVGアイコンを使用する方法
Reactで独自で作成したSVGアイコンや無料のアイコンサービスなど使用する方法を紹介します。 ReactでSVGアイコンを使用する方法 他にも以下のように手軽に使えるやり方を紹介しています。 【React】Font A…
React
【React】useEffectとuseLayoutEffectの違い
ReactのuseEffectとuseLayoutEffectの違いを紹介します。 ReactのuseEffectとuseLayoutEffectの違い まず、前提として、useEffectとuseLayoutEffec…
React
【React】useEffectの第二引数の使い方と活用事例と無限ループの注意点
ReactのuseEffectの第二引数の使い方と活用事例と無限ループになってしまう注意点を紹介します。 useEffectの第二引数の役割 useEffectの第二引数は、依存配列と呼ばれます。 useEffectの第…
React
【React】useReducerを使って四則演算の結果を表示するアプリ作成方法
ReactのuseReducerを使って四則演算の結果を表示するアプリの作り方を紹介します。 数字を変更したときも、四則演算のタイプを変更したときもリアルタイムで計算結果が変わる簡単なアプリです。 ReactのuseRe…
React
【React】useStateとuseReducerの違いとuseReducerの使い方と使い所
ReactのuseStateとuseReducerの違いとuseReducerの使い方を紹介します。 useStateとuseReducerの違い まずは簡単なボタンを作成して、数字をカウントアップするときの書き方の違い…
React
【React】他のコンポーネントのDOMを操作できるforwardRefの使い方
Reactで他のコンポーネントのDOMを操作できるforwardRefの使い方を紹介します。 Reactで他のコンポーネントのDOMを操作できるforwardRefの使い方 コンポーネントをまたいでDOM操作したいことケ…
React
【React】でDOMを直接操作するuseRefの使い方とrefとstateの違い
ReactでDOMを直接操作するuseRefの使い方を紹介します。 useRefの使いどころ useRefをいつ使うかですが、DOMのメソッドを使いたいときです。 たとえば、よくあるユースケースとしては、input要素に…
React
【React】SASSを使う方法
ReactでSASS(SCSS)を使う方法を紹介します。 手順1:node-sassをインストールする npm install node-sass 手順2:css拡張子をscss拡張子に変更する css拡張子をscss拡…
React
【React】Firebaseの使い方
ReactとFirebaseを使う方法を紹介します。 ReactとFirebaseを使う方法 手順1:firebaseでプロジェクト作成 firebaseにログインして、プロジェクトを作成します。 Firebaseのプロ…
React
【React】ログイン・ログアウト後にリダイレクトを設定する方法
Reactでリダイレクトを設定する方法を紹介します。 以下の例ではログイン・ログアウト後にリダイレクトさせています。 Reactでログイン・ログアウト後にリダイレクトを設定する方法 手順1:react-router-do…
React
【React】ルーティングをシンプルに設定する方法(react-router-dom)
Reactでルーティングをシンプルに設定する方法を紹介します。 Reactでルーティングをシンプルに設定する方法 手順1:react-router-domをインストール #npmの場合 npm i react-route…
React
【React】Font Awesomeの使い方-react-fontawesome
ReactでFont Awesomeを使う方法を紹介します。 【React】Font Awesomeの使い方 公式ドキュメントの場所は、こちらです。 手順1:必須ファイルをインストール #npmの場合 npm i --s…
React
【React】外部API(JSON)を取得して表示する方法
Reactで外部API(JSON)を取得して表示する方法を紹介します。 今回は、ポケモンAPIで実際に取得して表示します。 Reactで外部API(JSON)を取得して表示する方法 ファイル構成 src ∟App.js …
React
【React】ドラッグアンドドロップのやり方
Reactでドラッグアンドドロップする方法を紹介します。 Reactでドラッグアンドドロップする方法 ライブラリを使用します。 いくつかありますが、見た目がリッチになって使いやすいreact-beautiful-dndと…
React
【React】V18でreact-beautiful-dnd(ドラッグアンドドロップライブラリ)を使う方法
ReactのV18でreact-beautiful-dnd(ドラッグアンドドロップライブラリ)を使う方法を紹介します。 【React】V18でreact-beautiful-dnd(ドラッグアンドドロップライブラリ)を使…
React
【React】でDOMを操作するcreatePortalの使い方と使い所と注意点
ReactでDOMを操作するcreatePortalの使い方と使い所と注意点を紹介します。 ReactでDOMを操作するcreatePortalとは createPortalというメソッドを使うことで、本来React要素…
React
【React】スタイリング方法まとめ
Reactでhtmlをスタイリングする方法をまとめました。 Reactでhtmlをスタイリングする方法 大きく以下の4つの方法があります。 CSSファイルを読み込む インラインスタイル CSS Modules CSS i…
React
【React】フォームでよく使う記述(input,textarea,ラジオボタン,チェックボックス,select)
Reactでフォーム作成のときによく使う記述(input,textarea,ラジオボタン,チェックボックス)を紹介します。 inputとtextarea import { useState } from "re…
JavaScript
JavaScriptのfind()とfindIndex()メソッドの使い方と具体例
JavaScriptの配列やオブジェクトから見つけ出すfind()メソッドとfindIndex()メソッドを紹介します。 JavaScriptのfind()メソッド find()メソッドは、コールバック関数を引数に持ちま…
React
【React】propsの使い方とと大事な2つのルール
Reactでpropsを使う方法と大事な2つのルールを紹介します。 propsを使うことで、似ているコンポーネントで少しだけ変化させたい要素がある場合でも 簡単にコンポーネントを使いまわしつつそれぞれに違いをもたせること…