JavaScript Loop処理

JavaScriptでループ処理
—

こんにちは。ayabouzuです。phpのループ処理は、そんなに抵抗なく出来るんですけど、
JavaScriptだと、よく分からないなあと感じることが多かったので、記事にして、復習しようと思っています。また、初学者の方の参考になれば、嬉しいです。

reduce
—

reduce関数ですが、結構、使える関数なので、良かったら、覚えてしまいましょう。

“`JavaScript
var numbers = [1,2,3,4,5,6,7,8,9];

var result = numbers.reduce(function(a, b) {

return a + b;

})
“`

上をconsole.log(result)すると、

“`javascript

45
“`

と答えが返ってきます！！

中で起こっている事は以下になります。

“`JavaScript
1+2=3 (a+b)(この３が次のaとなる)
3+3=6 (a+b)
6+4=10 (a+b)
10+5=15
15+6=21
21+7=28
28+8=3

if文はJSXの中で書け

# はじめに

今日、インターン先オフィスでReactを勉強しているデザイナーさん2人と話していたところ、JSX内の条件文についてまとめ記事があったらいいよねという話になったので淡々とまとめていきたいと思います。簡潔にまとめたいので、前置きはこの辺にして早速始めます。

# そもそもJSXってなに？

JSXとは、**まるでHTMLを書いているかのようにReactを書く**ために作られたものです。なので

“`jsx
return (

僕のホームページ

)
“`

詳しいことは割愛しますが、この**`return()`内のタグは実際にはHTMLのタグではないです。**

`return()`内に来るのはHTMLのコードではなくJSXなので、たとえば

“`jsx

const hoge = ‘fuga’

return (

{hoge}

)
“

合計行を含んだHTMLテーブルをソートする

# はじめに

