JavaScript関連のことを調べてみた2020年01月05日

Angularで簡単アニメーション：左からフェードイン編

犬クジラです。
初投稿の今回はAngularで簡単なアニメーションを動かす内容について投稿します。
これまで多くのWEBアニメーションはCSSを使って動かしていますがAngularでも簡単に作ることができます。
手順公開のため[Stackblitz](https://stackblitz.com/)上にて作業を行っています。

# 今回の完成デモ

# app.module.tsにAnimationsモジュール追加

Angularでアニメーションを利用するにはBrowserAnimationsModuleが必要なので追加します。
モジュールの追加インストールが必要な場合は追加してください。

“`typescript:app.module.ts
import { NgModule } from ‘@angular/core’;
import

動くスプレッド構文

“`javascript
const iterableA = [A1, A2, A3];
const iterableB = [B1, B2];
const result = […iterableA, …iterableB];
// [A1, A2, A3, B1, B2]
“`

この `[…iterableA, …iterableB]` を見たとき私の頭の中はこうなっているという図です[^1]。

[^1]: `iterableA` と `iterableB` の中身が出るように見えますが中身は減りません。ここを正しく表現しようとするとややこしくなるのでこれで妥協しています。


`[…iterableA, …iterableB]`を評価する処理を具体的に書くならこうなるでしょう。

“`javascrip

GatsbyjsでWordPress風の簡易ブログを作って勉強してみた

[Gatsbyjsのチュートリアル](https://www.gatsbyjs.org/tutorial/)がとてもわかりやすくて勉強になったので、
自分で内容を忘れないためにWordPressのデフォルトのテンプレートに近いものを作ってみました

また、私はGatsbyjsやWordPress初心者です、よろしくお願いいたします :bow:

—

作ったのはGitHub Pagesで見れます↓

https://okumurakengo.github.io/gatsby-blog-example/


—

私が作成したコードは以下です

Vue.jsでユーザーのEnter入力時にformをsubmitさせない方法

## 結論
対象のformタグに以下のv-on属性を設定する。

“`vue

@submit.prevent
“`

## 説明
formのsubmitという動作が発生する事を防ぐ（prevent）。
formのsubmitはブラウザ自体の挙動です。formの各要素（テキストエリアなど）でエンターキーを入力すると、submitが発火します。上記コードでそれを防ぐ事ができます。ちなみに、ブラウザのデフォルトの挙動ではなく、お好きな関数（ここではcustomFunction）を実行したい場合は以下のとおり書きます。

“`vue

@submit.prevent=”customFunction”
“`

## 同様の事例
たとえば何らかのファイルのドラッグドロップで発火する処理（ここではdropFunction）を設定したい場合、デフォルトだと、ドロップされたファイルがブラウザで開かれてしまいます。それを回避するには以下のとおり書きます。

“`vue

@dragover.prevent
@drop.prevent=”dropFunction”
“`

dropイベントのみ

JavaとJacksonでJSON その③HTMLにJSONを埋め込んでJavaScript から利用する

#はじめに
JSONを使う場合、JavaScriptからAjax経由でデータの送受信を行うケースが多いと思う。しかしながら、サーバからHTMLを受信したタイミングで、JSONデータを受け取ってJavaScriptで利用したいケースもある。この場合、サーバから返却するHTMLの中にJSONデータを埋め込んで、それをJavaScriptのオブジェクトとして読み込むことになる。PHPを利用した場合は、[HTML に JSON データを埋め込んで JavaScript から利用する](https://qiita.com/hoto17296/items/197bdf91f97a33a69dfc)に記載の事例があったが、我らがJava(Servlet/JSP)による事例がなかったため、悪戦苦闘した結果をここに残しておく。
#環境
– Java 1.8
– Tomcat 8.0.53
– Jackson 2.10.1

#まずは何も考えずにやってみよう⇒失敗
## サーバ側
サーバ側は以下の通りとした。”<"や">“については、[前回](https://qiita.com/kimisyo/items

JavaScriptのmap()メソッドについて

# はじめに
現在、JavaScript、jQueryを使って簡単な検索予測機能をつくっています。
その際、新しい配列の要素を作るために.map()メソッドを使用したのですが、引っかかった部分がありましたので、記事にしてみました。

# 疑問点
複数のワードに対して検索予測をかけるために
ここでは、inputタグにて入力された値を配列に入れ、正規表現に変換することまでを目的にしています。

“`Javascript
//HTMLのタグで下記のようにid=”keyword”が与えられている状態
//

//配列inputsの要素に対して、入力された文字を先頭として始まる文字列を表現する
//ために”^”を付け足すための関数
function editElement(element) {
let result = “^” + element;
return result;
}

//①入力された文字列をval()で受け取る。

Apollo(GraphQL)+gRPC+WebFlux(Reactive)を利用して2020年のモダンアーキテクチャアプリを作ってみた

## はじめに

本記事では2019年から2020年にかけての年末年始を使って開発した、”Hello Worldを出力するアプリ”の話をしたいと思います。

Hello Worldを出力する、と言っても単にフロントエンドでReactの`

Hello, World!

`と書いて出力したという話ではなく、

1. フロントエンドで**Apollo Client**を使って**GraphQL**でQuery/Mutationのリクエストを行い、
1. BFF(Backend For Frontend)の**Apollo Server**でGraphQLのリクエストに応じた**gRPC**のリクエストをバックエンドへ内部的に行い、
1. バックエンドで受け取ったgRPCリクエストに応じた処理(追加/削除)を**WebFlux**でリアクティブに実行し、逐次レスポンスを返却、
1. BFFでgRPCのリクエストをGraphQLのレスポンスとして整形し、
1. フロントエンドでGraphQLのレスポンスを用いて画面の表示、更新を行う

という内部的な処

JavaScript勉強の記録その3: for文

#Javascriptでfor文

for (初期値; 条件式; 増減値) {ループ毎に行いたい処理;}
と書くことでループ処理ができる。

以下の例では１から10までをコンソールに表示します。

“`index.js
for (let i = 1; i <= 10; i++) { console.log(i) } // 1 // 2 // 3 // 4 // 5 // 6 // 7 // 8 // 9 // 10 ``` ちなみに``（バッククオート）の中に、${式}と書くことで、文字列の中に式を展開することができます。　これをテンプレートリテラルと言うそうです。 ```index.js for (let i = 1; i <= 10; i++) { console.log(`hello ${i}`) } // hello 1 // hello 2 // hello 3 // hello 4 // hello 5 // hello 6 // hello 7 // hello 8 // hello 9 // hello 10 ```

humbergermenuのコード

“`html:filename.html

JavaScript勉強の記録その2: Switch文

#JavascriptでSwitch文

switchの引数でとった値を判定し、’赤’だった場合は「止まれ」、’黄’だった場合は「注意、’青’だった場合は「渡れ」をコンソールに表示します。

“`index.js
const signal = ‘青’

switch (signal) {
case ‘赤’:
console.log(‘止まれ’);
break;
case ‘黄’:
console.log(‘注意’);
break;
case ‘青’:
console.log(‘渡れ’);
break;
}
“`

ちなみにbreakはループ処理を抜ける命令ですので、breakの記述がない場合は下まで処理が続きます。

“`index.js
const signal = ‘青’

switch (signal) {
case ‘赤’:
console.log(‘止まれ’);
break;
case ‘青’:
console.log(‘注意’);
case ‘青’:
console

Javascript勉強の記録その１: If文

#Javascriptでif文
一番シンプルな形としてはif(条件式){Trueだった時の処理}と書くことができる。

“`index.js
const score = 90;

if (score >= 80) {
console.log(‘Great!’);
}
“`

if(条件式){Trueだった時の処理}else{Trueじゃなかった時の処理}という書き方もできる。

“`index.js
const score = 60;

if (score >= 80) {
console.log(‘Great!’);
} else {
console.log(‘OK…’);
}
“`
条件式の中に&&や||を入れることで、ANDやORを表現することができる。

“`index.js
const score = 60;
const name = ‘okuno’

if (score >= 50 && name === ‘okuno’) {
console.log(‘Good Job!’);
}
“`

知らないとはまってしまうJavaScriptの配列コピー

# 概要
JavaScriptで配列コピーをする際、
「＝（イコール）」によるコピーでは意図した動作にならない場合があります。
意外にはまりやすい落とし穴だと思ったので、
初心者にもわかりやすいよう、図も載せておきました。

# 配列コピーによる動き
まずは、動きを確認しましょう。

変数aの配列を宣言し、変数bにコピーします。

“`javascript:test.js
var a = [‘あ’,’い’,’う’,’え’,’お’];
var b = a;
“`
その後、変数b[0]の内容を書き換えます。

“`javascript:test.js
b[0] = ‘か’;
“`

この時、書き換えたいのは変数bの値ですが実際は

“`javascript:test.js
console.log(‘変数a: ‘ + a); // [‘か’,’い’,’う’,’え’,’お’]
console.log(‘変数b: ‘ + b); // [‘か’,’い’,’う’,’え’,’お’]
“`

と、変数aの値も書き換わってしまいます。
書き換えたのは変数bだったのに、なぜ変数aも一緒

[連載]スーパーマリオ的なゲームをjavascriptで作ってみる 初級編 〜3章〜 画像を動かしてみる

## 本連載について
– プログラミング初心者がスーパーマリオ的なゲームを作成するのに情報をまとめたものです
– 不明点や不備あれば、ばしばしコメントいただきたいです！！！より良いものにしたいので！
– 一番最初の連載は[こちら](https://qiita.com/hockeyarchitecture/items/139c27ff4806eaf2367f)から確認お願いします！
▼ゲームイメージ

▼目次
[1章 準備する](https://qiita.com/hockeyarchitecture/items/139c27ff4806eaf2367f)
[2章 簡単なページ作ってみる](https://qiita.com/hockeyarchitecture/items/76e0e90c1

JavaScript ブラウザイベント

## イベントハンドラとイベントリスナ
– イベントに対する処理自体をイベントハンドラまたはイベントリスナと呼ぶ。
– イベントハンドラは一つの要素、一つのイベントに対して一つしか設定できない。
– イベントリスナは複数設定できる。
– イベントに対する処理の設定方法は以下の通り。
– HTML要素の属性を指定する（イベントハンドラ）
– DOM要素のプロパティを指定する（イベントハンドラ）
– EventTarget.addEventListener()を利用する（イベントリスナ）

### HTML要素の属性を指定する

“`javascript

“`
ただしHTMLとJavaScriptを混在させると、可読性が低いので、通常はJavaScript のファイルは一つにまとめる。

### DOM要素のプロパティを指定する

“`html

```

# 解説

DocumentはオブジェクトでgetElementByIdがメソッドになる。getElementByIdでdocument内にある指定したidと一致したものをとってくる。そのとってきたidに対してaddEventListenerメソッドを使っていてclickで発火するようにしている。

Document
https://developer.mozilla.org/ja/docs/Web/API/D