JavaScript関連のことを調べてみた2022年03月21日

JavaScriptが画面をリロードしないと表示できない問題を解決

# はじめに
１月〜プログラミングスクールで学習しています。
これから平日は~3/25まで毎日何かしらアウトプットのため投稿を続ける予定です。
今回はオリジナルアプリ作成時に起きたJavaScriptが画面をリロードしないと表示できない問題について書きます。
※Ruby2.6.5の環境を使用し学習しています。

# 問題
自動計算機能をjavascriptで実装しましたが、何故かリロードしないとうまく機能しません。

# 解決方法
どうやら`turbolinks`が原因となっていたようです。
application.jsのturbolinksを読み込んでいる行を削除することで上記の問題は解決しました。
“`JavaScript:app/javascript/packs/applicatio

JavaScript の 論理演算子

JavaScript の論理演算子の書き方についておさらいしてみました。

MDNでは [このページ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators) に詳しく記述があります。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators

## 論理積( AND )

“`javascript
// a & b

const a = 0;
const b = 1;

console.log(a　&　b);
// 0が出力される
“`

## 論理和( OR )

“`javascript
// a | b

const a = 0;
const b = 1;

console.log(a|b);
// 1が出力される
“`

## 否定( NOT )

“`javascript
// !a

const a = 0;

console.log(!a);
// 0(false) の否定 =

JS import,exportに関して

– エイリアスはexport,importどちらでも可能
– defaultはあまり使うべきではない
→export defaultは1つしかできない

【Liquid】注文履歴一覧の日付フィルターを作ってみた

# 日付セレクトボックス

