- 1. JavaScriptでArrayに対する破壊的メソッドを安全に使う方法
- 2. [Angular] リアクティブフォームから値を取得する際のvalueに型を定義する
- 3. ほぼメモ。JSONの文章中でダブルクォーテーションを使いたい。
- 4. obnizとブザーで兄弟配管工ゲームのコイン音を出してみた
- 5. storybook for htmlを使って簡単にコンポーネントのカタログを作成する
- 6. Serverless Components はオレたちの未来を劇的にスケールさせるか
- 7. 【JS】JS-Proメモ
- 8. 解決方法: “Error: Invariant failed: You should not use outside a “
- 9. Netlify functionを使ってフォームが送信されたときに送信したユーザーのメールアドレスに自動返信する。
- 10. Kinx ライブラリ – String
- 11. 【async/await】JavaScriptで非同期処理プログラムを作成する【標準入力】
- 12. [Rails]画像選択時にプレビュー表示
- 13. GitHub の「Fork」ボタンを「パクる」に置き換える UserScript
- 14. 【プログラミング学習4日目】JavaScriptをかじってみた
- 15. 【node.js】validationを新しいバージョンに対応コードに変更する
- 16. 【React + Material-UI】数字当てゲームを作ろう！【2020年4月版】
- 17. sakuraエディタマクロ（json整形、マークダウン形式変換、改行統一、デコード）
- 18. ワイ「なに！？型のズレを吸収できるやと！？」
- 19. jQueryで特定セルをクリックした時にそのセルの内容で検索する
- 20. C3.js で折れ線グラフを描画する
JavaScriptでArrayに対する破壊的メソッドを安全に使う方法
### これは何
@Shokorep さんにより、[JSの破壊・非破壊メソッドがまとまっている記事](https://qiita.com/Shokorep/items/929e2e66908eaa915286)が書かれていましたが、私のこの記事では「破壊的な関数をどうやって安全に使うか」という話を書こうと思います。
### 破壊的とは
対象となるArrayの中身を変えてしまうこと。
例えば reverse() ですと以下のようになります。
元のArrayであるarr1の中身が変わってしまっています。
### 破壊的なものを安全に使う
一回配列展開をしてあげると元のArrayとは無関係になるので、安全に使用することができます。
##### スプレッド構文（`[…arr]`）を使う方法
: T {
return this.value;
}
}
“`それを利用して、リアクティブフォームから値を取得する。
“`js
// fromの型を定義しておく。
interface Form {
hoge: string;
}ngOnInit() {
const form: FormGroupTyped
ほぼメモ。JSONの文章中でダブルクォーテーションを使いたい。
例えばこんなファイルがったとします。
“`json
{
“こんにちは”: “Hello!”,
“おやすみなさい”: “Good night!”
}
“`これだけだったら特に問題にならないですね。
もし、
ダブルクォーテーションを使いたかったら？？？“`json
{
“六法全書”: “\”a digest of Japanese laws\””
}
“`
[翻訳参考](https://ejje.weblio.jp/content/%E5%85%AD%E6%B3%95%E5%85%A8%E6%9B%B8)
ダブルクォーテーションの直前に\を置けば解決です。
obnizとブザーで兄弟配管工ゲームのコイン音を出してみた
#作ろうと思ったきっかけ
– ProtoOutoStudio ３回目授業でobnizに触れる
– ブザーが面白かった兄弟配管工ゲームでは、ブロックを叩くとコインが出てきますよね。その時の効果音を再現してみようと思いました。
#”あの”効果音の音階を調べてみた
[コインの音](https://muuu.jp/koneta/sm-coin/)
が、楽譜が読めないぞ….。オクターブもよく分からん….。
よし、トライ＆エラーか？？？（音痴です）#まずはベースとなる”ド”を鳴らす
”ド”の音が何Hzか調べました。今回は[こちら](https://general-knowledge.xyz/frequency-and-scale/)のサイトを参考に周波数を設定していきます。
【鳴らしてみた様子】
obnizにブザーをつけてみた。まずはドの音を実装！ storybook for htmlを使って簡単にコンポーネントのカタログを作成する
# 対象読者
– React.js,Vue.jsを使っていないプロジェクトでstorybookを導入したいけどやり方がわからない人
– マークアップ言語 + JavaScriptちょっとわかる人
– storybookの勉強はしたいけど、React.js,Vue.jsの勉強まではやりたくない人# 成果物
## URL
https://miwa-storybook-html.netlify.com/
## GitHub
現在作成中です。
https://github.com/miwashutaro0611/html-storybook
# 対応環境
## 言語
– HTML
– SCSS`css`で行いたい場合、「既存のscssファイルの読み込み」の部分などの`scss`を`css`に変えたり、「storybook上でscssファイルが読み込まれるように設定」の部分を飛ばすなどで対応することができると思います。(未検証)
## バージョン
– node: v12.16.1
– @storybook/html: “^5.3.18”
– node-sass:Serverless Components はオレたちの未来を劇的にスケールさせるか
Serverless.inc 社より、[Serverless Components](https://github.com/serverless/components) がついに GA されました。
近年のアプリケーション開発では、いくつかの SaaS を組み合わせることで超高速に開発を行うことができます。例えば「認証は Auth0、ホスティングは Netlify、バックエンド API は AWS Lambda を使用する」といった具合です。このように複数
【JS】JS-Proメモ
# メモ
## let
– 変数(変更可能)
## const
– 定数(変更不可能）
## 条件分岐
– if文とswitch文の二つの方法
### if文
– 2つから片方を選択する場合に使用
### switch文
– 複数から選択する場合に使用
## 出力の中で比較演算子を使うとtrue or falseで帰ってくる
“`js:エディタ
const age = 20
console.log(age > 10)
console.log(age > 30)
“`“`console:ターミナル
true
false
“`
## 反復処理– while文とfor文の二つの方法
### while文
– 長いが文法がif文と同じ為、わかりやすい
### for文
– 変数の定義もfor文内ででき、シンプルに記述できる
解決方法: “Error: Invariant failed: You should not use outside a “
##はじめに
`react-router-hash-link`を使ってreactアプリを作っている時につまずいた備忘録です。## コード
“`jsx:React.js
import React, { Component } from ‘react’;
import { HashLink } from ‘react-router-hash-link’;export default function hoge() {
return (
hoge
)
}
“`##エラー
“`:console.log
Uncaught Error: Invariant failed: You should not use outside a
at invariant (tiny-invariant.esm.js:10)
at Link.js:84
at updateCont
Netlify functionを使ってフォームが送信されたときに送信したユーザーのメールアドレスに自動返信する。
自社サイトを構築するときに、いままではWordpressのプラグインを使っていたので
フォームを送信したときに自動的に送信した人のメールアドレスに返信するシステムを作っていた。
JAMstackだとサーバーも何もないのでそのような動的な動きを作るにはどうすればいいか悩んだ。#### netlify function
https://docs.netlify.com/functions/overview/これを使うことでAWS Lambdaと同様の動きをnetlify上で起こすことができる。
今回使用するのはsubmission-createdという名前を使うことでFORMが送信されたときをトリガーとして動作させることができる。
他にも様々なことをトリガーとしてどうさせることができるので用途に応じてチョイスするのが良いだろう。使う内容としてはnodemailerを使う
https://nodemailer.com/about/“`submission-created.js
require(‘dotenv’).config();const nodemailer =
Kinx ライブラリ – String
# String
## はじめに
**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。言語はライブラリが命。ということでライブラリの使い方編。
今回は String です。
* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ … [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。文字列操作の基本インターフェース。String オブジェクトに括り付いたメソッドは特殊メソッド（と呼ぶメソッドがある、名前は今決めた）扱いで、文字列オブジェクトに直接作
【async/await】JavaScriptで非同期処理プログラムを作成する【標準入力】
## はじめに
「解きながら学ぶJava」（その名の通り「〜〜するプログラムを作成せよ。」といった問題を解きながらJavaを学んでいく書籍）に書かれている問題を**”JavaScriptで書く”**ということをやっている中で見事に詰まりました。JavaScriptは、JavaやRubyのようにクラスを用いて綺麗に定義、みたいなことがしづらいですし、標準入力も若干面倒なので結構苦戦しました
（今回はreadlineモジュールを使用）ちなみに私は、上記の本を持っておきながら、Javaを触ったことはありません。笑
##どんな問題？
**キーボードから次々と整数値を読み込んで、合計と平均を求めるプログラムを作成せよ。加算する整数の個数は最初に読み込むこと。**という問題です。
##実際に書いたプログラム
“`4_26.js
const readline = require(‘readline’);
const log = console.log;
const rl = readline.createInterface({
input: process.stdin,
[Rails]画像選択時にプレビュー表示
#本記事投稿のいきさつ
アプリの中で画像投稿機能を実装したとき、ただフォームを作成するだけでは画像を選択しても表示がされず何を選んだのか確認をすることが出来ません。
そこで、画像を選択した時点でプレビュー表示することができればいいなと思い、実際に機プレビュー機能を作成したため、記録として残したいと思います。
今回はユーザーのプロフィール画像の編集画面を想定します。
そのため、既に登録されている画像は最初からプレビューさせた状態で表示をさせます。## 前提
– 変種画面はprofile_edit.html.haml
– 画像の保存先は Usersテーブル： imageカラム
– file_field本体は隠し、画像が選択されていない時はiconを、
選択されている時はプレビュー画像をクリックすることで画像選択できるようにします。
– jQueryを使用しますが、必要なGemのインストール等は既に出来ているとします。
– ユーザー機能はDeviseを使用しています。
– cssは今回の内容に含まれません。##フォーム作成
まず、今回はhamlでビューのフォームを作成します。`
GitHub の「Fork」ボタンを「パクる」に置き換える UserScript
“`javascript
// ==UserScript==
// @name Replace Fork with パクる for GitHub
// @namespace https://foooomio.net/
// @version 0.1
// @description だから、そういうことじゃなくて?
// @author foooomio
// @license MIT License
// @match https://github.com/*
// @run-at document-idle
// @grant none
// ==/UserScript==// 元ネタ: https://twitter.com/IiToshihide/status/1246487047545556992
(() => {
‘use strict’;const $ = document.querySelector.bind(document);
function m
【プログラミング学習4日目】JavaScriptをかじってみた
# はじめに
独学プログラミング学習の4日目忘れっぽいので備忘録代わりに残しておこうと思う
※人に見せる前提ではないよ## 目標
– 簡単なページをサクっと作れるようになる
– Web上に自分のポートフォリオを公開
– アウトプットのスキルを身につける## JavaScriptってなに？
[こちら]を見てみると，動的にコンテンツを更新したり，マルチメディアを管理したり，その他多くのことができるスクリプト言語と書いてあるつまりどういうことだってばよ？となっているのだが，
おそらくページ内のものを動かしたり，なにかのアクションをトリガーとして動作するプログラムを作れるということだと思っておく
~~使ってみればわかるよね~~## 実際に使ってみた
今回作ったのは，こちら~~~html
【node.js】validationを新しいバージョンに対応コードに変更する
##解決したい問題
パッケージvalidationのバージョンが古いので新しいバージョンの書き方に変更したい。##環境
OS: macOS
express: ^4.17.1
ejs: ^2.6.2
express-validator: ^6.4.0##変更前のコード(古いコード)
“`javascript
router.post(‘/’, (req, res, next) => {
var request = req;
var response = res;
req.check(‘name’, ‘NAMEは必ず入力して下さい。’).notEmpty();
req.check(‘password’, ‘PASSWORDは必ず入力して下さい。’).notEmpty();
req.getValidationResult().then((result) => {
if (!result.isEmpty()) {
var content = ‘‘;
【React + Material-UI】数字当てゲームを作ろう！【2020年4月版】
# はじめに
この記事は**「Reactのチュートリアルを終えて、何かを作ってみたい」**という読者を想定しています。
分からない部分が出た場合はReactの[公式ドキュメント](https://ja.reactjs.org/)に立ち返りましょう。material-uiの[公式ドキュメント](https://material-ui.com/getting-started/usage/)も要チェック
### 前にReact+Material-UIで作ったもの
– [電卓アプリ](https://qiita.com/shinhiro/items/91b48dfdb47eece38604)
# 今回作ったもの
[React Number Guess](https://shintaro-hirose.github.io/react-number-guess/)
ランダムに生成された1~100の数字を推測するゲームです。「60より上ですか?」などの質問をしていき、数字が絞れたら「〇〇ですか？」で正解を出します。右側に予想履歴が表示されます。
sakuraエディタマクロ（json整形、マークダウン形式変換、改行統一、デコード）
#サクラのマクロ
##サクラエディタのマクロについて
サクラエディタでは、下記のファイルをマクロとして実行することができる。
https://sakura-editor.github.io/help/HLP000204.html| 拡張子 | 種類 |
|——————–|——–|
| mac | キーマクロ |
| ppa | PPAマクロ |
| js | WSH:Jscriptマクロ |
| vbs | WSH:VBScriptマクロ |
| その他 | WSH:他にWSHが認識できるものであれば使える |##設定方法・利用方法
https://qiita.com/t_ookubo/items/6ad844ab04fc0170b4eb##利用しているマクロ
（あくまで支援目的なので、細かい精査とかエラーハンドリングとかはしてないです。）### jsonファイル整形
の続きやで！## 休日ワイ
ワイ「最近、コロナウィルスの影響でリモートワークがメインになってしもうたから」
ワイ「家でも快適にお仕事ができるように、**42.5インチ**の特大モニタを買ったで！」
ワイ「やっぱデッカいモニタはええな〜」
ワイ「インデントも**思いっ切り**入れれるわ」
よめ太郎「さすがに入れすぎやろ・・・」
ワイ「**私のインデントは53です**いうてな」
よめ太郎「いやフリーザ様どこで勝負してんねん」
よめ太郎「しかもインデント*
jQueryで特定セルをクリックした時にそのセルの内容で検索する
djangoでjQueryをいじっていたら結構難しかったのでメモ。
よく調べたらcellのdataを受け、searchに突っ込むだけですね。Reference様様。# スクリプト
“` sample.html