- 1. [ServiceNow] サービスカタログに引数を渡したい
- 2. 【JavaScript】配列の中にオブジェクトを追加する。
- 3. 無料でSSR・ホスティング・API鯖を立てれるVercel。無料でホスティングするサンプル。Parcel・ReactでSPA。
- 4. vue.js コンポーネントの書き方
- 5. gatsby入門 チュートリアルをこなす ソースプラグインの作成（１）
- 6. jQuery mapメソッドについて
- 7. JSエコシステムぶらり探訪(2): Node.jsとCommonJS modules
- 8. javascripitのconstとは？
- 9. JavaScript 高階関数 Higher-Order Functions とは
- 10. form_tag内のsubmitが反応しないときの対処
- 11. Railsのformを素のJavaScriptで送信する
- 12. ブラウザに表示させるための事前処理（コンパイラ）
- 13. Raspberry PiとOpenCVでWEB監視カメラを作成する
- 14. 簡単レシート印刷 receiptline で行間隔を調整してみた
- 15. JSのProxyでアルゴリズムを可視化する
- 16. keyof typeofの使い方 [TypeScript]
- 17. Java Script 基礎文法編 1
- 18. javascriptで配列の要素がオブジェクトの場合に、全て値渡しでコピーしたいとき
- 19. Web 素人大学生が Vue.js+Firebase+GAS で部活をハックする！！#1 環境構築
- 20. 【Vue.js】ボタンの切り替えテクニック
[ServiceNow] サービスカタログに引数を渡したい
# きっかけ
とあるサービスカタログに前のページで表示している値を引き継いで遷移したいという要望があり、URLから取得する方法を実装しました。## 参考にした記事
https://jace.pro/post/2018-07-15-sp-set-variables-via-url/## プラットフォーム
NewYork## サンプル
以下のカタログ（レコードプロデューサー）のAsset No.フィールドに値を渡したい。
# 方法1 変数のDefault Valueを使用する
と点数（キー名points）を代入した変数testがあるとする。
let test = [{subject: ‘sociology’, points: 75}, {subject: ‘english’, points: 50}, {subject: ‘biology’, points: 85}];
この中に、点数95点をとった科目scienceを入れたい場合、ハッシュ名[キー] = 追加したい値;
では入れられない。
あくまでも、配列[]に追加したいわけなので、pushを使う。
test.push = ({subject: ‘science’, points: 95});
これで追加完了。ここから、points’95’だけを抽出したい場合は、
console.log(test[3][“points”]); ・・・配列testのインデックス番号[3]の[‘points’]プロパティを出力、という意味。
まとめると下記のとおり。
## ソースコード
“`package.json
{
“scripts”: {
“start”: “rimraf local && parcel src/index.html -d local”,
“build”: “rimraf public && parcel build src/index.html -d public –no-source-maps”
},
“dependencies”: {
“connected-react-router”: “^6.8.0”,
“history”: “^5.0.0”,
“react”: “^16.13.1”,
“react-dom”: “^16.13.1”,
“react-
vue.js コンポーネントの書き方
Vue cliを使わないcdn版でのコンポーネントの書き方です。
いくつか書き方があり迷うので自分メモ的に投稿致します。
大きくわけてグローバル登録とローカル登録があります。
## コンポーネントの書き方（グローバル登録）
コンポーネント名はHTMLタグになるもの
テンプレート名は直接HTMLタグを書くか、HTML内に記述したx-templateの対応するidを設定“`js
//コンポーネント１
Vue.component(‘コンポーネント名A’, {
template: ‘HTMLタグを記述、もしくはテンプレートのid’,
data: function() {
return {
number: 12
}
}
})//コンポーネント２
Vue.component(‘コンポーネント名B’, {
template: ‘HTMLタグを記述、もしくはテンプレートのid’,
data: function() {
return {
msg: ‘hello
gatsby入門 チュートリアルをこなす ソースプラグインの作成（１）
# チュートリアルをこなす！
以前にgatsbyの基本のチュートリアルをこなしたのですが、まだチュートリアルが残っているので最後までやっていこうと思いました。
今回実施するgatsbyのチュートリアルはこちら
https://www.gatsbyjs.com/tutorial/plugin-and-theme-tutorials/
https://www.gatsbyjs.com/tutorial/source-plugin-tutorial/
早速やっていきましょう。
#Plugin & Theme Tutorials
https://www.gatsbyjs.com/tutorial/plugin-and-theme-tutorials/
ここではプラグインとテーマのチュートリアルの概略が記載されていました。
ざっくり言うと
プラグインは、Gatsby APIを実装するNode.jsパッケージ。
テーマは、事前設定された機能やデータソーシング、UIコードをギャツビーサイトに追加するプラグインの一種。
要はサイト構築に便利な物が作れまっせ（しかも共有出来まっせ）ってことで理解しました
jQuery mapメソッドについて
_今回は超初心者が、jQuryのmapメソッドを学んだので、_
_処理内容を書いて行きます。_#mapメソッドの処理内容
画像とコード元に解説します。
__画像__
__コード__“`sample.js
//配列オブジェクト
let names = [“aaa”,”bbb”,”ccc”];//関数（コールバック関数）
function disp(text) {
console.log(text);
}//mapメソッドで配列を呼び出し。
names.map(disp);
“`__処理内容__
今回は、コンソール上に__aaa__,__bbb__と表示させるコードを書いました。
①
まず、配列オブジェクト__「names」__を、mapメソッドを使用して呼び出します。
JSエコシステムぶらり探訪(2): Node.jsとCommonJS modules
JSエコシステムの進化を語るにはNode.jsを避けて通ることはできません。Node.jsと、それ自身の持つモジュール機能について歴史的な背景を踏まえつつ説明します。
[←前](https://qiita.com/qnighy/items/fc19f328cf36fc28658c) [目次](https://qiita.com/qnighy/items/16fdd8e58309a1f706a0)
## Node.js
Node.jsは非同期I/Oを備えたサーバーサイドJavaScriptのための実行環境として2009年に登場しました。[^server-side-js-before-node] 現在はサーバーサイドJavaScriptだけではなく、JavaScriptのビルド環境として無くてはならないものになっています。
[^server-side-js-before-node]: [Wikipediaの記述](https://en.wikipedia.org/wiki/Node.js#History)によると、それ依然にもサーバーサイドJavaScriptの技術自体は存在してい
javascripitのconstとは？
##JavaScriptにおけるconstとはなんでしょうか？
constで宣言された変数は、再代入が不可能になります。
他のプログラミング言語では`const`というキーワードはコンパイル時定数になることがほとんどですが、
JavaScriptでは単に再代入不可になるだけです。
つまり、JavaScriptにおける`const`は、他のプログラミング言語におけるfinalと同じ動きをします。
`const`を使うのは変数への再代入が不要な場合、あるいは再代入されたくない場合になります。つまり、JavaScriptでは再代入が必要な場合は`let`、不必要な場合は`const`を使用すればいいということになります。
JavaScript 高階関数 Higher-Order Functions とは
## この記事を読むとわかること
JavaScript初心者が高階関数(Higher-Order Functions)を理解できます。## 高階関数 Higher-Order Functions とは
### 高階関数 Higher-Order Functions とは
高階関数とは、次のいずれかを実行する関数です。
* 関数を引数として扱う
* 関数を戻り値として扱う### 高階関数を使うことのメリット
* 抽象化により、人間の読者が簡単に再利用、デバッグ、理解できる方法で複雑なコードを書くことができます
* 新しい変数に再割り当てするなど、他のタイプのデータと同じように関数を操作できます
* 機能のまとまりを細切れに保つことにより、テストが容易になります### 第一級関数 first-class function とは
高階関数を理解する上でJavaScriptの関数の持つ基本の性質を知る必要があり、第一級関数 first-class function について触れておきます。第一級関数とは、第一級オブジェクトとして扱うことのできる関数のことであ
form_tag内のsubmitが反応しないときの対処
#前提
Ruby on Railsでローカル開発中、Chromeで動作確認をしていたとき。
form_tag内にJavaScriptとsubmitが含まれているページにlink_toを使って移動したときに発生した。
#症状
form_tag内のsubmitをクリックしてもリアクションを返さない。
（URLを直打ちした場合や、link_toを通してページを読み込んでも再リロードした場合に限りsubmitが反応するため、バグかもしれない。）#対策
form_tag内にJavaScriptを記述しないこと。
JavaScriptが記述されている場合にのみ、上記のような不具合が発生するした。
Railsのformを素のJavaScriptで送信する
## やりたかったこと
form送信後にJS側で何かしらの処理をしたい。
## 方法
fetchAPIのコールバックチェーンで行うことができる。
`turbolinks` や `rails-ujs` は使用しないので、 `remote: true` を使ったAjax通信とも異なるやり方。
「form送信後のJS処理」を、
当初 `form.submit() ~ setTimeout()` のような感じで書いたが、実行順序が担保されなかったので書き直した。## ポイント
`fetch` では
1. `credentials` に `’same-origin’`
2. `body` に `new FormData(form)`
を指定。`= f.submit` や `%button{ type: ‘submit’ }` を使うと Railsによってリクエストが飛ばされてしまうので、`%button{ type: ‘button’ }` を使って送信ボタンをクリックしたときにJavaScriptを呼び出すようにしている。
## サンプル
あまりサンプルがなかった
ブラウザに表示させるための事前処理（コンパイラ）
複数の静的ファイルがブラウザに適用されるまでの仕組みをまとめました。
大まかに言うと、
ブラウザでは認識できる言語が決まっており、どんな言語も認識できる言語に翻訳する必要があります。
この翻訳作業をコンパイルといい、コンパイルできないものは事前に処理をする必要があります。この事前処理はプリコンパイルと呼ばれ、細かい機能1つ1つをモジュールという処理のまとまりにし、コンパイルしてブラウザに返すといった流れです。“`
前提
プログラミング初学者(2ヶ月)が学んだ内容をまとめたものです。
実際の現場では通用しないことや間違った情報がある可能性があります。
お気づきの方はコメントにてご指摘いただければ幸いです。
“`#ブラウザは認識できる言語が決まっている
ブラウザはHTML,CSS,JavaScript,WebAssemblyという言語のみを認識することができます。
サーバーサイドでどんな記述をしていたとしても、最終的にはこの4つでブラウザに返されています。
これ以外の言語ではブラウザはページを描画することができません。
##開発を便利にする言語
ブラウザでは、上記4つだけを認識
Raspberry PiとOpenCVでWEB監視カメラを作成する
# Raspberry PiとOpenCVでWEB監視カメラを作成する
## はじめに
`Mac環境の記事ですが、Windows環境も同じ手順になります。環境依存の部分は読み替えてお試しください。`
### 目的
ブラウザにストリーミング動画を表示します。
この記事を最後まで読むと、次のことができるようになります。
| No. | 概要 | キーワード |
| :— | :——- | :——— |
| 1 | REST API | Flask |
| 2 | OpenCV | cv2 |### 完成イメージ
| ストリーミング |
| :———————————————-
簡単レシート印刷 receiptline で行間隔を調整してみた
[前回](https://qiita.com/dopperi46/items/88c8107648cf5be8b447)は 80 ミリカメラと 80 ミリフィルムで動画を撮影していました。
「役に立たない機械」感を醸し出していたかもしれないですね。
連続で印刷するため、変換ライブラリを少し変更して、自動用紙カットを解除しました。
今回もこの変換ライブラリ `lib/receiptline.js` に手を入れてみようと思います。# 用紙節約か、読みやすさか
receiptline に添付されているサンプルデータを印刷してみました。
左は TM-T88V で、右は mC-Print3 です。行間隔が狭いので、文字が詰まって見えます。
今どきのレシートプリンターには用紙節約機能があるので、そういう時代だと思いますが。）
初めに完成品のキャプチャとデモのリンクを貼っておきます。
**DEMO:** https://codesandbox.io/s/heuristic-morse-1kc2d?file=/src/index.js
**※ スマホだとシンタックスハイライトでエラーが出てるのでコード記載無し版も置いておきます。**
# JavaScriptのProxyとは
[Proxy – JavaScript | MDN](h
keyof typeofの使い方 [TypeScript]
#やりたいこと
object等の呼び出しで `Object[key]` のようにするとき、`key` に動的な変数を入れたい。
上記をより美しく。#問題・エラー
今回の記事では、こちらのコードを修正します。
関数`receivedStringValue()`は、ランダムでStringの値を返す関数とします。“`js
const object = {
aaa: ‘aaa’,
bbb: ‘bbb’,
ccc: ‘ccc’,
};
// keyには動的に生成された値
const key: string = receivedStringValue();
const value = object[key];
“`
こちらのコードでは、下記のエラーが出ます。“`
Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to
“`
#解決策
`object` に対して型を定義する#結論
`key` の型がわかるような `object`
Java Script 基礎文法編 1
# 詳細
今日から本格的にJava Scriptを学習しようと思う。
スクールでも学習したが基礎からコードを一つ一つ確実に理解する為アウトプットをしていく！## 定数
const price = 150;
price に 150を代入する事ができる。
ただ、constを使った場合このpriceに再代入する事ができない## 変数
let price = 150;
price に 150を代入する事ができる。
letは再代入する事ができる。
注 基本はconstを使いどうしてもという時だけlet を使うようにする。
javascriptで配列の要素がオブジェクトの場合に、全て値渡しでコピーしたいとき
vue.js等を使っていると、dataに定義している配列を、参照渡しじゃなくて、値のみコピーしたい場合ってよくありますよね。
例. 下記のような配列の要素がオブジェクトの場合。
“`javascript
const array = [{a: 1}, {a: 2}]
“`下記のようにmapで各要素ごとをスプレッド構文で展開して、pushしていけばおｋ。
“`javascript
let newArray = []
array.map(a => {
newArray.push({…a})
})
“`また、そのタイミングで、新しいプロパティを追加したい場合は、下記のようにすればおｋ
“`javascript
let newArray = []
array.map(a => {
newArray.push({…a, b: 0})
})
“`もっといいコピーの仕方を知っている方がいれば教えて下さい！
Web 素人大学生が Vue.js+Firebase+GAS で部活をハックする！！#1 環境構築
### はじめに
——–
Vue.js を愛してやまない友人から Vue 教の洗礼を受け、丸腰で Web の世界に足を突っ込んだ女子大生です。
素人が泥臭く開発しながらボチボチ書いていくので読みにくいと思いますが間違い等あったらご指摘お願いします### きっかけ
——–
私の所属する部活の学生連盟(以後、学連)はひじょーーーにアナログで、毎回仕事が大変すぎました(泣)
そこで、部活の Web サイトを魔改造しよう！！とおもって開発をスタートしました。(これを書いている段階で少し開発を進めているため、最初のほうは記憶が曖昧です)### こんなもの作りたいな
—–今までメールで行っていたこと＋ローカルで行っていたことを搭載し、以下の機能を実装したいと思います。
また、随時 MVP としてメンバーに使ってもらい機能を追加していく予定です。– 認証機能(メアド、パスワード)
– 選手登録
– 大会エントリー
– コート割り設定
– 点数計算
– 大会結果出力また、機械慣れしていないユーザーを想定し、
– スマホ対応画面
– 直感的な UI
【Vue.js】ボタンの切り替えテクニック
モダンなサイトだと、ボタンをクリックしたらアイコンが切り替わって、内容が見れたりするようなUIも増えてきていますよね。
そんなボタンの切り替えの構造をVue.js(Nuxt.js)で表現していこうと思います！
#ボタンを押すと、記事内容の表示・非常時を切り替えられる
###ボタンをそして、あるデータの真偽値を変化させる
“`vue:
“`“`vue:
“`ボタンを押すと、falseの真偽値が切り替わる
###showの真偽値によって変化する者たち
“`vue:
{{ show ? ‘mdi-chevron-up’ : ‘mdi-chevron-down’ }}
“`
