f@ctor

JavaScript関連のことを調べてみた2021年12月13日

JavaScript関連のことを調べてみた2021年12月13日
目次

【Harmoware-VIS】python で 3次元可視化

#Harmoware-VIS とは

https://qiita.com/ucl_Harmoware_VIS/items/e861e0f651ffde647b6a

#python で 3次元可視化

「synerex」の３次元可視化ツールである「HarmoVIS_client」で表示したマップをpythonでコントロールするためのpythonライブラリについて説明します。
## 前提
3次元可視化は以下の３つのツールで連携して実現します。
– HarmoVIS_client
– Jupyter Notebook
– synerex_harmovis

###synerexとは
https://www.ucl.nuee.nagoya-u.ac.jp/project

https://github.com/synerex

## 準備
必要なツールを準備します。
– HarmoVIS_client
インストール＆起動方法は[こちら](https://s-mobi01.github.io/SynerexHarmVizCli/)
– Jupyter Notebook
– Pytho

元記事を表示

JavaScriptで配列からランダムに要素を取得【OBGノウハウ】

JavaScriptのMath.floorメソッドとMath.randomメソッドを用いて、配列からランダムにお題を取得し表示するページを作りました。

今回は「山手線ゲーム」のお題をランダムに1つ取得して表示します。

コロナ禍でなかなかリアルでの飲み会は難しい世の中ではありますが、忘年会の季節なので飲み会鉄板ゲームとして「山手線ゲーム」がありますね。
山手線の駅名を言っていく単純なゲームではありますが、お題を変えて楽しむこともできます。
なかなかパッと良いお題が思い付かないことが多かったので、配列操作の学習も兼ねて作ってみました。

#ページ作成

![qiita1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100940/bc8de756-9ed4-f2e5-266f-2506fc178cad.png)

Clickボタンを押下することでグレーの枠線内にお題がランダムで表示されます。
まずはHTMLでページを作成していきます。

“`html

元記事を表示

Vue3で○×ゲームを実装する

# 目的
– Vue3系の基礎を（Composition APIを中心に）覚える

# はじめに
今までの実務ではVue2系のみを扱ってきたのですが、個人的な興味でVue3系を学んでみることにしました。
Vue3は2系と比べてパフォーマンスの向上がされていたり、大規模なプロジェクトでの開発に適した変更がされているそうなので、実際に使い心地を検証してみます。

さて、新しい言語/フレームワークの習得のためには、何か簡単なアプリ（TODOアプリなど）が習作の題材として適切かと思います。
しかし、ゲーム好きの自分としては何か簡単なブラウザゲームを作ってみたく、そして思いついたのが…

**そう、○×ゲーム。**
正式名称は三目並べというそうです（ウィキペディア調べ）。

https://ja.wikipedia.org/wiki/%E4%B8%89%E7%9B%AE%E4%B8%A6%E3%81%B9

○側と×側のプレイヤーが交互に〇/×を置いていき、三個並べ切ったプレイヤーの勝利、というシンプルなルールでありながら、
[Reactのチュートリアル](https://ja.reactjs.

元記事を表示

GitHub から Close 済みの Issues を取得する。（Octokit）

こちらは GAOGAO Advent Calendar 2021 の 13 日目の記事です。昨日は @hana_asia さん の [[日記] システム開発難しいですよね](https://note.com/hanadev/n/nb9f5729b0122) でした！

こんにちは [T](https://twitter.com/aburasobablog) と申します。
[GAOGAO](https://gaogao.asia/) にてスタートアップスタジオのエンジニア、[GAOGAOゲート](https://twitter.com/gaogaogate)　にてプログラミング研修事業のメンターをしております。

# はじめに

私は現在 [GAOGAOゲート](https://twitter.com/gaogaogate) 生が効率よくポートフォリオ開発を進められるようなアプリケーションを開発しております。
開発する中で「GitHub で作成した Issue をボタンワンクリックで取得し保存したいな」と思い調べたところ、 GitHub REST API に辿り着き実際に触っています。

元記事を表示

スライダー（カルーセル）実装するならslickかSwiperか

タブ切り替え、アコーディオン、ハンバーガーメニュー、スムーズスクロールアンカーなど
webページを制作するとき、
実装を避けられないあるあるの機能ってありますよね。

スライダー（カルーセル）もワンノブゼムだと思ってます。

スライダーの特徴といえば…

・制作上実装頻度が高い。
・仕様確認が大変、急な仕様変更に弱い。(cf:https://liginc.co.jp/392786)
・実装の度に細かいオプションを忘れていて、都度調べてしまう。
・汎用性のある設計が難しい。
・仕様を踏まえて上でスクラッチで書くのが大変。
・そもそもスライドショーなの？カルーセルなの？よくわからない。

とかですかね。

なので、実装の際にはライブラリの選定が必要になるかと思うのですが、
その際ほぼほぼのケースにおいて

[slick](https://kenwheeler.github.io/slick/)

もしくは

[Swiper](https://swiperjs.com/)

二択になるんじゃないかと思ってます。
では、どっちを選択するのかって判断基準の一つに本記事がなればいいなと思っ

元記事を表示

数独の楽しみが台無し！ブラウザで数独を解けるようにしてみた話

# なにしたの？

GitHub Pages で動く数独ソルバーを作ってみました。

– [Sudoku Solver (PC で数独をカメラに映してライブで解くバージョン）](https://minoue-xx.github.io/Sudoku-Solver-via-Wasm/index.html)
– [Sudoku Solver (画像を選択するバージョン、携帯はこちらがおススメ）](https://minoue-xx.github.io/Sudoku-Solver-via-Wasm/index_mobile.html)

端末側ですべての処理は行われて撮った画像がどこかに送られることはないのでご安心ください（ソース：[GitHub: Sudoku Solver via Wasm](https://github.com/minoue-xx/Sudoku-Solver-via-Wasm)）

![image_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149511/d30f

元記事を表示

Chrome拡張機能を使ってITC-LMSを魔改造したい

この記事は[EEIC2022 Advent Calender2021](https://adventar.org/calendars/6319)第12日目の記事として書かれました。

はじめまして。EEIC2022の川というものです。せっかく学科のアドカレがあるということで、自分がちょっと前に作ったChromeの拡張機能の話をしたいと思います。
自分はqiitaやブログの記事を書くのは今回が初めてなので、不慣れなところがあるかもしれませんが、大目に見て楽しんでいただければ幸いです。

## あなたのITC-LMSをもっと便利にしたくありませんか？

?webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】

おひさしぶりです。この記事は[クソアプリ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/kuso-app)の13日目です:stuck_out_tongue_closed_eyes:

突然ですが皆さんは「**スクロールに合わせてふわっと出てくるwebページ**」ってどう思います？　最近多いですよね、あれ。
確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。

ちょっと？…イラッと？…いや、:rage: **許さない、絶対** :rage:

## よろしい、ならば粉砕だ

よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張は[Vite](https://github.com/vitejs/vite)にChrome機能拡張用のプラグイン[vite-plugin-chrome-extension](https://github.com/StarkShang/vite-

元記事を表示

【React】react-router-domでハマった話

#初めに
我、最近Reactを学んでいるので、勝手に議事録として記載する。
といっても大体ここら辺の記事は出ていると思うので、そのほかの方の記事を参考にしたほうがいいであろう。
完全に自己満である。

#ハマったコード
“`react
import { BrowserRouter, Link, Switch, Route } from “react-router-dom”

/**省略**/


Home
page01
page02


元記事を表示

紙の本の香りを嗅ぎながら電子書籍を読もう

この記事は [obniz Advent Calendar 2021](https://qiita.com/advent-calendar/2021/obniz) 13日目の記事です。
## やったこと

iPadで本を読んでいる間、紙の本の香りを充満させるシステムを作ってみました。
iPadをスタンドから手に取ってから戻すまでの間、細かく切った紙をファンの風で舞わせています。

【Memo of Bug】JavaScript(Jquery)で作成したボタンのイベントが発火しない

#JavaScript(Jquery)で作成したボタンのイベントが発火しない
もしくは、イベントが効かない、反応がない

##今回遭遇したバグ
:::note alert
JSで要素を追加した上に、イベントを設定した。
そのイベントが発火しない
:::

> 詳細
Jqueryの　.html()で　ボタン要素を作成した後、ボタンを制御するScriptを書いたけど、
ボタンは表示されているが、ボタンを押しても反応がない。

“`JavaScript:
var data=[
{“id”:1,
“code”:”001″,
“name”:”name1″},
{“id”:2,
“code”:”002″,
“name”:”name2″},
{“id”:3,
“code”:”003″,
“name”:”name3″},
]

var data1=[
{“id”:1,
“code”:”001″,
“name”:”name1 for output1″},
{“id”:2,
“code”:”002″,
“name”:”name2 for output1″},
{“id”:3,

元記事を表示

[React]関数に対してのuseCallbackとuseMemo

#関数に対してのuseCallbackとuseMemoの違い

`useCallback`は**関数自体**をメモ化します。
ですが、
`useMemo`では関数の**結果**をメモ化するので
全く違うものです。
細かい部分ですが、覚えておくと質問された時などに役立つかもしれないです。

ありがとうございました。

元記事を表示

ReactのpropsとuseState()の分割代入でカッコ{}[]が違うのはなぜ！！！？？

#propsで受け取る場合と、useState()で受け取る場合が違う・・・
propsは親から子へパラメータを受け渡すときに使うヤツ。
useState()は変数を動的に変化させるときに使うヤツ。

チュートリアルで「どっちも分割代入で受け取るよ！」とは言うものの、
なんか受け取るときのカッコが違くね？と疑問に思った初心者向けです。

##どっちも分割代入で配列を受けとる

“`react:props
const {name, age} = props;
“`
“`react:useState()
const [num, setNum] = useState([]);
“`

propsは{}中括弧で受け取るのに対し、useState()は[]大括弧で受け取る。
この違いがすごい気になりました。

##オブジェクトか配列かの違い
そもそもの勘違いでpropsは配列リテラルではなく、オブジェクトリテラルが帰ってきている。というだけの話。
jsに慣れてないので、この値の違いがいまいちわからずハマってました。。。
まあ詳しくはjsの分割代入のリファレンス読んでください。
⇒http

元記事を表示

【Nuxt.js】同一リンクでも強制リロードさせる

# はじめに

Nuxt.jsを使ったサイトでナビゲーションバーを実装していた際に、同じページのリンクをクリックした時もリロードさせたかったのですが、`nuxt-link` を使用していた場合、イベントが何も走らないので、強制リロードを実行することができません。

色々試した結果、Nuxt.jsの[issue](https://github.com/nuxt/nuxt.js/issues/2285)に挙げられていた方法に落ち着いたのでメモします。

# 実装方法

[router.go()](https://router.vuejs.org/ja/api/#router-go) を利用して実装します。
`router.go()`は本来、引数に指定した数のhistoryを進めたり戻したりできるメソッドですが、
引数にpathを指定することもできるので、それを利用します。
現在のページをpathに指定することで、同じページでも強制的にリロードが走ります。

“`jsx

元記事を表示

[TypeScript] 型エラーだらけでもstrict: trueに切り替える

[タイムリープTypeScript 〜TypeScript始めたてのあの頃に知っておきたかったこと〜 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/timeleap-typescript) 13日目です。
本記事は tsconfig で `strict: true` にできていないコードベースを、少しずつ現実的に strict にしていく方法についてご紹介させていただきます。

# 誰のためか
`strict: true` の設定をせずに成長してしまったプロジェクトはありませんか？（私も個人的に経験があります）
例えば以下のようなケースがぱっと思いつきます。

* JavaScript で書いていたプロジェクトに途中から TypeScript を導入したが、型エラーが辛くてルールを弱くしてしまったままにしている。
* TypeScript に慣れてないがゆえに、開発の途中で `strict: true` の設定を外してしまった。

そうして成長してしまったコードベースは、中々ルールを強くするタイミングがなく、T

元記事を表示

OTHERカテゴリの最新記事