【JavaScript】文字列を切り詰めて「…」を付ける

# 目的
画面上に文字列を表示するときに、長すぎる場合は末尾を切り詰めて、さらに続きがあるよということを示すために「…」等を付加したい時があります。`substr`が使えそうですが、JavaScriptの`substr`はマルチバイト対応してしまっているがために、「あいうえお」でも「abcde」でも同じ5文字とカウントされ、全角のみの場合と半角のみの場合では同じ文字数でも文字列の表示幅が倍近く違うということになります。全角文字は半角文字の倍でカウントして、例えば5文字で切り詰める場合に、「abcde」はそのまま「abcde」、「あいうえお」は「あ…」のように、**「…」分を考慮して必要に応じて文字を切り詰め、結果として半角文字分と同程度の幅の文字列を得たい**と思います。説明がややこしいですが、要はRubyの`truncate`と同じような関数がほしいと思いました。

# 実装
“`JavaScript
const truncate = function(string, length, omission = ‘…’) {
return string.match

【React / Next】親から関数をpropsで子へ渡したら「is not assignable to type ts(2322)」の型エラーがでた

親コンポーネントで定義した関数を子コンポーネントへ渡す時に、型エラーが出たのでその解決方法の議事録です。

# 環境
– next: 11.1.3
– react: 17.0.2

# やろうとしたこと
– 親コンポーネント側で、子コンポーネントのボタンがクリックされた時の関数を定義
– 関数を子コンポーネントへpropsで渡す

“`tsx:親
export const Parent = () => {
const handleClick() {
//
}

return (

)
}
“`

“`tsx:子
interface Props {
handleClick: Function;
}

export const Children = (props: Props) => {
return (
Click
)
}
“`

# エラーメッセージ
“`
(property) onC

HTMLの文章を行ごとに分割して装飾をつける

おら、アクセシビリティのことはよくわかんねぇんだけど、
とりあえず見た目は動いたぞ。


“`html

THREE.DeviceOrientationControls のデバイス差を吸収する

Three.js で Web VR/AR アプリを作るとき、スマホの向きに応じて空間内のカメラの向きを操作するのに THREE.DeviceOrientationControls が使われる。しかしこのクラスを使うのは一筋縄ではいかず、その課題と対処法についてまとめる。

## THREE.DeviceOrientationControls のデバイス差問題
Three.js でスマホのジャイロセンサーと空間内のカメラを同期させる方法を調べると、だいたい THREE.DeviceOrientationControls を使用するやり方が出てくる。

しかしこのクラスは2021年10月にリリースされた [r134](https://github.com/mrdoob/three.js/releases/tag/r134) にて削除されてしまっている。

関連する Issue を読んでいくと、以下のことがわかる。

– [#15828](https://github.com/mrdoob/three.js/issues/15828)
– デバイスによって `THREE.Device

JavaScript: reduce は map で書ける

