f@ctor

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

JavaScript関連のことを調べてみた2020年10月06日
目次

今更ながらJavascriptでSOAPを通してxmlをparseする

![GETALLUSERS.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223443/a790aa51-79f7-faf1-9535-2ef00f5fc250.gif)

#やりたいこと
タイトルの通りで申し訳ないのですが、webserviceを呼び出そうとしたらRESTではなくSOAPだったんですね。。
RESTやJSONだと簡単にできてたところがなかなか難しかったりなので備忘録です。

##投げるところ
今回は[YellowfinのGETALLUSERS](http://wiki.yellowfinbi.jp/pages/viewpage.action?pageId=2294147)(クリックで技術仕様ページ)というサービスに投げます。SOAPでのリクエストやレスポンスが載っているのですが、基本的にはJavaでアクセスさせたいらしく、WSDLはあるもののJAVAのサンプル中心でどうしたらいいのかよくわからないです。

##前準備
ボタンとイベントリスナーを作るために、widgetからボタンを設置し

元記事を表示

【TypeScript】依存関係の逆転の原則(DIP) を考える

主に下記の記事を参考にしました。
[よくわかるSOLID原則5: D（依存性逆転の原則）｜erukiti｜note](https://note.com/erukiti/n/n913e571e8207)
[Vue Composition API + TypeScriptで DI(依存性の注入）, DIP（依存性逆転の原則） を実装してみる – Qiita](https://qiita.com/ryo2132/items/03380df2df5b4b2933d7)
[DIPについて勉強し直してみた – Qiita](https://qiita.com/ohteru/items/2185984f4019bf77488a)

## 内容
– 依存するって？
– 依存性の注入(DI)
– 依存関係の逆転の原則(DIP)
– 実装

## 依存するって？
>AというモジュールがBというモジュールを読み込む場合、AはBに依存しているといいます
[よくわかるSOLID原則5: D（依存性逆転の原則）｜erukiti｜note](https://note.com/erukiti/n/n913e571e

元記事を表示

ポリラインを一定距離ごとにぶった切る turf.lineChunk

緯度経度群（LineString）を、一定距離ごとに分割したいというニッチな要求にも応えてくれる [turfjs](https://turfjs.org/) すごい。

例えば、東京－名古屋－大阪 を結ぶ LineString があるとします。

“`typescript
const line = turf.lineString([[139.76, 35.68], [136.90, 35.17], [135.51, 34.68]]);
“`

これを、[turf.lineChunk](https://turfjs.org/docs/#lineChunk) を使って「100km 毎に分割」します。
“`typescript
const chunk = turf.lineChunk(line, 100, { units: ‘kilometers’ }) as FeatureCollection;
“`

100km ごとに分割された図形群は “FeatureCollection“ として返却されます。
“Feature“ 型は少々冗長なので、図形の座標群だけ抜き出すと次のよ

元記事を表示

Vue CLIの導入方法

どうも　最近Vuejsを始めたので
アウトプットしていこうと思います

#Vue CLIとは

VueCliはVue.jsで開発するための便利ツールであります
私の解釈で話しますと、
VueCLIはVueを使うときに最初にうつコマンドのところであり
プロジェクト生成するときに使います。
CLIはコマンドインターフェースであります。

なぜこんな説明をしたかと言いますと、
なんと私

####Vue.jsと　Vue CLIって違うものなの？
とかなんかあたかも対等な関係的な感じで考えていました。
当たり前に違いました。

#導入方法

１　Vue CLIをグローバルにインストール

“`
% npm install -g @vue/cli
“`

2.これでバージョンを確認

“`
vue –version
“`

3.プロジェクトを作成(hoge-appのところは自分の作りたいプロジェクトの名前）

“`
vue create hoge-app
“`

4.プロジェクトを作るとこのようなものが出てきます
とりあえず初めてのかたであれば設定をカスタ

元記事を表示

pay.jpの導入

#Pay.jpの導入方法
##クレジットカード決済の代行サービスで、簡単なオープンAPIで導入する事ができる
#Why
##コード量も非常に少なく、Javascriptで簡単にフォーム送信までできるのでご紹介します（割愛しながらの説明になります）
#アプリケーションの作成
“`java:ターミナル
% cd ~/projects(好きなように)
% rails _6.0.0_ new payjp_practice -d mysql
% cd payjp_practice
% rails db:create
“`
#Orderモデル作成
“`java:ターミナル
% rails g model order
“`
#Ordersテーブル作成
“`java:db/migrate/**************_create_orders.rb
class CreateOrders < ActiveRecord::Migration[6.0] def change create_table :orders do |t| t.integer :price ,nu

元記事を表示

JavaScript 配列の中の重複を省く簡単な方法

# 配列の重複を省く簡単な方法
## プリミティブ値

– 数字
– 文字列
– 真偽値

“`javascript
//重複を省きたい配列
const old_array = [1,1,1,2,2,2,3,4];
const new_array = […new Set(old_array)]

console.log(new_array);
// [1, 2, 3, 4]
“`
##
Set

## Object

### やりかた
1. ソートします。
2. 隣接するObjectと比較して重複しているなら省く。

以上

### 実践

“`javascript
const old_array = [{k:3},{k:1},{k:2},{k:3},{k:1},{k:2},{k:3},{k:3}];

//ソート
old_array.sort((o1,o2)=> o1.k – o2.k);

//何を重複と

元記事を表示

document.formsが便利だった

# はじめに
久しぶりにフレームワークを使わずにJavaScriptを扱いました。
その際、formの内容を操作をするのに**document.forms**を利用しました。
忘れない内にまとめておきます。

# document.formsとは
HTML文書内に含まれる全てのformのHTMLCollectionを返します。
読み取り専用です。

# 便利な事
* 記述が短くてすみます。
* `document.forms`なので、何を表しているのか直感でわかります。
* `document.forms`の`elements`プロパティはフォームコントロールのみにアクセスできます。
この為、他の要素の事を気にせずに（例：要素を判定）、フォームの操作のみ書くことができます。

読む側にとっては、何を検索しているのかをすぐに把握できる事がメリットだと思います。
また、書く側にとっても直感的に書けるのではないでしょうか。

# 使い方
下記でアクセスできます。

“`HTML

[jQuery]入力フォームのバリデーション

##概要
チャットなどでメッセージを送る時に、フォームが空の状態で相手にチャットが送れないようにバリデーションを実装しました。
slackみたいに、初期状態ではボタンが押せない状態でメッセージが入力されるとボタンが押せるようになります。
送信後は、フォームが空になるのでボタンが再び押せなくなります。

####チャット送信フォーム

“`index.html


“`

###jQueryの処理

“`chat.js

//バリデーション
let sending = false;

$(‘#message-input’).keyup(function () {
const chatMessage = $(this).

元記事を表示

【超初心者向け】javascriptとjQueryの違いは何？5分で解説。

# どうも7noteです。これからjavascriptやjQueryを使いたい方向けの記事です。

WEBサイトの制作で、動きを付ける時に「javascriptを使ったらいいよ」とか「jQueryで書いたらいいよ」など書かれた記事を目にすることがあります。

***「でも何が違うの？？？」***

私も始めたての頃、javascriptとjQueryの違いがよくわからず躓いた経験があります。
その経験から、使えるようになるまでの道のりを**5分**で解説していきたいと思います。

## 関連用語の説明

|用語|意味|
|:–|:–|
|javascript|**プログラミング言語の一種。**WEBサイトの動きを付けるのにも使われるし、サーバーサイドの処理も行なえる人気のプログラミング言語。|
|js・JS|javascriptの略。|
|jQuery|javascriptの**ライブラリ**。|
|ライブラリ|**プログラミング言語の処理を使いやすくまとめた辞書**のようなもの。ライブラリを使うことで、普通に書くと数行かかる処理も1～2行で簡単に分かりやすく書くことができる。|

元記事を表示

ブラウザーで表計算を作りたい？

#ブラウザーでも表計算みたいに入力したい
…とかいう要望が出ることがありますね。
やってみましょう。
テキストボックスをたくさん並べて…、じゃないですよ。

“`html:worksheet.html