f@ctor

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

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

React/Next.jsを使用して、よくあるテーマカラーの切り替えボタンの実装をめちゃ簡単に解説する

# 1. 概要
簡単なアニメーションの挙動
https://x.com/Nao8epicmotion/status/1780411806277919134

ソースコード
https://github.com/Kroro1208/nextjs-portfolio-website.git

React/Next.jsを使用してwebsiteの開発を行う際に、よく出てくる***ライトモードとダークモード***の切り替えを解説します。

もうこれはパターン化できるもので、一度覚えてしまえば使いまわしたりして表現できる幅も広がると思います。この際に覚えちゃいましょう。

# 2. 必要なコンポーネントとファイル
今回のテーマに関係ある部分だけ解説させていただきます。
iconはReact iconを使用してます。

## app/layout.jsx
ここで後に作成する`ThemeProvider`コンポーネントでレンダリングされる部分を囲います。
“`
import { Inter } from “next/font/google”;
import “./globals.css”

元記事を表示

メルキド as Code（アレフガルドを旅するために Part3）

# はじめに
　[Part2](https://qiita.com/yamamorisoba/items/5e059388ac9db6037fb2)では、フィールドマップと町のマップとのマップ切り替えの仕組みを検討しました。本稿では、切り替え後の町マップ上にメルキドの街並みを再現してみます。30×31の区画では狭すぎたので、一辺を倍にして60×62の区画上に町並みを作ります。まずは、MakeCode上のコードにより更地の上に街並みが形成される動画(4倍速)をご覧ください。

本稿では、このよ

元記事を表示

kuromoji.js + SudachiDict で形態素解析（辞書のビルド、IPADic・UniDic との比較）

*UniDic の matrix.def のサイズが間違っていたので修正しました: ~~59GB~~ → 5.9GB*

**[kuromoji.js](https://github.com/takuyaa/kuromoji.js)** （日本語形態素解析器 Kuromoji の JavaScript実装）と React を組み合わせて、クライアントサイドで完結するブラウザアプリを開発しています。kuromoji.js は [IPADic \(mecab-ipadic-20070801\)](https://github.com/taku910/mecab/tree/master/mecab-ipadic) をデフォルト辞書として使用していますが、収録語彙が私のアプリケーションの目的には最適ではないと感じていました。また、[UniDic](https://clrd.ninjal.ac.jp/unidic/back_number.html#unidic_cwj) は機能面で魅力的ですが、[ビルドして使ってみた結果](https://qiita.com/piijey/items/f95a0

元記事を表示

Error: Malformed PostCSS Configuration

tailwind cssが効かなく，解決までに時間がかかったので共有します．

## エラー
“`
./src/app/globals.css.webpack[javascript/auto]…
Error: Malformed PostCSS Configuration
at Array.forEach ()
“`

## 結論
“`postcss.config.js
module.exports = {
plugins: [
‘tailwindcss’,
‘autoprefixer’,
‘postcss-import’,
‘postcss-flexbugs-fixes’,
]
}
“`

pluginsの指定方法が間違っていて(バージョンで異なる？)エラーになっていました．

“`postcss.config.js
// 失敗例
module.exports = {
plugins: [
require(‘tailwindcss’),
require(‘autoprefix

元記事を表示

【備忘録】jQueryでURLに特定の文字を足す

# したい事

### URLに特定の文字を足す

page-link01.htmlの末尾に、「#content」を追加したい

▼対象のソース（例）

“`

“`

# 方法
### jQueryを使用

①対象を絞込む(.page-link要素内のa)

②eachに関数を渡す

③関数内のjQuery(this)で、対象オブジェクトを取得し、変数objに代入

④変数objに代入した対象オブジェクトのリンクURLを取得し、変数linkに代入

⑤attrでリンクURLを「変数linkで取得したリンクURLに#contentをプラスした文字列」に置き換える

“`
`を記述する位置による違いが分からなかった

・``でHTML内にJSファイルを適用するという理解はあったものの、記述位置による違いがあるのか全く分からなかった。また、それを理解するような事例に出会わなかった。
（自分はパターンAが絶対的に正しいと思っていた。）

```html:パターンA：head内に含める





Document