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

DOM操作が苦手なJavaScript初学者が保留機能付きメモアプリを作ってみた

DOM操作の情報が多すぎて何か最善かわからないまま、
つぎはぎの知識で何とか完成しました。

もう少し勉強したらReactを学びたいと思います。

至らぬところが多いので、ご意見や改善案をいただけますと幸いです。
何かいい教材がありましたら教えてください。

“`horyuMemo.html

追加

メモ

【JavaScript 関数ドリル】中級編のdifferenceBy関数の実装アウトプット

## differenceBy関数の課題内容

\_.differenceBy関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#differenceBy

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【上級】differenceBy関数の実装

## 課題に取り組む前の状態

– 解答を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– 解答例とは異なるが、サンプル通りの実行結果が出るように実装できた。

## differenceBy関数の実装コード（答えを見る前）

“`javascript

function differenceBy(array, values, iteratee) {
const copiedArray = […array];

for (let i = 0; i < values.length; i++) { console.log(`values[i] : ${va

動的型付け言語、静的型付け言語とは

「動的型付け言語」「静的型付け言語」について学んだためメモ。
## ２つの違い
変数・定数を宣言しデータをあつかう際、データの**型**を宣言するかどうかが異なる。
## 「型」とは
扱うデータの種類のこと。

*最新の ECMAScript 標準では、以下の8つのデータ型が定義されています。*
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types
## なぜ動的型付けと静的型付けというものがあるのか
## 動的型付け言語
プログラムを書くときに、型を指定せずインタプリタやコンパイラが実行時にしてくれること。
## 静的型付け言語
プログラムを書くときに、値の型を指定すること。

[javascript,cssアニメーション]大量のエラーメッセージを出すアニメーション

テキストを入力するだけでメッセージ動画が作れるサービス[Teloppy](https://teloppy.com “Teloppy”)を運営しております！
その中で用いたアニメーションのコードを一部紹介したいと思います！


[実際のテロッピーでの動作](https://teloppy.com/telops/97ig97be/?message=U2FsdGVkX1%2ByuZsxuZkRk6E1lhD63V5mzDQ4KsdqoUuFtVT5SGsUrSObgc3PKIy59YwjYOeWDPurTVeXp78Yj5H5m9LGOq%2FLpJc3PWBpllU%3D)(teloppy版の方では都合上解像度によってアニメーションの仕様が異なります)

コードの完成形がこちらです

【JavaScript】クイズアプリを作ってみよう（基礎編）

JavaScript学習中の者です。
備忘録として学んだことを書いておきます。
今回は基礎編ということで、クイズを1問だけ解くだけのアプリにします。
次回応用編を書きますが、そちらは4問解き続ける仕様で作る予定です。

# 1. HTMLファイルの編集

HTMLファイルを用意するには、こちらのサイトが便利です。
トップページのダウンロードボタンを押して、ダウンロードしたデータのうち「index.html」だけ使用します。
[HTML5 Boilerplate](https://html5boilerplate.com/)

“`HTML:index.html

【新規事業】SkyWayで1：1通信を作ってみたよ【プロト開発】

# はじめに
株式会社マイスター・ギルド新規事業部のウサギーです。
弊社新規事業部では、新規サービスの立ち上げを目指して
日々、アイディアの検証やプロトタイプの作成を行っています！

今回は、考えていたサービス案についてプロトタイプを作成するため、
オンライン通信の機能を用意したくて、SkyWayの1：1通信を試してみました。

# なぜSkyWay？
今回の目的は、新規事業部で使う実験用のプロトタイプです。
製品そのものを作るわけではないので

**○ とにかく早く**
**○ カスタマイズ性は高く**

むしろ
**△（保守性や拡張性を気にして）実験開始が遅れる**

そのため
**○ ベストやベターな技術選定でなくてもよい**

と考えています。
極論を言うとWebアプリでなくてもよかったのですが、
弊社としてはWebアプリにするのが一番早いと思われたのでWebアプリを採用しました。

そうした事情から社内で調査実績がある**SkyWay**をチョイス。
以前の調査記事はこちら。弊社エンジニア619さんの執筆です。

https://qiita.com/Meister619/it

reduceの使い方まとめ(Javascript、配列の合計など)

はじめに

reduce()関数の使い方をまとめたいなと思い作成しました。

引数

引数 `callbackFn` `initialValue`

callbackFn

4 つの引数を取る「縮小」関数になります。

引数 `previousValue` `currentValue` `currentIndex` `array`

• `previousValue`
  配列の値を格納できたりして(大体何でも入る)、ループ終了後に`previousValue`の結果を返却します。初期値は`initialValue`で設定できます。
  設定しない場合は`array[0]`番目が初期値になります。

• `currentValue`
  `array[0]`または`array[1]`から`array[array.length – 1]`(配列末尾)まで値を呼び出します。
  初回の呼び出しでは `initalValue`が指定された場合は `array[0]` の値で

InDesign JavaScript XML 要素を追加

要素を追加するスクリプトは、これで良いのかな・・・？

~~~JavaScript
/*
このスクリプトを利用して起こった不具合の責任は取れません。
ご了承下さい。

更新 2022/06/15
*/

// アプリ指定
#target “indesign”;

// スクリプト名
var scriptName = “要素を追加”;

//スクリプトの動作指定（一つのアンドゥ履歴にする、及び、アンドゥ名）
app.doScript(function(){

// ダイアログ
var dialogueFlg = confirm(“選択された要素を基準にして要素を追加します。”
, “”, scriptName);

// Ｎｏの場合
if(dialogueFlg == false){

// スクリプトを終了
exit();
}

// ここから————————————————–
// 設定ダイアログ
var dial

【パブリッシャー】SharperlightとChart.jsの連携

今回の記事では、Chart.jsに[Sharperlight](https://sharperlight.jp/)からデータを供給するといった使用形態を紹介してみたいと思います。

[Sharperlight](https://sharperlight.jp/)をインストールすると、Chart.jsも梱包されているので即使用可能となります。
Chart.jsの棒グラフを表示するHTMLファイル(script記述込み)を作成し、パブリッシャーで作成するWebレポートにカスタムとして埋め込みます。
この記事の最後に、全コードを添付しています。キーとなる部分をひとつひとつ見ていきましょう。

### < head >部 ###
ここでは、SharperlightとともにインストールされるChart.jsのコードファイルやクラスファイルを参照する記述を

Jest + React-Testing-Libraryのコードまとめ

JestとReact-Testing-Libraryで使うコードの一覧をまとめておきます。
長いので右下の目次から必要なところに飛んでください。

使用技術

・React(18)
・React-Testing-Library
・Jest

## ■画面取得まとめ
### ◎画面の状態を確認する

“`tsx
//画面全体
screen.debug();

//画面のx部分のみ
screen.debug(x)
“`

### ◎タグ要素で指定(タグ名は下のGitHubに一覧あり)

“`tsx
//1つしかない場合
screen.getByRole(“heading”)

//複数ある時
screen.getAllByRole(“button”);
“`

タグ名一覧はこちらより

[
[ ‘{“name”: “article”}’, [ ‘article’ ] ],
[ ‘{“name”: “button”}’, [ ‘button

React のコードの良さを結合度で考える

## はじめに
私は普段 React を使ってフロントエンドの開発をしています。
React でもっと良いコードが書けるようになりたいと思い、良いコードを書くためにどういうことを意識すれば良いかいろいろ調べている中で、結合度というものを知りました。
この結合度という指標を用いて React のコードのよさを評価することを考えてみました。

## 結合度
​ソースコードの良し悪しをはかる指標として、**結合度** というものがあります。
結合度はモジュール間の関係のよさ（依存性の程度）を示しています。
結合度は 7つのレベルで表され、結合度が低い、つまり疎結合であるほど **可読性・保守性** が高く、良いとされます。

モジュール間の関係のよさを示す指標

| レベル | 説明 | 使い分け |
| —- | —- | —- |
| 内容結合（Content coupling） | あるモジュールの動作が別のモジュールの動作に依存する| 必ず避けるべき|
| 共通結合（Common coupling） | 複数のモジュールが同じグローバルデータにアクセス（変更）する |

【JavaScript 関数ドリル】中級編のtakeWhile関数の実装アウトプット

## takeWhile関数の課題内容

\_.takeWhile関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#takeWhile

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【中級】takeWhile関数の実装

## 課題に取り組む前の状態

– 解答を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– 自分で実装できた。

## takeWhile関数の実装コード（答えを見る前）

“`javascript
function takeWhile(array, predicate) {
const newArray = [];
for (let i = 0; i < array.length; i++) { if (!predicate(array[i])) { break; } newArray.push(array[i]); } return newArray; } ```

【JavaScript 関数ドリル】中級編のtakeRightWhile関数の実装アウトプット

## takeRightWhile関数の課題内容

\_.takeRightWhile関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#takeRightWhile

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【中級】takeRightWhile関数の実装

## 課題に取り組む前の状態

– 解答を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– 自分で実装できた。

## takeRightWhile関数の実装コード（答えを見る前）

“`javascript
function takeRightWhile(array, predicate) {
const newArray = [];

for (let i = array.length – 1; 0 <= i; i--) { if (!predicate(array[i])) { break; }

【JavaScript 関数ドリル】中級編のreverse関数の実装アウトプット

## reverse関数の課題内容

\_.reverse関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#reverse

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【中級】reverse関数の実装

## 課題に取り組む前の状態

– 解答を見なくてもできそうだと思った。

## 課題に取り組んだ後の状態

– 自分で実装できた。
– 解答例はループ処理の回数が半分で済む記述となっていて、参考になった。

## reverse関数の実装コード（答えを見る前）

“`javascript
function reverse(array) {
const reversedArray = [];

for (let i = 0; i < array.length; i++) { reversedArray.unshift(array[i]); } for (let i = 0; i < array.length;

Angularの導入

## はじめに
前回「[Angularってどんなもの](https://qiita.com/HITOSUKE/items/19a5cbaaee039548e8bd)」ついての投稿よりAngularについては理解を深めてください。
今回は、Angularを導入についてご紹介したいと思います。

## Angularのインストール
実際に進めてみましょう。
### [Step1] Node.js をインストール
各コマンドを実行して、Node.js をインストールします。
Node.js のバージョンは14系を使用しました。
　

① サイトから Node.js をダウンロードする
　curlコマンドにてURL（ https://rpm.nodesource.com/setup_14.x ）から対象をダウンロードしてきます。

　▽コマンド
“`
curl –silent –location https://rpm.nodesource.com/setup_14.x | sudo bash –
“`

　▽実行結果例
“`
[root@localhost html]# curl

JavaScript 初心者の学習の軌跡（①基本編）

# はじめに
今まで何となく GAS を書いてGoogleスプレッドシートの改善とかやっていましたが、いつもわからないところを都度ググりつつ何となく JavaScript 書いているのがイヤになってきたので、ここで一度体系的に学習しようと思いました。（GAS ≒ JavaScript ではありますが…）

Salesforceの認定資格 [JavaScriptデベロッパー](https://trailhead.salesforce.com/ja/credentials/javascriptdeveloperi) 取得をゴールに見据えつつ、**自分が今まで知識としてちゃんと定着できていなかった部分**を記録として残していこうと思います。

なお学習には以下書籍を使用しています。(アフィリンクではありません）
また色々問題になりそうなので、記事内に本の内容をそのまま転載するようなことはせず、あくまで頭の中でかみ砕いた内容で記事作成をします。

https://www.shoeisha.co.jp/book/detail/9784798160276

# 実行環境
どちらも導入自体がかなり簡

【JavaScript 関数ドリル】中級編のremove関数の実装アウトプット

## remove関数の課題内容

\_.remove関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#remove

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【中級】remove関数の実装

## 課題に取り組む前の状態

– 解答を見なくても実装できそうだと思った。

## 課題に取り組んだ後の状態

– 解答例と異なる部分はあるが、実行結果はサンプルと同じになった。

## remove関数の実装コード（答えを見る前）

“`javascript

function remove(array, predicate) {
const removedArray = [];

for (let i = 0; i < array.length; i++) { if (predicate(array[i])) { removedArray.push(...array.splice(i, 1)); } } return

【JavaScript 関数ドリル】中級編のpullAt関数の実装アウトプット

## pullAt関数の課題内容

\_. pullAt関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#pullAt

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【中級】pullAt関数の実装

## 課題に取り組む前の状態

– 前回取り組んだpull関数と同じように実装すればいいのかなと思った。

## 課題に取り組んだ後の状態

– サンプルの実行結果と同じ結果が出たものの、第二引数が数字の場合、複数渡される可能性があることに気づいていなかったため、解答例を見て、修正しなければならなかった。

## pullAt関数の実装コード（答えを見る前）

“`javascript
function pullAt(array, indexes) {
const pulledArray = [];

switch (typeof (indexes)) {
case ‘number’:
pulledA

JavaScript初学者が書き方に慣れるためゲームを作ってみた

昔からあるwar ship game （戦艦ゲーム）を作ってみました。

JavaScirptを学んで一か月弱になります。
C言語でできることができたり、できなかったりとなかなか苦戦しています。

ほぼほぼ基本構文を使用しており、組み込み関数をほぼ使用していないためコードが冗長になっています。
改善案をいただけると大変助かります。

デベロッパーツールを使用するゲームであり、
alartやpromptを多用しており邪魔かもしれませんが遊んでいただけると幸いです。

htmlを避けていますが、そろそろDOMについてしっかり学んで動的サイトを作りたいです。

“`warShipGame.html

Ajax（非同期通信） 使い方基本

# ◎Ajaxとは
**非同期にクライアントとサーバで間の通信を行える仕組み。**
リロードをする事なく、必要なデータのみ受信することができる。

## 非同期通信とは
非同期通信は**画面の遷移のない通信。**
非同期処理は、前の処理を終わりを待たずに、処理を進めていく。

それに対して、
同期処理は**一瞬画面が白くなって、画面が切り替わる。**
同期処理は、順番に一つ一つ処理を終わらせていく。

## Ajaxのメリット
・リンクをクリックした際のレスポンス待ち時間の体感時間が少くできる。

・必要な部分の情報のみを取得変更し、必要なときに更新可能の為高速に動作する。

# ◎Ajaxを使う
“get“と“post“で記述方法が異なる為、個別に記述しています。
## 準備
Ajaxを簡単に使うためのライブラリ「axios」をHTML内で読み込みます。
“`

“`

## GET通信

### [GET通信]１：　サー