PWAを試してみよう

（最近あまり聞かなくなりましたが）扱ったことがなかったので、PWA(Progressive Web Apps) を試してみようと思います。

WebページをPWAとして設定することで以下のことができます。

* Webアプリなのに、ネイティブアプリのように、Android/Windowsにアプリとして登録することができる。
* アドレスバーのようなブラウザっぽさはなく、全画面でネイティブアプリのように起動することができる。

PWAのService Workerの機能を使った実装をすることで、以下のことができます。

* Webコンテンツをキャッシュ化することができ、オフラインで動かすことができる。
* サーバ側からPush通知ができる。

ということで、今回の投稿では、PWAの設定方法と、Push通知の実装をしてみます。

ただ作るだけではモチベーションが上がらないので、パスワード管理アプリ「パスワードマネージャ」を作成します。
世の中にいろいろなツールがありますが、やっぱり自分で管理したいので。。。

毎度ながら、ソースコード一式をGitHubに上げておきました。

porurub

JavaScriptを学びなおしたくてポートフォリオサイトを作成した話　[Vue.js]

私の中で JavaScript の知識はかなり前から時間が止まったままでした。
最近、JavaScript の歴史を見ていく中で、JavaScript という言語をまた勉強し直したいという気持ちが強くなりました。そこで今回は、モダンなフロントエンド開発を学ぶという意味で Vue.js を使ってポートフォリオサイトを作成しました。
この記事ではサイトを制作する中で感じたこと・意識したことをまとめていきます。

# ポートフォリオサイトを作成した経緯

私は、今まで約 3 年ほどプログラミングを勉強してきましたが、**身につけたスキルを使って成果物を作るアウトプット型の学習より、ドットインストールや Progate を使った受動的なインプット学習が中心でした**。そこでアウトプット型の学習を始めたいと思い、Vue.js を学習してポートフォリオサイトを作成しました。フレームワークとして Vue.js を選定した理由は様々あるのですが、大きく **SPA 形式のサイトを構築してみたい**。**以前に Vue.js を少し触ったことがあったため**というのがあります。最近、Web 系の情報や、

Javascriptの分割代入について

Reactを触っていて下のように突然{}の引数が出てきて「なんだこれ？？」となりました。

“`JavaScript
onSortEnd = ({oldIndex, newIndex}) => {
this.setState(({items}) => ({
items: arrayMove(items, oldIndex, newIndex),
}));
};
render() {
return ;
}
“`

##結論
これは**分割代入**と呼ばれるものらしくて、以下と同じみたいです。要は、オブジェクトが渡されていて{}とすることで勝手に代入してくれているみたいです。

“`javascript

function onSortEnd(param){
let oldIndex = param.oldIndex
let newIndex = param.newIndex
}
“`

[JavaScript] 等価性比較について

# 等価性とは？
値を比較して、同じと見なすことができるか？ということ。

等価性を比較するために、比較演算子を使用します。

等価性には __厳格な等価性__と __抽象的な等価性__ の２種類あります。
違いは以下の通りです。

| 等価性 | 比較演算子で記述した場合 |　型の比較　|
|:———–|:————|:————|
| 厳格な等価性 | a === b | あり　|
| 抽象的な等価性 | a == b | なし　|

厳格な等価性と抽象的な等価性の違いについては、データ型の比較を行うか否かというところです。

###例１

“`javascript
let a = ‘1’;
let b = 1;

console.log(a === b)
“`

上記の場合、`let a = ‘1’`として、文字列型の「１」で変数aを定義しています。一方、`let b = 1`として、数値型の「１」で変数bを定義してます。

そして最後にconsole.log(a === b)で厳格な等価性で２つの値を比較しております。

この場

【ReactNative・TypeScript】import に絶対パスを使用する設定

# はじめに

ReactNative（0.63~） + TypeScript（4.0~）を使用するプロジェクトで
importに絶対パスを使用する方法をまとめます。

絶対パスによるインポートを許可することで、ネストの深いモジュールをインポートする場合も簡潔にパスを記述できます。

“`typescript:相対パスの例
import * from ‘../../../component/foo’;
“`

“`typescript:絶対パスの例
import * from ‘src/component/foo’;
“`

# 方法

以下２つのファイルに設定を加えます。

– tsconfig.json
– metro.config.js

ReactNativeだと`tsconfig`だけではうまく動かない。

“`json:tsconfig.json
“baseUrl”: “./”
“`