[前回の記事](https://qiita.com/ainyan/items/4d0ecbaedbc4d13b0771)で投稿したliquidの日付セレクトボックスを使って、絞り込みフィルターとしての活用方法を紹介したいと思います。
今回はShopifyの注文履歴一覧ページを例に実装方法について説明していきます。

“`liquid
—期間を設定してください—前日まで3日以内

元記事を表示

2のN乗分2進数全パターンの配列を作成する

タイトルの通り、2^N分2進数配列を全パターン作成するアルゴリズムを紹介します。
文章では伝わりずらいので、コードで。
例えば2^2の場合、
“` javascript:index.js
let list = [
[0, 0],
[0, 1],
[1, 1],
[1, 0],
];
“`

この2進数のすべてのパターンの配列を作成するには、2^N分配列の作成が必要になります。

# この配列のメリット
話は前後しますが、この2進数のすべてのパターンの配列があると何がうれしいかと言うと、N個の数値でそれぞれ異なるデータが存在する（重複OK）場合に全部を足したり引いたり、一部だけ足したり引いたり、足さなかったりの全パターンを簡単に計算することができます。

# 前提条件・データ説明
ではさっそく、今回は貿易を例に計算していきます。
自国日本では、A国、B国、C国と貿易取引を行っていると仮定します。

| 国 | 【輸出額】 | 【輸入額】 |
|:———-:|:—–

元記事を表示

【React hooks】 useCallback って何？

# はじめに

[フックAPIリファレンス](https://ja.reactjs.org/docs/hooks-reference.html#usecallback)で`useCallback`の存在は知っていましたが、実際に使ったことがなかったので、使い所を調べて使ってみた話をします。

# useCallbackとは

https://ja.reactjs.org/docs/hooks-reference.html#usecallback

メモ化してくれる関数らしいです。

なんだかパフォーマンスを上げてくれそうな気がしますね。

Todoアプリを作りながら、試してみましょう。

## Todoアプリのサンプルを作成

https://github.com/pure-adachi/sample-react-hooks-use-callback/tree/sample-todo-app

とりあえず、簡単なTodoアプリを作成しました。

ファイル構成はこんな感じです。

– `src/Todos/index.tsx`
– Todo追加フォームと、TodoListコンポー

元記事を表示

TypeScript(バニラJS)でストラテジーパターンを使って設計した話

# この記事は何？
デザインパターンって理解できても使うシーンが難しい。
フロントやバックエンドも大体フレームワークでことが足りますし。
しかし、SSRのページではあるが一部だけシングルページっぽく表現した箇所があり
デザインパターンを使ったら、管理が楽になったシーンがあったので紹介します。

# どういう想定？
* シングルページでステップが複数個
* 「戻る」「進む」ボタンある
* 進捗ステップがあり自由に行き来しつつも、ちゃんと入力値はバリデーションする(ステップ2->ステップ4でもそれまでステップ2,3のバリデーションをする)


### やりたいこと
* ステップごとに表示する内容を切り替えたいが各ステップで表示したい内容が異なる
* ステップ切り替えだけのクラスで何とか表現したい。

#

元記事を表示

ブラウザゲームを作ってみよう(その6:画像表示)

# はじめに
[その5](https://qiita.com/noji505/items/3c57e0b5fb945a5b3c2f)では図形表示を行いました。
今回は画像の表示を行いたいと思います。

# 画像表示
以下のサンプル画像を表示したいと思います。
[sample.png]

“`html

“`
表示するだけなら上記のようなHTMLタグになります。
ただこれだと画像の内容が全て表示されてしまうため、画像ファイルは1枚のままで画像の一部分だけを切り出して表示させたいと思います。

画像ファイルの読み込みと表示は以下のようになります。

“`javascript
var img = new Array( 1 );

var imgName = [ “sample.png” ];
l

元記事を表示

3Dの散布図をさくっと見るツールを作ってみた

# はじめに
3Dの点群の分布状況をさくっと見たいなと思って、ちょっとググってみたものの、そういうサービスが意外と見つからない。有料サービスだったり、ソフトだったり。２次元だったらExcelで見れるけど、３次元は見つけられない。

大したものは求めてないんだよ、JavaScriptでできるんじゃないのー？

というわけで、作ってみました。

# 作ったもの
CSVを入力すると、JavaScriptで絵を描いてくれる。
デモサイト
https://yo16-scatter-3d.herokuapp.com/

ソース

https://github.com/yo16/scatter_3d_js

## 特徴
– ブラウザで動作します。ドラッグでぐりぐり動かせます。
– 自分で用意したCSVのデータも描けます。
– htmlと必要なJavaScri

元記事を表示

ドットインストールでJavaScript基礎文法編をやってみた

# ドットインストール JavaScript基礎文法編です
要点だけまとめてみたので、後で振り返り用としておきます

# JavaScriptを書いてみよう

### Consoleの開き方(Google Chrome)
︙ ➜ その他のツール ➜ デベロッパーツール ➜ 下のウィンドウのコンソールボタン
> コンソール画面にエラーメッセージ出てるんだが！？
> ソースマップうんちゃらかんちゃら〜だったので調べて無効にしたら出なくなったのでとりあえずはOKということで・・・
> しょーもないかもしれないけど、エラーに対応出来た感じがエンジニアぽい感じ
> 参考にさせて頂いた –> [SourceMapソースマップエラーの対処法](https://codeforfun.jp/how-to-solve-failed-to-load-sourcemap-problem/)

### `’use strict’`
厳密なエラーチェックをするためのもの
書いておくとエラーが発見しやすくなるので、必ず書いておく！

### JSファイルの記述場所
書く場所としては、HTMLファイル内に書く or

元記事を表示

[Vue.js]Clipboard APIを使ってOSのClipboardにアクセスする。

# はじめに

Vue.jsアプリケーションからクリップボードにアクセスする必要があったので、クリップボードAPIを使ったサンプルコードを作成してみました。クリップボードAPIの詳細は以下のリンクを参考にしてください。尚VueはV2系を使用しています。

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

# 実装した処理

今回、要件としてはクリップボードへの書き込みは不要でしたので、クリップボードからの読み込みのみを実装しています。（クリップボードへの書き込みを行う場合はClipboard.writeText()で可能です。）

なおClipboard APIですがブラウザによって実装状況がかなり異なるため、処理をデバイス、ブラウザによって変更しています。ブラウザ、デバイスの切り分けには[UAParser.js](https://github.com/faisalman/ua-parser-js)を利用しています。[^1]

[^1]:UAParaserは過去にマルウェアが混入したバージョンが存在します。必ず安全

元記事を表示

Vue.js 入門1 Hellow World

# 初めに
本記事はVue.js初学者向けの記事になります。
忘れっぽいので自分が学んだVue.jsのサンプルコードを記載していきます。
とりあえずCDNを使用した簡単な方法になります。

htmlファイルを作成し、下記のコードを記入してください。

“`html:index.html

app1: {{message}}

app2: {{message}}