JavaScript関連のことを調べてみた2020年06月21日

【Rails】ancestryを用いた多階層カテゴリー機能の実装『編集フォーム編』

# 目標


# 開発環境
・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 前提

下記実装済み。

・[Slim導入](https://qiita.com/matsubishi5/items/b639ffddecc626856039)
・[Bootstrap3導入](https://qiita.com/matsubishi5/items/b117c95f4dd71340cc80)
・[Font Awesome導入](https://qiita.com/matsubishi5/items/a4c72f436e64ad106ee8)
・[ログイン機能実装](https://qiita.com/mat

ESLint v7.3.0

前 [v7.2.0](https://qiita.com/mysticatea/items/9215050e4546c1e2d486) | 次 (2020-07-04 JST)

ESLint v7.3.0 has been released: https://t.co/cGcdAuYc9s

— ESLint (@geteslint) June 19, 2020

ESLint `7.3.0` がリリースされ

call()を使うとthisをコントロールすることができる（ドラゴンボール編）

#thisのコントロール
[開眼！javascript](https://www.amazon.co.jp/dp/487311621X/ref=cm_sw_em_r_mt_dp_U_LiI7EbHAFQK36)を読んでて
thisとcallの動きについて知ったことがあり、書きますその2。
（※from 6章の6.5より。）

その1はこちら。
◼️[グローバルなとこで使うthisはまじでグローバル](https://qiita.com/naokikobashi/items/07b967312717a37e0c4a)

#thisレベル（thisに対する自分の理解感覚値）
関数とかの中でthis出てきたら「これ」の意味通り、その関数自体を指し示している、、、くらいの知識を持っていて、よくわかんなくなってもconsole.log()で中身見ればいいやくらいの理解度でした。
あとアロー関数の書き方くらいはわかるくらいの感じです！

#call()を使うとthisの生き方を決めれるぞ
どういう話かというと・・・

通常、「関数の中のthis」は、その関数自体を指し示します。
が、関数のcal

Next.jsの環境変数の使い方の基本と、Vercelの環境変数との関係性について

Next.jsの公式サイト[Default Environment Variables](https://nextjs.org/docs/basic-features/environment-variables#default-environment-variables) を参考に、Next.jsの環境変数の取り扱い方法と、Vercel上の環境変数との関係性について調べ、ユースケースをまとめてみました。

## Next.jsの環境変数の取り扱い方法について

* 後述の通り、環境変数の設定ファイルに`XXXXX=Y`の形で環境変数を定義しておけば、プログラム中で`process.env.XXXXX` の形式で環境変数を参照できる。

* ただし、普通に環境変数を定義した場合、これらはブラウザ上からは見えないので(サーバーサイドで実行されるコードでのみ見える)、ブラウザ上で環境変数を使えるようにしたい場合(例えば、クライアントサイドでHTTP Requestを送信したい場合に環境変数を使いたい場合)には、環境変数名を`NEXT_PUBLIC_`で始めるようにすれば(ex. `NEXT_

【Nuxt.js】firebase基礎編(Auth版)：アカウント作成をできるようにしよう

# 前置き

firebase系の記事が増えてきました??
ログインの記事は公開しているので
今度はアカウント作成部分を作ります！
この部分だけなら
5分もかからないと思います…笑
firebase使えば本当にめちゃくちゃ簡単です?

こちらは有料記事にて公開します??
・作成時にメールの送信
・エラー別の対処
ここでは純粋に
アカウント作成のみを記載してます！

メールアドレスログインのコードに
付け加えるように書いていきます✍️
https://note.com/aliz/n/n7f4ae08ba828

?他のログイン記事
Googleログイン
https://note.com/aliz/n/nbda9579d979a
twitterログイン
https://not

TypeScriptで学ぶSOLID〜開放閉鎖の原則編〜

# 対象読者

– SOLIDを学習あるいは復習したい方
– TypeScriptが既に読めるあるいは気合いで読める方
– いずれかのオブジェクト指向言語を知っている方は気合いで読めると思います

# 環境

– OS: macOS Mojave
– Node.js: v12.7.0
– npm: 6.14.3
– TypeScript: Version 3.8.3

# 本シリーズ記事一覧(随時更新)

– [TypeScriptで学ぶSOLID〜単一責任の原則編〜](https://qiita.com/junkin_au/items/3975f6b4eda550dec664)
– TypeScriptで学ぶSOLID〜開放閉鎖の原則編〜

# SOLIDとは

[こちら](https://qiita.com/junkin_au/items/3975f6b4eda550dec664)に記載がありますのでご覧ください。

# 開放閉鎖の原則とは

**拡張に対しては開いていなければならない、修正に対しては閉じていなければならない**という原則です。

これだけだとわかりづらいと

reduceとmap

備忘録として残します

“`javascript

// reduceは引数で渡された関数を実行し単一の結果を返す

const test = [1,2,3];

const total = test.reduce((acc,cur) => {
return acc + cur;
})

// accに実行結果が蓄積されていく

console.log(total);

// 結果　６

// mapは配列を返す　

const double = test.map((num) => {
return num * 2;
})

console.log(double);

// 結果　[2,4,6]

“`

グローバルなとこで使うthisはまじでグローバル

#はー！！そうなのね！
[開眼！javascript](https://www.amazon.co.jp/dp/487311621X/ref=cm_sw_em_r_mt_dp_U_LiI7EbHAFQK36)を読んでて
はー！！そうなのね！
と、グローバルなthisについて知ったことがあり、書きますその１。
（※from 6章の6.3より。）

#thisレベル（thisに対する自分の理解感覚値）
関数とかの中でthis出てきたら「これ」の意味通り、その関数自体を指し示している、、、くらいの知識を持っていて、よくわかんなくなってもconsole.log()で中身見ればいいやくらいの理解度でした。
あとアロー関数の書き方くらいはわかるくらいの感じです！

#グローバルなとこで使うthisはまじでグローバル

どういうことか？というと、、

例えば関数とか変数とかなんもしてないとこでthisを出力してみる。
他に何もスクリプト書いてない状態でconsole.log(this)ってやってみるということです。
なんも決まってない世界のthisってなんぞや？ってなりますよね。自分はなってました。

【Rails】ancestryを用いた多階層カテゴリー機能の実装『作成フォーム編』

# 目標


# 開発環境
・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 前提

下記実装済み。

・[Slim導入](https://qiita.com/matsubishi5/items/b639ffddecc626856039)
・[Bootstrap3導入](https://qiita.com/matsubishi5/items/b117c95f4dd71340cc80)
・[Font Awesome導入](https://qiita.com/matsubishi5/items/a4c72f436e64ad106ee8)
・[ログイン機能実装](https://qiita.com/mat

【jQuery】イメージマップでマウスオーバー効果をつくる方法

画像の一部にリンクなどを描いたときに、イメージマップを使うことがあります。マップ部分にマウスオンした時に効果を出すため、画像をスワップさせるスクリプトをご紹介します。jQueryを利用します。


“`javascript:JavaScript
$(function(){
$(‘area’).each(function(){
var usemap = $(this).parent().attr(‘name’);
var image = $(‘img[usemap=”#’ + usemap + ‘”]’);
var src_off = image.attr(‘src’);
var src_on = src_off.replace(‘_off’,’_on’);
$(this).hover(funct

位置情報付き鉄道オープンデータ提供サイト公開しました

複数のサイトで公開される鉄道に関するオープンデータを見やすく加工して提供するサイトを作りましたので、ここで紹介します。

鉄道駅LOD

https://uedayou.net/jrslod/

## 特徴

[鉄道駅LOD](https://uedayou.net/jrslod/)には以下の特徴があります。

– 日本の鉄道会社・路線・駅のデータを閲覧・ダウンロード可能
– 提供する鉄道データはすべてオープンデータ
– サイトからは鉄道会社、路線、駅の順番でブラウジングが可能
– URLに鉄道会社、路線、駅名を入力して該当データに直接アクセスが可能
– URLに入力する名称は、別名や略称にも一部対応
(「東日本旅客鉄道」を「JR東日本」、「近畿日本鉄道」を「近鉄」など)
– 鉄道会社・路線・駅データからは位置情報も取得可能
– URLに拡張子(JSON/XMLなど)をつけることで、任意のファイル形式でデータを取得可

JavaScriptでFizzBuzz問題を解く

#はじめに
この記事は、JavaScript初学者がFizzBuzz問題を解く過程をまとめたものです。

##要件
####1.入力された整数値でFizzBuzz問題を実行できる
– fizzNumに入力された値の倍数とbuzzNumに入力された値の倍数を小さい順に表示する
– 各々倍数と一緒にfizz、buzzと表示させる
– 両方の倍数である時にはFizzBuzzと表示させる
– 表示させるのは二桁の値まで

####2.整数値が入力されずに実行ボタンが押下された際にはエラーを表示させる
– 文字列が入力された時
– 少数が入力された時
– 空欄だった時

##FizzBuzzを実装するために必要な処理
・実行ボタン押下時のイベント作成
・inputタグから入力された値の取得
・入力された値を元にfor文とif文で条件を定義して、条件と合致すれば出力
・入力された値が整数値であるかif文を使ってチェック

大まかに分けるとこれらの処理工程があります。
上から順に処理していきます。

##HTMLサンプルコード
“`

【Vue.js】Composition API時代の便利ライブラリ「VueUse」を使ってみた

[Vue Composition API](https://composition-api.vuejs.org/) によって Vue.js にも React Hooks のようなロジックの再利用性の高い開発体験がもたらされようとしています。
しかし、まだ「Composition API の良さをわかっていない」という方や「Composition API をうまく利用した書き方がわからない」という方も多いかと思います。

本記事では Composition API 時代の便利ライブラリ **VueUse** を用いた実装例や、 VueUse 自体の実装がどのようなものか紹介します。
Composition API の良さや雰囲気もキャッチアップしていただければ幸いです。

# VueUse とは？
[VueUse](https://vueuse.js.org/) は [Anthony Fu](https://twitter.com/antfu7) さん[^1]が中心に開発しているライブラリで、Composition API を用いた便利系関数を数多く集めたライブラリです。

例えば、ブラ

【Vue】学習開始１週間で覚える内容

#１週間で学ぶべきこと
– 基本用語
– Vueインスタンス
– 条件付きレンダリング
– リストレンダリング
– props
– $emit

#基本用語

|用語|詳細|
|:–:|:–|
|DOM|HTMLに表現するためのプログラム。 **Document Object Model**の略。|
|ディレクティブ|DOM要素に対して**実行するアクションを伝える**トークン。|
|コンポーネント|**.vue拡張子を持つvueファイル**。componentsフォルダに格納される。
名前付きかつ再利用可能な**Vueインスタンス**のこと|
|レンダリング|**ディレクティブ**に基づいて**HTML上にデータを反映**させること|

#Vueインスタンス

– Vueインスタンス：“new Vue“で生成する。“変数定義“を行う。

“`sample.js

new Vue({
el: ‘#sample’,
data: {
message: ‘Hello World!’
}
})
“`

“`sample.html

<

駆け出しエンジニア日記 #3

#目次
[1.振り返り](#振り返り)
[2.学んだこと](#学んだこと)
[3.まとめ](#まとめ)
[4.今週の参考記事](#今週の参考記事)

（1ヶ月ほどサボってました。。。。。）

# 振り返り
### 6/15~6/19
– 実装タスク（使用言語：javaScript）
– プランごとのアプリの数の取得
– sequalizeのscopeメソッドの活用
– Array#map/filter/forEachの活用
– lpコーディング
– bootstrapの活用
– paddingとかmarginに手こずる
– lpフッター作るのに2日もかかってしまった
– タウンワークに求人投稿
– オフィス拡張に向けて
– bootcamp（自分で進める社内研修みたいなもの）
– javaの勉強
– 本格的にオブジェクト指向について学んでいる
– クラス・オブジェクト・インスタンスなど
– 今まで曖昧にし

Webpackを一歩一歩確実に理解してReact + TypeScript環境を作る

※自分のブログに投稿したのものと同じです。
[https://mr-ozin.hatenablog.jp/entry/2020/06/20/043243](https://mr-ozin.hatenablog.jp/entry/2020/06/20/043243)

### 動機

毎回 `npx create-react-app` で React アプリを生成していて Webpack の勉強から逃げていたが、いい加減向き合いたいと思ったため。
昔 Webpack に入門しようとしたら難しいという先入観を抱いたので、できるだけシンプルに、一歩一歩づつ入門する。

最終的に、React + TypeScript の環境を作れるようにする。

### リポジトリ

各ステップごとにコミットしているので逐次さかのぼってください。

[https://github.com/ryokryok/webpack-step-by-step](https://github.com/ryokryok/webpack-step-by-step)

### 前提

– 最低限の `yarn` または `np

Steam WebAPIとVue.jsを利用してSteam公式では出来ないレビュースコア検索や販売日検索の結果を表示する『Steamの殿堂』を作るまでの過程

# はじめに
今回「Steam WebAPI」と「Vue.js」を用いて**Steamゲーム検索サイト(Steamの殿堂)**を作成しました。そのときのノウハウや技術を公開したいと思います(エンジニアはアウトプットすると良いってばっちゃが言ってた)。

このSteamゲーム検索サイトを作った動機ですが、私が拝見してるこのサイトの補完サイトである『Qiitaの殿堂』がとても便利で、「Steamでも同じようなサイトを作ってみたい！」っと思ったのが動機になります(名前が似ているのはリスペクトからです。~~決してパク~~)。

# どのようなサイトか
Steam公式では出来ないレビュースコア検索や販売日検索の結果をランキング形式で表示するサイト。
　⇒ 『[Steamの殿堂](https://steamasiato.com/html/pantheon.html)』
![test2-compressor.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115232/87606178-4440-4f6e-786c-6

LaravelでUIkitのUploadを使う

#Laravelのファイルアップロード
Laravelのファイルアップロードでは、CSRF保護のためにCSRF「トークン」をフォームに含めて送信を行う必要があります。CSS,JSフレームワークのUIkitには[アップロードコンポーネント](https://getuikit.com/docs/upload)が用意されていますが、そのまま使うとCSRF「トークン」が用意されていないため419エラーが出てしまします。

#環境

* Laravel 6
* UIkit 3

#bladeテンプレート
今回は[Drop area](https://getuikit.com/docs/upload#drop-area)を使います。

“`php:**.blade.php

Babylon.jsで空中散歩はいかが？

#１．概要
3Dグラフィック・エンジンの一つであるBabylon.jsを使用して、空中散歩のデモを作成してみました。　なお、Windows10の環境において Microsoft Edge (Ver. 11.0.17763.379)、 Firefox (Ver. 65.0.2/64 bit) 及び Google Chrome (Ver. 73.0.3683.86/64 bit) で動作を確認しました。　また、Androidの一部及びiOSの一部での動作も確認しました。　ここで使用している3Dグラフィックの多くは「[RIG Models](https://rigmodels.com/)」様からダウンロードさせて戴きました。　無料グラフィックを提供されている各位に感謝いたします。

「[完成した空中散歩デモの実行](https://to-fujita.github.io/Babylon.js_3D_Graphics/Cruising_in_the_sky_004.html)」　
空中散歩デモの画像（例）は次の通りです。　
![Cruising_in_the_Sky.png](https:

CSS 勉強メモ0620

画面をスマホサイズに合わせたい時はでコンテント属性に以下を記載。

“`html

“`

画面のサイズによってスタイルを変え場合
以下は画面幅が600-800pxの時にに背景色をつける。
@mediaの次に条件を記載

“`
@media(min-width: 600px) and (max-width: 800px){
body{
background: skyblue;
}
}
“`

以下は画面の大きさが0~599px,600~799,800~
で条件を分けて表示しているサンプルコード

“`

/* common */
/* small screen */

body{
margin: 0;
}

.image{
background: pink;
height: 100px;
}

.text{
background: gray;
height: 100px;
}

asi