“`javascript:metro.config.js
const path = require(“path”)

module.exports = {
r

ハノイの塔つくってみた

いつものノリで、思い立ったらとりあえず作ってみていた。

再帰を組むのはめんどくさかったので移動させるステップはべた書きでございます。

See the Pen
Hanoi by kob58im (cypressでCSVダウンロードをテストする

## まとめ

cypressの[公式リポジトリー](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__download)に例があるからそちらを参照するとできる。
日本語の記事が検索に引っかからなかったから、記事を書いてみました。
エイリアス的な感じですね。

## 要点

– cypressにはブラウザのダウンロード機能をハックする仕組みがあり、ダウンロードディレクトリをDownloadsから変えることができる。つまりローカルに持ってこれる。
– ローカルに持ってきたCSVファイルをneatCSVでパースしてオブジェクト化する。
– テストする。

※cypressはブラウザのダウンロードAPIをハックする以外にも[いろんな事](https://docs.cypress.io/api/plugins/browser-launch-api.html)ができる

## 実際に書いてみてあると便利なコマンド

以下の３つのコマンドを用意しているとテストしやすいかな

Reduxの基本的な使い方　例付き

Reduxの基本的な書き方

1 actionの作成

actionは、取り扱いたいデータの概要を書いているイメージ。

 
//reducks/dots/action.jsx
export const ADD_DOT = "ADD_DOT";
export const add_dot = (dot) => {
return {
		type: ADD_DOT,
		payload: dot,
	};
};

※export const ADD_DOT の意味…　type名である”ADD_DOTS”を変数化することで、type名をtypoしたときに、その旨がエラー文にでるようになる。

2 reducerの作成

actionで作ったデータをどう変更したいかを定義しているイメージ

//reducks/dots/reducer.jsx

import * as Actions from "./action";

import initialState from "

社内業務のシステムをWebで作ろう！

##投稿の動機
@PN_Systemsさんの **製造業において、Pythonに加えてWebも活用して飛躍しよう** の記事を見て正にキャッチ‐な話題でしたので、社内での活動状況を投稿しようと思いました。現在私は定年後の再就職先として広島市内の名盤製造業に嘱託として勤めています。仕事内容は社内業務システム「業務支援・改」の構築・保守です。
##何故Webなのか
今のシステムは経理・給与・販売管理（移行開発中）を除く、製造業務のほぼ全般をWebシステムで運用しています。巷では業務システムはクライアント・サーバータイプ（VB, VC, Java 等）で作られているみたいですが、かなり早い段階からWebで開発している身としては、楽なのに何故Webで開発しないのかが不思議でした。実際WebでVBよりも高速な伝票入力画面を作ることができます。現役時代に納品したシステムはOSのバージョンアップを行っても問題無く使えていますし、カーソル移動も[Enter]キーで[tabIndex]順に移動できます。端末へのインストールも不要で遠地の端末が壊れても簡単に機器の入れ替えができます。ハードを更改してもシス

【JavaScript】Proxyオブジェクトについてまとめ

# Proxyオブジェクトとは

指定したオブジェクトのプロパティを操作する際に**独自の処理を追加**する為のオブジェクト。

```JavaScript:main.js

const target = {
hoge: 'hoge',
fuga: 'fuga'
}

const handler = {
メソッド
}

new Proxy(target, handler);

// target = 指定するオブジェクトが入る
// handler = 指定したオブジェクト(target)を操作する際に
// 実行されるメソッドが格納されたオブジェクト

```

# 使用例１

プロパティの値に変更があった際に「変更がありました。」と出力する。

```JavaScript:main.js

