- 1. 【JQuery】レスポンシブ対応のイベント
- 2. Jestで特定ディレクトリをignore
- 3. Javascriptで月から日数を求める
- 4. async,awaitについて
- 5. 【JavaScript】例外処理try～catch文の使い方
- 6. React+Expressで本番環境へデプロイ
- 7. 【JavaScript】タイマー機能setInterval,setTimeoutの使い方
- 8. コーディング問題で学んだテクニックまとめ【随時更新】
- 9. Javascriptを使って独自のダイアログボックスを作成する
- 10. 【JavaScript】includesメソッドとindexOfメソッドの違い
- 11. Vue.js クラスとスタイルのバインディング
- 12. Laravelでモーダル画面から関連した投稿の削除機能を行う
- 13. Vue.js 監視プロパティ
- 14. JSでのCookie設定にはpathの指定をお忘れなく
- 15. JavaScriptでiPhone風電卓を作ってみた
- 16. TypeScriptで学ぶデザインパターン〜Chain of Responsibility編〜
- 17. javascriptでアルファベットから数値へ変換する
- 18. LINEBotからRaspberryPiで写真を撮ってLINEにおくる！
- 19. JavaScriptの数値型
- 20. 【忘備録】Javascript : インスタンス生成、メソッド定義
【JQuery】レスポンシブ対応のイベント
#画面幅をみて touchstart と click を分ける。
“`JavaScript
$(function() {
var breakPoint = 768;
var event = $(window).innerWidth() > breakPoint ? ‘click’ : ‘touchstart’;
$(‘.target’).on(event, function() {
console.log(“アクティブ”);
});
});
“`#デバイスをみてイベントを分ける。
上のやつでいいやん。
と思っていたら、タッチパネル付きのPCが結構普及しているようですね。
それもまとめようと思ったのですが、すでに素晴らしい記事があったので、
紹介させて頂きます。https://qiita.com/motio/items/cf23e41b211cfa44f8b3
Jestで特定ディレクトリをignore
## 概要
Jestの対象範囲から特定のディレクトリを対象外としたい
## jest.config.js
以下の例は`hogedir`をignoreしたいとする
“`js
module.exports = {
testPathIgnorePatterns: [“/hogedir/”],
}
“`
Javascriptで月から日数を求める
月を入力にして、その時の日数を求めます（一旦うるう年は考えない）
2月を除くと、8月より前の月は奇数の月が、8月移行の月は偶数の月が31日になるので、
“`js
30 + ((month > 7) + month) % 2) – 2 * (month === 2)
“`として計算できる。
## うるう年を考慮する場合
うるう年は、400で割り切れるとき、または、4で割り切れかつ100で割り切れない時なので、
“`js
year % 400 === 0 || (year % 4 && year % 100 !== 0 )
“`となる。
この場合、
“`js
const leapYear = year % 400 === 0 || (year % 4 && year % 100 !== 0 )30 + ((month > 7) + month) % 2) – (month === 2 ? (leapYear ? 1 : 2 ): 0)
“`
となる。もっとシンプルに書きたい。
### 月ごとの日数↓
|月|日数|
|—|—|
|1|3
async,awaitについて
## async
・関数定義前にasyncをセットすることでasync関数を定義できる。・戻り値は常にPromiseオブジェクトが返る。
・returnした値はthenメソッド経由で受け渡しできる。
・async単体でも使えるが、後述するawaitと組み合わせることで、Promiseを使った非同期処理のコードを同期処理と同じような書き方で記述できる。
“`
async function test() {
//戻り値はPromisemオブジェクト。thenメソッド経由で受け渡しできる
return ‘@@@@@’;
};test()
.then((value) => { //ここの引数にreturnされた値(@@@@@)がはいる
console.log(value);
})
“`## await
・asyncとセットでしか使えない。・Promiseの一連の処理が完了するまで待機する。
・awaitをセットする場所は戻り値がPromiseオブジェクトになる関数を実行する直前。
・thenメソッド経由で受け渡ししていた
【JavaScript】例外処理try～catch文の使い方
#【JavaScript】例外処理try～catch文の使い方
try～catch文はエラー発生箇所に仕掛け、エラーを出す条件が整ったら別の処理を実行するための構文。
if～else文と似ている。let arr = [“1, 2, 3, 4, 5”];
console.log(aar.includes(1,0));//arrを呼び出すべきところをarrに指定
console.log(“end”);この場合、Uncaught ReferenceError: aar is not defined が表示され、
3行目のconsole.log(“end”);は実行されない。##try～catch文を使ったエラー回避例
1.try{}でエラーが出る範囲を囲む
2.catch (e)を間に入れる
”e”は引数、どの文字列でも良い
慣習的にcatch (e) とされることが多いlet arr = [“1, 2, 3, 4, 5”];
try{
console.log(aar.
React+Expressで本番環境へデプロイ
#はじめに
React＋ExpressでWEBサービスを作るにあたって、
本番環境へのデプロイ方法がわからなかったので調べてみました。###対象読者
Reactを導入してみたいけど、Expressでデプロイする場合どうすりゃいいんだ、と悩んでいる方。#方法
ずばり、
**ReactプロジェクトでビルドしたファイルをExpressプロジェクトのpublicにぶち込む、です。****手順**
①Reactプロジェクトで本番用ファイル群を生成
②生成された/build以下のファイルをExpressプロジェクトの/public以下にデプロイ
③Expressのルーター操作をrenderによる描画からsendfileに変更（index.htmlをクライアントに返すだけにする）詳細は以下で説明します。
##①Reactプロジェクトで本番用ファイル群を生成
まずはプロジェクト作成
“`
create-react-app client
“`作成したプロジェクトに移動してビルド
“`
cd client
npm run build
“`ビルドするとbui
【JavaScript】タイマー機能setInterval,setTimeoutの使い方
#【JavaScript】タイマー機能setInterval,setTimeoutの使い方
setIntervalは間隔を設定、setTimeoutは指定時間後に終了する
両者とも書き方次第で、Nミリ秒後まで実行とタイマー操作ができる。##setInterval
・setInterval(実行する関数名, 実行間隔ミリ秒)：タイマーの間隔(interval)をセット(set)する
・clearInterval(setIntervalを渡した定数、変数)：setIntervalの処理を停止する{
let i = 0;//カウンタ用の変数ifunction showTime(){//現在時刻を取得・表示するshowTime関数
console.log(new Date());//現在時刻を表示
i++;
if(i>2){//2＝2000ミリ秒後に停止
clearInterval(intervalId);
}
コーディング問題で学んだテクニックまとめ【随時更新】
# What
[会津オンライン](https://onlinejudge.u-aizu.ac.jp/courses/)や[AtCoder](https://atcoder.jp/)、[Learning JavaScript Data Structures and Algorithms](https://www.springer.com/jp/book/9781484239872?gclid=CjwKCAjw4871BRAjEiwAbxXi2xrIUQAsxblUPbxwHuDtDCTTERqcJA_Td1tvWiXATeZsWOUhrv3joRoCD9wQAvD_BwE) (本)、[The Coding Interview Bootcamp: Algorithms + Data Structures](https://www.udemy.com/course/coding-interview-bootcamp-algorithms-and-data-structure/) (Udemy)…等で学んだことのまとめです。ネタバレは含みません。[はてなブログ](https://dia
Javascriptを使って独自のダイアログボックスを作成する
【開発環境】
macOS Catalina
バージョン 10.15.3
visual studio code#Javascriptを使ってダイアログボックスを作成する
[](https://gyazo.com/989777ab5c0e478af1a9f95c52772734)ダイアログボックスは一般的にalert()やprompt()などで作ります。しかし、これらで作るとカスタマイズができません。
今回は自作で、自由にカスタマイズできるダイアログボックスを作っていきます。
##骨組みとなるhtmlとcssを作っていきます
まず、html.cssを作っていきます。“`index.html
Vue.js クラスとスタイルのバインディング
#Vue.js クラスとスタイルのバインディング
前回の記事はこちら
[Vue.js 監視プロパティ](https://qiita.com/fumiya0414/items/ba37ddcfc632ed546e12)##クラスのデータバインディングの基本
まずはVue.jsを使ってCSSのクラスを動的に設定しましょう。
[jsfiddle](https://jsfiddle.net/)で実際に記述しながら読むことをおすすめします。“`html:index/html
Hello Vue.js!
“`“`javascript:index.js
var app = new Vue({
el:’#app’,
data:{
isLarge:tr
Laravelでモーダル画面から関連した投稿の削除機能を行う
LaravelでCRUD掲示板を作成していた際、モーダルウィンドウから投稿を削除するかユーザーに選択してもらい削除機能を実装しようとしたがかなりハマったのでメモ。
## 原因
HTML側から記事の投稿IDを引数に選択してなかったこと。
JS側で処理が呼び出された際にどの投稿IDかわからずずっと一意の投稿IDのみが選択されていた。## 行ったこと
モーダルを投稿の数だけ配列で回して用意した
JSを呼び出す際に引数を指定してJSと紐付けた##コード
“`php:main.jslet modalMenu = false;
//HTMLからの引数から投稿IDを取得
let editModal = function(id) {//.editModal-投稿IDと一致するものを定数に格納
let checkForm = document.querySelector(‘.editModal-‘ + id);
scrollTo(0,0);
if(modalMenu === false) {
checkForm.style.display = “flex”;
mo
Vue.js 監視プロパティ
#Vue.js 監視プロパティ
前回の記事はこちら
[Vue.js 算出プロパティ](https://qiita.com/fumiya0414/items/964d47d2bb9bb095060f)##監視プロパティとは
データやプロパティを監視して変化があった時に登録した処理を実行します##監視プロパティの基本
[jsfiddle](https://jsfiddle.net/)で実際に記述しながら読むことをおすすめします。messageプロパティのデータが変更されたら
コンソールに新旧の値を表示しましょう以下のコードを記述します。
“`html:index/html
{{ message }}
{{ $data }}
```# 症状
`pay.example.com` にアクセスした際に、
Fir
JavaScriptでiPhone風電卓を作ってみた
JavaScriptを学習したのでアウトプットとしてiPhone風の簡易電卓を作成してみました。
メンターに指導してもらいながら、制作期間は約1週間ほどかかりました。
改良の余地はあると思いますが、公開します。#機能
* iPhone8の電卓を模倣
* 計算結果が10桁以上の場合、エラー表示
* ACで数字全てクリア、Cで入力中の数字クリア入力桁数はいまのところ制限がかかっていません。
今後、余力があれば修正予定です。#リンク
* ソースコード：
[GitHub](https://github.com/30arare/iPhoneCalc.git)
* ここでお試しできます：
[iPhone風簡易電卓](https://30arare.github.io/iPhoneCalc/)
TypeScriptで学ぶデザインパターン〜Chain of Responsibility編〜
# 対象読者
- デザインパターンを学習あるいは復習したい方
- TypeScriptが既に読めるあるいは気合いで読める方
- いずれかのオブジェクト指向言語を知っている方は気合いで読めると思います
- UMLが既に読めるあるいは気合いで読める方# 環境
- OS: macOS Mojave
- Node.js: v12.7.0
- npm: 6.14.3
- TypeScript: Version 3.8.3# 本シリーズ記事一覧(随時更新)
- [TypeScriptで学ぶデザインパターン〜Iterator編〜](https://qiita.com/junkimatsuda/items/c5b016b9762f29ef6f50)
- [TypeScriptで学ぶデザインパターン〜Adapter編〜](https://qiita.com/junkimatsuda/items/e8523185d14e53279fb8)
- [TypeScriptで学ぶデザインパターン〜Template Method編〜](https://qiita.com/junkimatsud
javascriptでアルファベットから数値へ変換する
列のアルファベットを数値へ変換したいタイミングがあったので。
```js:アルファベットから数値へ
// アルファベットを数値へ変換(順番に)
function convertToInt(a) {
const alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
return alphabet.indexOf(a) + 1 ;
}
```
LINEBotからRaspberryPiで写真を撮ってLINEにおくる！
### はじめに
LINEBotでRaspberryPiで写真を撮って送るという、カメラ装置です。
ハッカソンで作成した[ねこしぇるじゅ\-自慢の猫をとにかく拡散！\- \| ProtoPedia](https://protopedia.net/prototype/a07c2f3b3b907aaf8436a26c6d77f0a2)の一部をupdateしたものです。### 概要
LINEBotからRaspberryPiを動かして写真を撮り、[Gyazo](https://gyazo.com/api?lang=ja)に送って写真をLINEに送るものです。
LINEBotでRaspberryPiを動かしています。
RaspberryPi node.js ngrok Gyazo API という感じです。### できたもの
ねこIoTLTでも発表した、にゃんこのぞき見LINEBot！JavaScriptの数値型
2進数の世界で動いている汎用計算機が処理する数値は、整数か浮動小数点数の2つに分けられます。C言語の型ではintやdoubleです。それぞれの型はメモリ上でのビット長が決まっており、32bitや64bitです。
言語によっては数値の精度を必要ならいくらでも伸ばしたりできるような任意精度演算
という演算システム（実際上は利用可能なメモリ容量に制限される）による演算が可能な言語もあります。ここではJavaScriptで数値がどのように扱われているのかを記述します。
# JavaScriptの数値は1種類
JavaScriptにの数値型は1種類しかありません。
JavaScriptでは整数・浮動小数点数の区別がなくすべての数値が __64ビットの浮動小数(double型)__ のみです。以下のようなプログラムでは一見整数を扱ってるように見えますが、これはすべて小数としてデータを扱ってることになります。
```JavaScript
const x = 1
const y = 2console.log(x + y) //3
```double型でも52ビットをはみ出
【忘備録】Javascript : インスタンス生成、メソッド定義
## はじめに
今回はJavascriptでインスタンス(オブジェクト)生成からprototypeを使ってメソッド定義を学んで行きます。## 前提
Javascriptにはインスタンスという概念は存在するものの、クラスという概念はありません。代わりにプロトタイプを使ってオブジェクト生成を行なっていきます。プロトタイプとはあくまでクラスではなく、「オブジェクトの基となるオブジェクト」です。Javascriptはこのプロトタイプを使ってオブジェクトを生成することから「プロトタイプベースのオブジェクト指向」と言われるそうです。### 1, コンストラクターで初期化する
下記のコードでは、関数リテラルの内部にプロパティを二つ、メソッドを一つ定義しています。一見、関数リテラルを変数に代入しているだけと思われますが、これでJavascriptでのクラス定義が完了です。```js:javascript.js
let member = function(lastName,firstName){
this.firstName = firstName; // プロパティの定義
this
