f@ctor

JavaScript関連のことを調べてみた

JavaScript関連のことを調べてみた
目次

JavaScriptでHTMLパース【DOMParser html】

“`js
await fetch(”).then(r=>r.text()).then(html=>new DOMParser().parseFromString(html,’text/html’))
“`

例

“`js
await fetch(‘https://example.com’).then(r=>r.text()).then(html=>new DOMParser().parseFromString(html,’text/html’))
“`

“`js
const doc = await fetch(‘https://example.com’).then(r=>r.text()).then(html=>new DOMParser().parseFromString(html,’text/html’))
console.log(doc.querySelector(‘a’).href)
“`

https://developer.mozilla.org/ja/docs/Web/API/DOMParser

元記事を表示

Javaにおける2進数の具体的な活用例

# Javaにおける2進数の具体的な活用例

システム開発や基本情報処理の試験において、2進数（バイナリ）とか覚えてどうするの？と思う時があると思います。今回の記事では、Javaの、ビット演算やビットフィールドを活用することで、効率的なコーディングや低レベルの操作が可能になります。以下に、Javaでの具体的な2進数の活用例をいくつか紹介します。もちろんPythonやPHP、Java Scriptでも応用が効くので是非参考にしてください。

—

## 1. ビットフラグの管理

ビットフラグを使用すると、複数の状態やオプションを1つの整数値で管理できます。これにより、メモリの節約や処理の高速化が図れます。

### 例: ユーザー権限の管理

“`java
public class BitFlagExample {
// ビットフラグの定義
public static final int READ_PERMISSION = 0b0001; // 1
public static final int WRITE_PERMISSION = 0b0010

元記事を表示

animate.cssとJavaScriptを組み合わせて、テキストアニメーションを作る【中級編⑦】

# はじめに
今回は、animate.cssとJavaScriptを組み合わせて、スクロールすることによるテキストアニメーションを考えていきます。

# animate.cssとは？
animate.cssは、class名を付けるだけで簡単にアニメーションを実装出来るライブラリを指します。

# animate.cssの使い方
animate.cssを読み込む方法は２つあります。今回は、CDNで読み込む方法で進めていきます。

:::note info
Git Hubからファイルをダウンロードして読み込む
https://github.com/animate-css/animate.css
:::
:::note info
CDNで読み込む
https://cdnjs.com/libraries/animate.css
:::

# animate.cssの記述の仕方

元記事を表示

【TypeScript】Interface と type どちらが良いの ? 違いは ?

## はじめに
以前、初めてTypeScriptを実務で使用した際に、Interface(インターフェース)とtype(型エイリアス)
どちらを使うべきか迷うことがあったので、知見を今更ながらまとめます。

>Because an interface more closely maps how JavaScript objects work by being open to extension, we recommend using an interface over a type alias when possible.
ref:https://www.typescriptlang.org/docs/handbook/advanced-types.html#interfaces-vs-type-aliases

公式ドキュメントに**インターフェース（interface）** が推奨されています。

理由は、インターフェースがJavaScriptオブジェクトの動作により近いからです。具体的には、インターフェースは拡張可能であり、同じ名前のインターフェースを複数回宣言しても、それらがマ

元記事を表示

React-Router v6を触ってみた

こちらの記事で一部動作が確認できなかった部分があったので、React-Routerのv6を使ってv5からの変更点を確認しつつ、動作確認できなかった部分を確認してみた。
## v6での変更点
`Route`周りの記述が`Routes`タグの中に`Route`タグを使ってルーティングを定義するようになっている様子。
表示内容は`element`に指定する。

また、`useHistory`の代わりに`useNavigate`を利用するようになった。
「戻る」は引数に`-1`を渡す。

### 環境
“`
“react”: “^18.3.1”,
“react-dom”: “^18.3.1”,
“react-router-dom”: “^6.15.0”
“`

### 確認
確認した際のソースコードを記載する。
“`jsx


} />
元記事を表示

素数を判定するのを作ってみよう！(番外編)

“`js
function Is_prime(a){
let prime_is = true;
if(a == 1){
prime_is = false;
}else{
for(let i = 2; i <= a - 1; i++){ if(a % i == 0){ prime_is = false; } } } return prime_is; } ``` というプログラムを前回は書きました。 # 条件を変える これをこうじゃ！ ```js function Is_prime(a){ let prime_is = true; if(a == 1){ prime_is = false; }else{ for(let i = 2; i < a; i++){ /*変わったのはここ*/ if(a % i == 0){

元記事を表示

Reactについて学んだことをまとめる（その３）

以下のUdemyの講座を受講したので、学んだことをまとめていく。

https://www.udemy.com/course/react_stepup/

## React-Router
ページ遷移を実現するのに必要。

### 環境
`react-router-dom`を`package.json`に記載し、導入する必要がある。
“`
“react-router-dom”: “5.2.0”,
“react”: “^18.3.1”,
“react-dom”: “^18.3.1”
“`

### 基本的な使い方
“`jsx
import { BrowserRouter, Link, Switch, Route } from ‘react-router-dom’;

import ‘./App.css’;
import { Home } from ‘./Home’;
import { Page1 } from ‘./Page1’;
import { Page2 } from ‘./Page2’;

export default function App() {
return (

元記事を表示

ブラウザ上での JavaScript の処理に何らか活用できそうな VFX関連の情報で気になったもの

## はじめに
個人のモノ作り、展示イベント向けなどの作品作りで、「SF みたいな／魔法の世界みたいな見た目・演出」というのを作ることがあります。
（動作させる環境などは、個人的な好みで「ブラウザ ＋ JavaScript」が多いです）

例えば、以下の「透明マント／光学迷彩」みたいな演出や、「炎が拡散していくようなエフェクト（※ こちらの実装は、自前の処理を組み込んだシェーダーにて）」です。