f@ctor

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

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

大学院生がReactとTypeScriptでポートフォリオを作ってみた

#概要
タイトルの通り、この度（少し前の話ですが）ReactとTypeScriptでポートフォリオサイトを作成したので、使用した技術と学習方法についてまとめようと思います。
これからポートフォリオを作ってみたいという人にとって少しでもお役に立てば幸いです。

#動機
Qiitaでポートフォリオを作成したという旨の記事をよく目にするようになり、自分もやってみようという気持ちになりました。
特に「[フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話](https://qiita.com/p1ass/items/a01578b782f17f573510)」という記事には大きな刺激をもらいました。

#完成品
[ポートフォリオサイト](https://hobiron03.github.io/KamikamiLab)
[ソースコード（恥ずかしいですが）](https://github.com/Hobiron03/KamikamiLab)
レスポンシブデザインとシングルページアプリケーション（SPA）に対応しています。
まだリンクを繋げてなかったり不完全な部分があるのでそ

元記事を表示

npm installでインストールできるモジュールを作るまでの流れについて

# はじめに

npmでインストール可能なモジュール（パッケージ）のなるべく最小構成の作成方法が中々見つからなかったので、簡単にまとめました。

# 環境
– Node.js 12.16
– npm 6.14

# ファイル構成
npmパッケージには、1つのディレクトリ内にモジュールのソースコードセット、`package.json`、エントリーポイントとなるjsファイル（今回は`index.js`とする）の3種類が必要となる。

今回の例としては、ディレクトリをmodtest、モジュールのソースコードをサブディレクトリlibの配下に2種類(hello.js, hello2.js)、index.jsとします。

– modtest/
– lib/
– hello.js
– hello2.js
– index.js
– package.json

# モジュールの作成

## 1. ディレクトリ作成
空のディレクトリ（今回はmodtest）を作成しておきます。

## 2. package.jsonの作成
空のディレクトリへ移動し

元記事を表示

JavaScript タイマーの使い方

## タイマーの作り方

0.5秒ごとに表示を更新する

“`html


“`

## 時間になったら何かやらせたい場合

上のサンプルで10秒後に時間が変わる

“`JavaScript
let timerId = setTimeout(timer, 10*1000);
“`

上のタイマーを解除するには

“`JavaScript
clearTimeout(timerId)
“`

元記事を表示

jQueryをシンボリックリンクするのがいいと思いますがどうか？

# 1. ディレクトリをまるっと上書きするパターン

“`
/var/www/html
/index.html
/js
/jquery.js
“`

“`html:index.html

“`

よくあるパターン。というか普通にjQueryを使用しようとするとこうなっていると思います。

## メリット
シンプルで、簡単。
バージョンアップの度に、htmlを更新する必要がない。

## デメリット
現在使用中のjQueryバージョンが分かりにくい。

# 2. バージョン名付きディレクトリにリンクするパターン

“`
/var/www/html
/index.html
/js
/jquery-1.11.1.js
/jquery-2.24.js
/jquery-3.5.1.js
“`

“`html:index.html

ESLint `7.2.0` がリリースされまし

元記事を表示

JavaScriptでサムネイル画像の切り替え方法

## JavaScriptを使ってサムネイル画像を切り替える方法

イメージ↓

[![Screenshot from Gyazo](https://gyazo.com/b9d688eb77594835913c9b2abce422a7/raw)](https://gyazo.com/b9d688eb77594835913c9b2abce422a7)

JavaScriptを使ってimageの差し替えを実装しました！

＊ただの備忘録になっていることをご了承ください

`手順`

1.HTMLファイルを作成し、画像のimageを貼る
2.cssでコーディング
3.JavaScriptで画像をクリックした時のメソッドを書いていく

ざっくりすぎますね笑　実際に書いていって説明します。

## HTMLを書く

```html

　
元記事を表示

rails devise(sign_in時)でreCAPTCHA V3の実装

初めてQiitaに投稿します！
軽〜い気持ちで投稿しています。
間違い等あれば、優しく指摘していただければ幸いです！

# reCAPTCHAとは？
googleが提供しているAPIの一つで、人間が操作しているかどうかを確認するためのものです。
会員登録やログイン時に「私はロボットではありません」とこのような表示を見た事があると思います。
チェックするだけで済んだり、その後画像認証が出た場合車とか信号機とか横断歩道とかとかチェックした経験があるかと思います。あれです。
![c92f501bfd292e7a5ceb955675e35aee.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606335/6ea0faa6-dab7-0176-743b-9db30949c2ca.png)

reCAPTCHAは大きく分けてV1,V2,V3の３種類があります。（V2の中にはInvisibleもあります）
今回はV3の実装です。

# reCAPTCHA V3の特徴と導入メリット
reCAPTCHAのAIが、

元記事を表示

1つの配列内に2つ以上同じ要素を取り出す時はfind()じゃなくてfilter()を使う

#はじめに

配列の中から特定の要素を取り出す時、
ひとつ→find()
複数→filter()
を使うけど、返す値が異なることを覚えておきたい。

#ソースコード
配列の中から10以上の値を取り出す。
###findメソッド

```js
const array = [5, 120, 10, 10, 4];

const result = array.find(element => element >= 10);

console.log(result);
//120
```
120という値だけが返される。

###filterメソッド

```js
const array = [5, 120, 10, 10, 4];

const result = array.filter(element => element >= 10);

console.log(result);
//[120, 10, 10]
```

10以上の値だけが入った新しい配列が返される。
filterメソッドを使ってこの配列から120を取り出したい場合は、

```js
result[0]
```
で値を取り出

元記事を表示

未定義値(undefined) ってなに？

## はじめに

undefinedってなんだろう…　　

中身がない？ってことなんだろうけど…どういうこと？　　

そんな基本的な知識ない自身の疑問を調べてメモしました。

## 未定義値(undefined) ってなに？

JavaScriptでは初期化されていない変数には全て「undefined」という値が入っています。

(値が入る前の初期値ってことか…？)

未定義値(undefined)とは、ある変数の値が定義されていないことを表す値で以下のようなケースで返されます。

- ある変数が宣言済みであるものの値を与えられていない
- 未定義のプロパティを参照しようとした
- 関数で値が返されなかった

```
const x;
const obj = { a:12345 };

console.log(x); //結果:undefined (値が設定されていない)
console.log(obj);　//結果:undefined (プロパティが設定されていない)

```

単純に書くとこんな感じにundefinedになります。

これを利用して変数が定義済みかどうかを

元記事を表示

ScrollReveal()を簡単に使う！要素・文字・画像にアクションを。

#はじめに
スクロールをした時に指定の要素やテキストなどにアクションを加えて動かすことができるScrollReveal()です。hpやportfolioなどの作成する時簡単にできてしまうので実践してみて下さい。

#方法
まず、プロジェクト中のディレクトリにファイルをインストールします。

https://github.com/jlmakes/scrollreveal
githubからインストールすることが可能です↑

```terminal
npm install scrollreveal
```
今回使用するhtmlなどが入ったディレクトリにターミナルもしくはコマンドにてインストールします。

以下がサンプルの関数です。
各機能の説明を軽く載せています。
数値は適当なので自分の目的に合わせて下さい！

```javascript:sample.js
ScrollReveal().reveal('class名',{
origin:'right',
distan

元記事を表示

Reactでobnizを使おう

Reactでobnizを使うにはちょっと一工夫いるっぽいので試してみました。

Reactで使うWebpackが、obnizで使っているwebpackを認識しなくて設定を引き継いでくれないようで、底の部分に関していくつか修正が必要なようです。

**とにかく結論だけ知りたいんだという方は、[こちらのgithub](https://github.com/9wick/obniz-react-sample)を参照ください。**