[map / filter は reduce で書ける。](https://qiita.com/ttatsf/items/1df2cb13d151a60a3885)じゃあ reduce は?
実用性はないんだけど何となく思いついたので。
ここでは初期値ありバージョンの reduce だけとりあつかいます。

初期値init、2変数の関数f、配列xs を取り、累算の結果を返す関数reduceを考えます。
累算の一回ごとの途中の値の配列を返す補助的な関数scanを考えると、reduce はこんな風になります。

“`js:
const reduce = init => f => xs =>
scan(init)(f)(xs)[xs.length – 1]
“`
scanで返ってくる配列の最後の要素が reduce で求めたい値になります。

scanです。
アキュムレータの初期値acc、2変数の関数f、配列xsを取り、累算の一回ごとの値の配列を返します。

“`js:
const scan = acc => f => xs =>
xs.map( x => acc = f(ac

自家製サーバー 〜オレオレ証明書を添えて

## 概要
何気なく使っている「サーバー」を自分(OS:mac)で組み立ててみる。尚、今回はJavaScriptで話を進めて、`server.js`ファイルに記述する。

### 使用モジュール
– Express
– fs
– log4js
– https

### 手を動かす
何事も自分で作ってみると理解が深まるもの。黙って考えてないで、詰まったら以下コマンドで逐一確認する。
“`
node server.js
“`

### ディレクトリ構成
“`
| – server.js
| – privatekey.pem
| – cert.pem
“`
## 実装の前に
### httpsって何？
node.jsでHTTPSサーバ(SSL)を作成するには、httpsモジュールを使用します。HTTPSサーバは、SSLにより、経路を暗号化し、サーバ-クライアント間の盗聴を防ぎます。また、サーバ証明書により、サーバの真正性を保証します。

### OpenSSLって何？
OpenSSLは「SSL（Secure Sockets Layer）」という暗号化通信のためのプログラムです。今回の

inputタグのスライダーについて

今回は、HTMLの「form」タグ等でたまに使用する、
「input」タグについてやっていきたいと思います。
それではまずはHTMLに記述していきます。

_HTMLコード_
“`



“`
HTMLに「input」タグを、typeには「range」を入れることで、
上記画像のようなユーザー側で動かすスライダーが出現しました。

このスライダーに対して

_CSSコード_
“`
input{
width: 400px;
}
“`
幅をC

【React】プログラマー適性チェックをリリースしました。【個人開発】

## 背景

このたび、個人ブログのWordpressサイト(https://hinoshin-blog.com/)のサブディレクトリにReactアプリを実装しました。

サブディレクトリにサービスを置いて、万が一にもバズるとSEO的に莫大な効果が得られます。

なので、需要はあるのかなと思い本記事を執筆しました。

とは言っても、当たり前のことしかやってないので、多くの人は「そんなの知ってるよ。。」となるかもです。

そんな方は、僕が今回リリースしたプログラマー適性チェックを一度やってからブラウザバックしてくてください。

プログラマー適性チェック
https://hinoshin-blog.com/programmer-aptitude-check/

## Reactアプリの概要

今回作ったアプリは、めちゃくちゃ簡単な機能しかないです。

機能自体は30分もあれば作れる内容です。

具体的には、プログラマーの適性を診断するアプリになります。

目的は被リンクを獲得することなので、最低限の機能しかないです。

「興味があるからやってみたい！」という方は、このリンクから飛べます。

jsPsychのプラグインをカスタマイズ – 参加者の回答を制限する方法

[jsPsych](https://www.jspsych.org/7.2/)を使っていると、公式プラグインをほんの少し変更したいという状況に直面することがあります。そういうときはプラグインを自分用にカスタマイズすればよいのですが、慣れないうちはハードルが高いと思います。今回の記事ではプラグインのカスタマイズをなるべく分かりやすくご紹介したいと思います。

私がよく相談を受けるものとして、**テキストボックスに入力できる内容を制限したい** という要望があります。今回は、survey-textをカスタマイズしてこれを実現させてみましょう。

# jsPsychのパッケージ一式をダウンロードする

jsPsychはバージョンが7になってから、基本的にパッケージをダウンロードせずに利用できるようになりました。しかしカスタマイズをしたいときにはパッケージのダウンロードが必要になります。

[The Basics: Hello Worldのチュートリアルの Option 2: Download and host jsPsych](https://www.jspsych.org/7.2/tuto

JavaScriptで配列の要素を入れ替える方法

## はじめに
表題の件ですが、分割代入を使うと簡単です。

>分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。

## 処理

“`javascript
let hoge = [1, 2, 3, 4];
console.log(hoge);

[hoge[0], hoge[1]] = [hoge[1], hoge[0]];
console.log(hoge);
“`

実行結果

“`
[1, 2, 3, 4]
[2, 1, 3, 4]
“`

ちなみに文字列でも問題なく可能です。

“`javascript
let hoge = [“a”, “b”, “c”, “d”];
console.log(hoge);

[hoge[0], hoge[1]] = [hoge[1], hoge[0]];
console.log(hoge);
“`

実行結果

“`
[‘a’, ‘b’, ‘c’, ‘d’]
[‘b’,

React Class Component vs Function Component

今回の記事にはReact Class Component とReact Function Component.の違い説明したいと思います。

# React Class Component
最初のreactのバージョン、全部のreactのコンポーネントはsyntax ES6 Classに書かれていました。

### コンポーネントを作る

“`
import React, { Component } from ‘react’;

class App extends Component {
render() {
return (

Hello Devsaurus

);
}
}

export default App;
“`
### Data Handling
reactでデータを取り持つするときprops & stateに使われる

propsの特徴は読むしかできないと普通は親のコンポーネント
から子供のコンポーネントにデータを送ってい

Uncaught ReferenceError: $ is not defined　Rails６

Rails６で非同期処理がうまくいかなかったので備忘録。

:::note alert
Uncaught ReferenceError: $ is not defined
:::

##### 原因としては
・jQueryがうまく読み込めていなかった。
・Rails6でのjQuery導入ができていなかった

:writing_hand:参考にした記事

Introducing jQuery in Rails 6 Using Webpacker

#### 導入方法

“`
$ yarn add jquery
““

config/webpack/environment.js
javascript/packs/application.js
に下記を追加

“`environment.js
const { environment } = require(‘@rails/webpacker’)

//追加部分
const webpack = require(‘webpack’)
enviro

【rails入門】ページのスクロールに合わせて要素を動かす！

# 完成したこんな感じ

スクロールに応じて要素を左右に動かす！

# コード
“`html:index.html

My name is Naoya.

GeekSalon Fukuoka