・以前、JavaScriptで、DBにためている自分のQiitaのデータ（QiitaAPIにて取得）を「2軸グラフ」と「テーブル」に表示してみる、というを実施しました。（Qiita：[Chart.jsを使用して複数軸のグラフを表示する(Javascript)](https://qiita.com/yoshi_yast/items/f4557cb48a13f198d42a)）

・記事やデータもたまってきましたので、そこで作成していたテーブルをソートできるような機能をつけたいと思いました。

# 作成サイト
[作成サイトはこちら](https://anotherskyjp.site/other/otherpg/js_qiita_data_get_graph.html)


「Views」でソートした画面

![02.png](https:

Timepicker系ライブリ

[Timepicker系ライブラリ「Wickedpicker」を使ってみた](https://www.kabanoki.net/2880/)

【Node.js】npmの導入とpackage.jsonを基礎からまとめてみた

#　npmとは？

– **Node Package Manager**の略
– `Node.js`のパッケージマネージャー

#　Node.jsとは？

サーバー側で動く`JavaScript`のこと。

#　パッケージマネージャーとは？

– `Node.js`の便利な機能を集めたもの。ライブラリ。
– 自分が一からコードを書かなくてもよくなる。

#　package.json

– json形式のファイル
– このファイルで`Node.js`を使ったプロジェクトを管理する。
– 親ディレクトリに含まれるファイルが一つのパッケージとなる。

#　npmを使ってみる。

それぞれのバージョンを確認する。

“`
$ node -v
v12.18.4
“`

“`
$ npm -v
6.14.6
“`

パッケージを作成したいディレクトリ内で`npm init`を実行。色々聞かれるので、それぞれ答えていく。（わからなければ、適当に答えてあとで`package.json`を編集すればOK）

完了すれば、`package.json`が自動生成されているはず。

##　pac

[Electron]ccontextBridgeでipcRenderer.invokeを使う

# Electronとは
html/css/javascriptのみで簡単にマルチプラットフォーム対応のアプリを開発できるフレームワークです。デスクトップPC向けのハイブリッドアプリみたいな立ち位置をしています。VScodeやSlackとかで使われています。
[参考] https://slack.engineering/building-hybrid-applications-with-electron/

業務改善をするためのアプリ開発で丸一日躓いてしまったため、その戒めと備忘録のために記事にしておきます。
# ipcRenderer.invokeとは
Node.jsとChromiumを使用しており、html/css/javascriptのweb画面 + Node.jsで動作します。
画面(レンダラープロセス)の入力値を使って、メインプロセス(Node.js)で処理したい時、プロセス間通信が必要になります。そこでipcRenderer.invokeの出番です。
ipcRenderer.send(送信) → ipcMain.on → ipcRenderer.on(結果の受信)と書かなけ

ピコピコゲーム制作で学ぶエモいUI/UX

# ピコピコゲームのゲームデザインとエモいUI/UX

最近ではいかに長く飽きさせずにお金を落とさせるイベント設計やガチャの話題ばかりである様に思えるけれども、マリオブラザーズやドンキーコングに代表される初期ファミコンのピコピコゲームは、もっと人間の感覚に訴える部分でいかに人を楽しませるか、言い換えると、ユーザーの **インプット** に対して、 **エモいリアクション** が画面の表現より得られ、ユーザーが気持ちよくなれるような工夫がされていたと思う。

これを深堀りすると、よいUI/UXを設計するヒントが得られるのではないだろうか？

# エモいリアクションとアフォーダンス

APEXやフォートナイトなど最近のハイエンドなゲームは様々な要素が高度に組み合わさって世界観を醸すUIになっているため「お、この作りすげーな」と気づくには相当な修行が必要であるが、ピコピコゲームは限られたリソースの組み合わせてユーザーの感情に訴えかけるので、少し観察をすると多くの気づきが得られると思う。

例えば『土管からカメが出てきて配管工っぽい男性に向かって歩いてくる』超有名なゲーム。

このゲームの謎の

SNSボタンのアドブロック対策

アドブロックは必要な方には必要不可欠です。
広告を見たくない、ギガを少しでも減らしたい、というニーズがあります。

現にあたしも利用しています。

#しかし
アドブロックが昨今強化され、SNSボタンに対してもブロックするようになりました。

#対策はとても簡単

Twitter なら、Twitterという文字列をなくし、t という省略文字にする

Facebook なら Facebook という文字列をなくし、f という省略文字にする

画像でSNSシェアリンクを使用したい場合、その画像ファイル名に twitter facebook という文字列を入れない

その他、アイコンジェネレータでもある程度対策が可能です。

#ちょっとした問題
これらはHTMLやCSS、場合によってはJavaScriptにまで影響します。

どの要素に置換したか、しっかりと把握する必要があります。

Tsハロトレ31日目

#Hue（色相）
一番大事なのは、補色の関係
使っていく上で必要になるのは、明度（時間軸）


###ランチェスターの法則
[詳しくはこちら](https://kyotot.github.io/blog/september/0930/index.html)

###コーポレートカラー
コーポレートカラーは、覚えてもらうことが重要なので、あまり変えない方がよいです。

###情報の優先順位
一押し　ブドウ
二番目　イチゴ
三番目　バナナ
その他　リンゴやメロン

情報の優先順位が高いものから表示し、大きく表示しておく必要があります。
この場合、ブドウが一番目に表示し、大きく表示させます。

###奥行
[参考サイト](https://raon-terastorys.com/illust-kouzu/#2_%E5%9E%82%E7%9B%B4%E6

React超概要

社内でReactの勉強会をした時に作成した、**Reactの基本となる用語や考え方**をついて紹介します。Reactに興味がある方に、少しでも多くの人にReactについて慣れ親しんでもらえると嬉しいです。

## 前提事項
* React 16.8から導入された[hooks](https://ja.reactjs.org/docs/hooks-intro.html)を利用した記法に則って記載しております
* JavaScript(ES6)の構文をベースに記載をしております（なるべく解説を入れておりますが、時間の都合もあるためご不明点あれば、調べるもしくは質問してください）

### アロー関数
ES6から使えるようになった記法です。下記のように関数を宣言することができます

“`javascript
// 通常の記法
fuction hogehoge() {
}

// アロー関数を使った関数宣言
const hogehoge = () => {
}
“`

* [アロー関数 – JavaScript | MDN](https://developer.mozilla.org/ja/

言語ごとのwebフレームワークまとめ及び比較

#はじめに
最近webフレームワークの勉強を始めたのですが、種類と量の多さに驚いたのでザッとまとめてみました。
詳しさよりもざっくり把握できることを重視しました！

#対象フレームワークの列挙
記事が長くなりそうなので調べたフレームワークたちを言語ごとに列挙しておきます。

– **Python**…Django,Flask,Bottle,Tornado,web2Py
– **JavaScript**…Angular,React,Vue
– **Ruby**…Ruby on Rails,Sinatra,Padrino,cuba microframework,Remaze,HANAMI
– **PHP**…Laravel,Symfony,CodeIgniter,ZendFramework,Phalcon,Slim,Yii,FuelPHP,Flight

#Python

– Django

高速な動作、フルスタックフレームワーク、セキュリティ的に安全な設計、メンテナンスの容易さ、自由に選べるプラットフォーム、学習コストの低さ
採用企業例…Pinterest,NASA,

GASでGoogle AnalyticsのDAUを取得する

Webサイトの分析をする中、週次でその時点のDAU（Daily Active User）の平均値を記録しておく必要がありました。
今回はDataportalを使用して可視化を行っていたので、スプレッドシートにデータを書き込む必要があります。

①スプレッドシートを作成してスクリプトエディタを開く

②GASでGAのAPIを利用するために「Analytics Reporting API」を有効にします
※画面崩れはご愛嬌
これにより、`AnalyticsReporting`というクラス名でapiを呼び出すこと

NodeJS開発者が知っておくべき12の便利なパッケージ

NodeJSにはコードの再利用に最適です。そしてコードの再利用の環境はNPMパッケージです。

NPMパッケージは、時間と労力を大幅に節約します。日付ライブラリが必要ですか？そのためのパッケージがあります。ユーティリティライブラリが必要ですか？問題ありません。パッケージをインストールするだけです。コードの問題を解決する必要があるときはいつでも、ニーズに合わせたパッケージがある可能性があります。

これは、すべてのNodeJS開発者が知っておくべきNPMパッケージのリストです。これらのNPMパッケージを時間の節約と魔法の妖精のヘルパーとして扱ってください。

**生産性を向上させるNodeJSパッケージ**

## [husky](https://github.com/typicode/husky) – 20k Stars
Huskyは、Git Hooksの実装を簡単にします（Git Hooksとはスクリプトです。GitがCommitやPushなどの重要なコメントを実行する時に自動的に実行されます）。チームと協力して、チーム全体にコーディング標準を適用したいですか？問題ない！Huskyを

Node.js の vm モジュールでサンドボックスを作る場合の注意点

こちら↓

[JavaScript: プラグインシステムとプロトタイプ汚染攻撃 – Qiita](https://qiita.com/suin/items/9c80f299057a338f77be)

のコメント欄で、「Node.js でサンドボックスを作るなら `vm` モジュールおすすめだぜ！」
と言うような主旨のコメントをしたのですが、
色々と注意が要る機能でもあるので、補足がてらにちょっとまとめてみます。

## `vm` モジュールを利用したサンドボックス化

Node.js の [vm モジュール](https://nodejs.org/api/vm.html) を使うと、
新規コンテキスト下で任意のスクリプトを実行することができます。

~~~js
const vm = require(‘vm’);

// 新規コンテキストを作成
const context = vm.createContext({
// コンテキスト内のグローバル変数・関数
x: 10
});

// 作成したコンテキスト下で実行
const result = vm.runInContext(“

【Rails6】Ajax + chart.jsでインタラクティブなグラフ描写

今回はRuby on Railsで簡単なチャート機能をajaxとchat.jsを使って実装します。例題としてプルダウンで選択した人物の成長記録を描写してみます。（横軸：記録日、縦軸：身長）
尚、Railsのバージョンは6.0.3.3を利用しています。

#ご留意ください
Rails学習中の初学者が備忘録を兼ねて書いています。
内容に誤りを含む可能性・さらに良い手法がある可能性が多分にありますので、参考にする際はその点ご留意ください。
何かお気付きの点がございましたら、お気軽にコメントいただけると幸いです。

#テーブル定義
|カラム名|カラム説明|データ型|
|:—|:—|:—|
|id|ID|integer|
|name|名前|string|
|height|身長|float|
|rec_date|身長記録日|date|
|create

Cypressでテストを使いまわしたい、同じspecの中でもう一回テストをしたい時のやり方

## Cypressでテストをもう一回やりたいことってありません？

例えば、以下のようなケースです。

1. 画像を登録するテスト
2. 画像を削除するテスト
3. 画像を登録するテスト (1をもう一回やりたい・・・)
4. 登録した画像を色々するテスト

4を1の後にやればいいじゃないか、というのはごもっともですが、
例えばシナリオテストで以下のような場合はちょっと面倒です。
2の管理者のテストが終わった後にまたユーザーの削除テストをしないといけません。
管理者とユーザーのtestspecを分けたい場合は見通しが悪くなります。

1. ユーザーAの画像登録機能のテスト
2. 管理者がユーザーAの画像を見るテスト

公式リファレンスでは、使いまわしたいテストはCommandに書け、とありますが、そのspec内で完結するテストをCommandに外出しするのも見通しが悪くなりますよね。

## というときは、テスト関数を外に出しましょう。

以下が完成例です。

“`
describe(“retry test code”, () => {
function commontest()

Github Actionsから、PrivateなGithub packagesのnpm repositoryにアクセスする方法

Github packageにpublishしてあるPrivateのライブラリを取得するには認証Tokenを設定してyarn install(またはnpm install)を行う必要があります。ただ、ググってもpublishする際の情報は出てくるのですが、取得する方は内容が薄い or 間違っているものが出てくるので、情報を正すために投稿しておきたいと思います。

# 正しい設定方法

* 1. 下記のyamlをレポジトリに追加
* 2. 権限のついた個人Tokenの発行
* 3. GithubのSettingからsecretを設定

の3手順が必要です。

## 1. Github actionsの設定

“`yaml:.github/workflows/build.yaml
name: ‘build-and-test’

on: # rebuild any PRs and main branch changes
pull_request:
push:
branches:
– master
– develop
jobs:
build-and

【JavaScript】コールバック関数の基本的な流れを理解する（動画解説付き）


# 概要

今回は、JavaScript初心者がつまづきがちな「コールバック関数」の基本中の基本の流れを動画も使って解説していきます。

JavaScriptのコールバック関数の理解は本当に重要で、JavaScript初心者がハマるもう1つの関門である「非同期処理」でもコールバック関数を使うことになるので、

コールバック関数は必須で理解する必要があるものとなります。

# 対象読者

今回の記事は、特に次のような人の助けになればと思い作成しました。

– 関数は書けるけど、コールバック関数の理解に苦しんでいる人
– コールバック関数の処理の流れが追えない人
– コールバック関数を自分で実装できるようになりたい人

# 詳細

解説動画と文章は以下

JavaScript, TypeScript 基本メモ

## JavaScript
### 基礎
– 関数も、値(オブジェクト)である
– thisは、そのオブジェクト自身を表す

“`javascript
var obj = {
name: “itoo”,
getname: function() {
return this.name;
},
tel: “000-1111-2222”
};
“`

### アロー関数

“`javascript
function hello(name) {
alert(“hello, ” + name()); // 備考:カッコ付きのため、nameは関数でないといけない
}

hello( () => { return “itoo”; } ); // アロー関数
“`

関数(return …)を引数にして、関数(hello())を使う。

### get(set)
get(set)が冒頭のついているものは、ゲッター(セッター)。
プロパティのように値を取り出す（セットする)。

“`javascript
class Test {
get getScore()

ユーザーアカウント削除前に名前やメールアドレスを入力させる

# 参考
[Pull Request](https://github.com/fukadashigeru/user_delete_app/pull/1)

# 準備

“`
rails new user_delete_app -d postgresql

bin/rails g scaffold user name:string email:string

bin/rails db:create

bin/rails db:migrate
“`

GemifileにSlim関連追加

“`
gem ‘slim-rails’
gem ‘html2slim’
“`

ターミナルで以下を叩く

“`
bundle exec erb2slim app/views app/views -d
“`

[Tailwindを入れる](https://qiita.com/sakusakupg/items/a5f61818b76c7009f8ff#tailwind%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%82%8B)

seedデータ準備