const target = {
hoge: 'hoge',
fuga: 'fuga'
}
const handler = {
set(target, prop, value) {
target[prop] = value;
cons

ビンゴゲームの制作

### ビンゴゲームの制作
STARTボタンをクリックするとビンゴ用のカードを作り、その後に抽選ボタンをクリックするごとに抽選して、該当番号を埋めてくれるプログラムを制作します。

```html

START
抽選



```

まず、body要素内にtable要素とbutton要素を2つ、span要素を2つ作ります。
table要素にはビンゴ用のカードの表示、button要素はクリックするとカードを作成してくれるボタンと、クリックすると抽選してくれるボタンです。span要素は抽選の結果の表示と、ビンゴしたときの表示をします。

```javascript
let numbers = [];
let first;

[JavaScript] 配列とオブジェクトについて

4回目の投稿です。
記事を投稿する度に少しずつ要領を掴めてきた気がします。
ノートにさっとまとめながら勉強しています。

#配列
##基本的な書き方
配列は他の言語と書き方はほぼ同じ。

```javascript
const 定数名 = [要素1,要素2,要素3];
console.log(定数名);
console.log(定数名[インデックス番号]);
定数名[インデックス番号] = "文字列"; //数値の場合は""で囲まない。
console.log(定数名[インデックス番号]);
```
このように書く。
一行目は、定数を宣言し、定数に配列を代入
二行目は、(定数を記述することで)配列を出力
三行目は、配列の中でも指定のインデックス番号の要素(文字列や数値)を更新
四行目は、二行目と同様に(定数を記述することで)配列を出力

具体的には以下のように書く。

```javascript:sample1
const names = ["itiro","jiro","saburo"];
console.log(names);
console.log(names[0]);
name

中学生でもわかる！非同期処理とは？(JS)

##あいさつ
初めての人は初めまして！知っている人はこんにちは
どうもAtieです
サボりにサボったqiitaの記事投稿ついに再開です！

今回はJSを極めるうえで避けては通れない「非同期処理」についてです

ちなみになんで題名が「中学生でもわかる！」が入っているのかというと
###僕が理解できたから
そうなんです中学生の僕でも理解ができました！
皆さんにわかりやすく書いていきたいと思います

##そもそも同期処理って？
そもそも同期処理とはなんでしょうか？
同期処理とは一つの処理が終わるまで待つプログラムです
とはいってもまだ「？」の人が多いいと思うので具体的に説明します

あるプログラムに「処理A」と「処理B」という二つの処理があったとします
処理Aを実行中に処理Bのをしたいと思いました
なので処理Aの中に処理Bを挟みます
するとどうなるでしょうか？
流れでは「処理Aを一度中断　＞　処理Bを実行　＞　処理Aの続き」というような流れになります
これが同期処理です「上から順に」これが同期処理の流れです
プログラムの例です

```main.js
//処理B
const synchron

回転盤を回すと動画をコマ送り／逆コマ送りする機能を実装する

### デモ

動画はフリー素材として公開されているものを使用しています。

### 何がしたいか

* 回転盤を時計回りに回転させた時、動画を1フレームずつコマ送りする
* 回転盤を反時計回りに回転させた時、動画を1フレームずつ逆コマ送りする

### 実装

(仕事で必要だったので超急ぎで作りました。時間空いたら多分解説書きます)

### 参考サイト

素敵な回転盤はこちらの作者さんのものを使用しました

【JavaScriptの超基本】コールバック関数について簡単に解説

#概要

この記事では、JavaScriptで少し理解が難しいコールバック関数について、超基本的な知識をメモ的にまとめています。
自分用の備忘録なのであしからず。

#目次
- [コールバック関数とは](#コールバック関数とは)
- [JavaScriptは関数も値](#JavaScriptは関数も値)
- [関数の呼び出し方と渡した方](#関数の呼び出し方と渡した方)
- [引数で関数を定義する](#引数で関数を定義する)
- [関数の引数](#関数の引数)
- [まとめ](#まとめ)

#コールバック関数とは

コールバック関数とは、どのような関数のことを言うのでしょうか。以下MDN web docsからの引用です。

>コールバック関数は他の関数に引数として渡される関数で、外側の関数で何らかの処理やアクションを実行します。
引用 : [Callback function (コールバック関数)](https://developer.mozilla.org/ja/docs/Glossary/Callback_function)

引数として

Electron は v.11 が安定版になった（2020/11/17）

Electronが、ついに v.11 を安定版としました。主な変更点は以下のページにあります（しかもすでにその15時間後に、v11.0.1に更新済み）。

すでに、Electronは先行して、v.11, v12 のβ版を走らせていたので、大きな変更やサプライズはありませんが、詳しく何が変更になったのかは各βバージョンをあたるしかなく、散逸的だったので、今回まとまったことで一覧を見ることができるようになりました。

## Apple Silicon ビルドに対応

Electron は、いま話題の Apple Siliconに対応を表明していたので（Appleの発表スライドのリストにひっそり載っていた）、今回から実験的にビルドが追加されたようです。おそらく新しい M1チップの載ったマシンでも動作可能だと思います（※私は今回、買えませんので動作未確認）。

## context bridge の強化

また、今回のバージョンから、さらに `context

jQuery 備忘録

・js側で値の受け渡し方法

```html:index.html

　 //値を入れたいhidden

//値を受け取るinput
```

```javascript:index.js
var inputVal = $("#̲modal-input-1").val(); //一度変数に受ける
$("#modal-value-1").val(inputVal);
```
***

data属性を使って値を設定すれば、あらゆることに利用できる。

```html:form.html


LINEにキーワードを入れるとcompassからおすすめのイベントが返ってくるbotを作りました！

#やりたかった事
LINE botとwebAPIを接続練習。
compassのwebAPIが扱いやすかったのと、compassのイベントに普段から参加しているので自分のLINE botとcompassのwebAPIを接続してみる事にしました。

#環境
* LINE Messaging API
* Heroku
* node.js

#compassのwebAPIから情報を取り出す
Pythonというキーワードに関する情報を取り出します。
ブラウザに
https://connpass.com/api/v1/event/?keyword=python
と入力するとjsonが見れます。
出力されたjsonから欲しい情報だけを出力するようにしました。
今回は簡単にtitleだけを5件取得。

```
const axios = require("axios");

async function main() {
let response = await axios.get("https://connpass.com/api/v1/event/?keyword=python");