f@ctor

JavaScript関連のことを調べてみた2021年08月22日

JavaScript関連のことを調べてみた2021年08月22日
目次

[JavaScript jQuery]トップに戻るボタンの作成 Ruby on rails

初めに

JavaScriptにまだまだ慣れていません:frowning2:
今回はまず簡単そうな…トップに戻るボタンを設置してみました。
![スクリーンショット 2021-08-22 11.31.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633266/677a7313-9c61-df98-a059-98e3074e17f8.png)

既にJqueryは導入済です。

ボタンを決める

今回は以下のアイコン素材から、矢印を入手しました！

https://iconbox.fun/

ボタンの設置

とりあえず全ページに置きたいので、
application.html.erbに記述します。

“`perl:application.html.erb



my port
<%= csrf_meta_tags %>
<%= csp

元記事を表示

JavaScriptからTensorFlow Liteのモデルを使って推論してみる

# はじめに

[TensorFlow Lite](https://www.tensorflow.org/lite/) なるものをご存知でしょうか。主にエッジ用途など低リソース環境のために、重みパラメータを整数化してモデルサイズの縮小と計算量の削減を行うというものです。

実はこのモデル、JavaScriptからでも使えます。モデルをダウンロードしてクライアントサイドで推論する場合、モデルサイズの削減はトラフィック削減にもつながるので嬉しいです。また、計算量が減ることは比較的CPUが非力なモバイル用途においてもよいと思うので、Cordovaなどを使ってHTML/JavaScriptベースでモバイルアプリを作る場合に活用することもできそうです。

ということで、簡単なMNIST手書き数字認識のモデルを学習して重みパラメータを整数化し、JavaScriptから呼び出すところまでを一通り作ってみたいと思います。

# 検証環境

– 学習: Google Colaboratory
– TensorFlow 2.6.0
– TensorFlow.js 3.8.0
– 推論: F

元記事を表示

【React】useRefを用いて値を取得しようとしたらundefinedと言われた。~備忘録~

React HooksのuseRefを用いて、contenteditableにしたdivタグの値を取得するときに躓いたので備忘録として。

“`react
import React, { useRef } from ‘react’

function InputWithDivTag() {
const refContainer = useRef(”)

console.log(refContainer.current.value)

return (


)
}

export default InputWithDivTag
“`

いざ、値を入力してコンソールログの結果を見ると、、、

“`

元記事を表示

VSCodeでDenoのコードを書くとエラーが出る件

…についての対処法。

# An import path cannot end with a ‘.ts’ extension. Consider importing \ instead. ts(2691)

（または`Cannot find name ‘Deno’. ts(2304)`）

https://github.com/denoland/vscode_deno/issues/66#issuecomment-884708660

### 原因

– VSCodeでは、デフォルトでNode.js向けの拡張機能が起動します。
– このエラーを回避するには、Deno向けの拡張機能をインストールした上で、設定から有効化しなければいけません。

### 回避策

1. [Deno向けの拡張機能をインストール](https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno)します。(バージョン3系が現在の最新です。)
1. `ctrl+shift+P`を押し、コマンドパレットを表示しま

元記事を表示

JavaScriptでダークモードに切り替えるボタンを実装する

https://zenn.dev/hrkmtsmt/articles/b4dbb052b61629

元記事を表示

ES6メソッドの復習 map(), filter(), findIndex(), test()

# ES6の配列メソッド
* 使わなくても別の構文で書ける
* シンプルに書ける
* 実行速度が早いわけではない

## map()
* 配列をイテレートする
* 要素１つずつ処理する
* 新しい配列を生成する

“`javascript
const array = [1, 2, 4, 8];
const resultArray = array.map(x => x * 2)
console.log(resultArray)
// output: Array [2, 4, 8, 16]

const object = {
“hoge”: {text: “fuga”},
“foo”: {text: “bar” },
“fiz”: {text: “buzz”}
};

const objectToArray = Object.keys(object).map(key => {
const value = object[key]
value[‘id’] = key
return value
});

console.log(object

元記事を表示

駆け出しプログラマ向け、実務で使える「効率性」ってなに？

# 前置き
こちらの記事は筆者が備忘録的にまとめたものです。
せっかく来てくれた読者の皆様にとっても役に立つように意識して書いてみましたので、
是非最後まで読んでみてください。では、Let us begin!

# 効率性(Efficiency)
こうりつせい とは
## 辞書的な説明
### 日本語だと
> 経済学において、効率性（こうりつせい）とは、資源・財の配分について無駄のないことを意味する。

や効率の説明として

> 機械が有効に働いてなした仕事の量とそれに供給した総エネルギーとの比率。また、仕事の能率。

### 英語だと
> the state or quality of being efficient.

### IT用語的には
> 目的達成の際にリソースを無駄に消費しないことを意味する。この場合のリソースとはメモリ使用量とプロセッサ使用時間である。

## つまり
いかに寄り道や無駄な仕事をせず目的達成ができるか、その状態やクオリティ、みたいなことろでしょうか
IT用語としては、これ↓に尽きそうです。

>目的達成の際にリソースを無駄に消費しないこと

# 効率性を

元記事を表示

TensorFlow.js をサクッと試す

# はじめに
JavaScriptからTensorFlowを使える TensorFlow.js というものがあります。
https://www.tensorflow.org/js
https://github.com/tensorflow/tfjs

公式サンプルも色々あるのですが、シンプルにTensorFlow (Python) で学習したモデルを読み込んで、それを使ってブラウザ側で推論する部分を作ってみました。

# 検証環境

## 学習
– Google Colaboratory
– TensorFlow 2.6.0
– TensorFlow.js 3.8.0

## 推論
– Firefox 91.0
– TensorFlow.js 3.8.0

# モデル学習

これは普通にやれば良いのですが、保存するときにTensorFlow.jsから読み込める形式にする必要があります。というわけで最初にpipパッケージをセットアップしておきます。

“`
!pip install tensorflowjs
“`

MNISTの手書き数字分類をするとして、デー

元記事を表示

findメソッド、filterメソッドの違い

##findメソッド
条件に一致した最初の項目を取得

“`js
var users = [
{ id: 1, admin: false },
{ id: 2, admin: false },
{ id: 3, admin: true },
{ id: 4, admin: false },
{ id: 5, admin: true },

];

var admin = users.find((user) => {
return user.admin === true;
})

admin; // { id: 3, admin: true }

“`

##filterメソッド
配列から条件に一致した全ての項目を取得

“`js
var users = [
{ id: 1, admin: true },
{ id: 2, admin: false },
{ id: 3, admin: false },
{ id: 4, admin: false },
{ id: 5, admin: true },
];

var filteredUs

元記事を表示

分割代入（Destructuring）の使い方

# 分割代入

分割代入を学習したので使い方、注意などを忘れないためにしておくための備忘録。

[MDN 分割代入 ( Destructuring assignment )]
(https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

# ES5で書いた場合

“`js
var character = {
name: ‘ミッキー’,
name2: ‘ミニー’
}
//個別に使うときに変数に入れる必要がある
var name = character.name;
var name2 = character.name2;
“`

参照するときにコードが冗長になってしまう。

# ES6の分割代入で書いた場合

“`js
var character = {
name: ‘ミッキー’,
name2: ‘ミニー’
}

//characterの中で抽出(分割代入)したい値を中括弧の中に書く
const { name, name2 }

元記事を表示

JavaScriptで役立つasync/awaitテンプレ（WebDevTips#2）

こんにちは，ココア（@cocoa_folio）です．
これまでは主にpythonに触れてきましたが，最近Javascriptを勉強し始めたので，Webエンジニアを目指す方々へのtipsとして記事を書いていきたいと思います．

前回の記事はこちら▼

https://qiita.com/cocoa_folio/items/b8d9b435041233637cfa

前回に引き続き，今回はasync/awaitについて説明していきます！

#async/awaitとは

Promiseと一緒に用いられることの多い__async/await__
asyncとawaitって一体なんでしょう？
Googleで「async await」と調べてみると…

#####asyncとは
>非同期関数 — AsyncFunction オブジェクトである関数を定義します。非同期関数はイベントループを介して他のコードとは別に実行され、結果として暗黙の Promise を返します。ただし、非同期関数を使用したコードの構文および構造は、通常の同期関数と似たものになります。

#####awaitとは
>asy

元記事を表示

Vueでお絵かきアプリ作成2(canvas使用)

#趣向
vueでお絵かき機能を作成する機会があったため作ってみました！
![スクリーンショット 2021-08-15 17.37.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/843952/9ffc5175-6583-9e15-6d03-252324b66008.png)

#1の続き
[前回の1はこちら](https://qiita.com/ryotaro_tech/items/dceb282ec62f092c1481)
このページではペン機能と消しゴム機能をわけ、ペンの太さと色を変更できるようにしたいと思います。

まずはhtml。画面を整えていきます。

“`HAML:html

フロントエンドエンジニアのNode.js基礎学習〜

# はじめに
近年、フロントエンドでもバックエンドの開発経験・知識が求められている時代になっているおり、フロントとして市場価値を高める上でも意識いたいっすよね。

今までは`JS`を中心に`Vue`,`React`などを学んでいたのですが、今回はサーバーサイドの`JS`実行環境である`Node.js`を入り口にバックエンドを少しづつ学習していこうと思い、妥当な流れで`Node.js`を技術選定しました。（phpとかrubyでもありかなと思いました。。）

– 今回は`Node.js`とは何か？
– `Node.js`でデファクトスタンダードの`Express`とは？

以上を初学者向けにアウトプット&備忘録として執筆しました。

ちなみに今年`2021年`の[stackoverflow survey 2021](https://insights.stackoverflow.com/survey/2021#technology)で人気のある言語技術で`Node.js`は第６位でした。
思ったより上位したね

#Node.jsとは

駆け出しプログラマ向け、実務で使える「簡潔性」ってなに？

# 前置き
こちらの記事は筆者が備忘録的にまとめたものです。
せっかく来てくれた読者の皆様にとっても役に立つように意識して書いてみましたので、
是非最後まで読んでみてください。では、**Let us begin!**

# 簡潔性(Conciseness)
かんけつせい とは
## 辞書的な説明
### 日本語だと
> 簡略で要領よくまとまっていること。 短くてすっきりしているさま。

### 英語だと
> the quality of being short and clear, and expressing what needs to be said without unnecessary words

### IT用語的には
> 無駄な情報がないことを意味する。メモリ容量が限られている環境では重要である。また、コードの行数を削減することも様々な意味で重要である。同じ機能を実現するコードが繰り返し出現する箇所をサブルーチン[^1]化することで改善される。また、文書についても同様のことが言える。

## 簡単にまとめると
– 短くてわかりやすい
– 不要な説明なしに大事なことが表現

JavaScriptで役立つPromiseテンプレ（WebDevTips#1）

こんにちは，ココア（@cocoa_folio）です．
これまでは主にpythonに触れてきましたが，最近Javascriptを勉強し始めたので，Webエンジニアを目指す方々へのtipsとして記事を書いていきたいと思います．

# Promiseとは
Promiseとは，一体なんでしょう？
Googleで「javascript promise」と検索してみると…

##### Promise
>Promise オブジェクトは非同期処理の最終的な完了処理 (もしくは失敗) およびその結果の値を表現します。

という説明が出てきます．

「非同期処理ってなんだ？」と思った方，こちらもGoogleで「非同期処理とは」と検索すると…

##### 非同期処理
>非同期処理とは、一つのタスクを実行中であっても他のタスクを実行できる実行方式をいいます。 非同期処理をうまく実装することで、ユーザーはアプリケーションの処理待ちを気にすることなくアクセスすることができるため、ユーザビリティを考えるうえで重要な要素になります。

こ

元記事を表示

JavaScript関連記事まとめ

JavaScriptに関する私の書いた記事をまとめました
新しい記事を更新次第、こちらに追加していきます。

[配列　オブジェクト](https://qiita.com/yuka-f/items/33db4e3bcae78570627c)
[繰り返し処理](https://qiita.com/yuka-f/items/f322bc9e365e918001c9)
[真偽値　比較演算子　条件式組み合わせ](https://qiita.com/yuka-f/items/419ec43ed56d8f7dcd3b)
[条件分岐](https://qiita.com/yuka-f/items/10d1c95df9bbf4f23f3a)
[テンプレートリテラル](https://qiita.com/yuka-f/items/34b46d49a8e6e354da1d)
[変数と定数の違い](https://qiita.com/yuka-f/items/a77b3df3acded0156464)
[文字列と数値違い](https://qiita.com/yuka-f/items/f7254fa317d0

元記事を表示

JavaScript: isEven

isEven というGitHubトレンドに突如現れたライブラリ。

## プロジェクト

https://github.com/samuelmarina/is-even

> This is a 100% serious project,

そのプロジェクト。

中身がこれ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/958e91cc-cff0-b699-f034-c96fe0466c3f.png)

！？！？！

となる

## 作者

## マジレス

“`js
isEven = (n)=>{
if (n % 2 == 1)
return false;
return true;
}
“`

しかし容赦はないコメント

https://github.com/samuelmarina/is-even/

元記事を表示

Teaching Python to the Dogelog Runtime

We had that feeling that the full potential of the Dogelog runtime was not yet demonstrated. Although there was a lot of progress concerning the Dogelog runtime over the last weeks we
![teach_doge.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416192/e0829a46-6aef-1490-257b-4aebff02a80c.jpeg)
were only working for the JavaScript platform. So we started a new side quest porting the Dogelog runtime to the Python language. This would demonstrate that cross compiling needs less wo

元記事を表示

js 3連続以上の改行を2行の改行に変換する

Twitterとかでありますよね。
連続した改行を入力しても、改行幅はマックス２行までに制限されるやつ。
ああいうやつをjsでサッと実装したいときはこれでおk

“`js
let newValue = value.replace(/(\r\n){3,}|\r{3,}|\n{3,}/, ‘\n\n’);
“`

参考 [013：正規表現を使い、連続した改行コード・改行文字を取り除く](https://www.system-ido.com/risouken/index.php?page=tech&num=13)

元記事を表示

インクリメンタルサーチ rails ajax

インクリメンタルサーチを実装する！

インクリメンタルサーチとは・・逐次検索です！

完成イメージ

あるワード「コロナ」を入れると、、そのワードがタイトル、コンテンツ内に含まれてる記事が出てきます。
さらに、「コロナ」から「コロナウイルス」にうち進めると…
さらに絞り込まれていきます。
ちなみに下に出てくる記事のタイトルは、リンクにしてるので
押したらそのまま、記事に飛べます。

これが、ベストなインクリメンタルサーチではないですが・・・
頑張って実装したのでまとめていきます:fist:

![スクリーンショット 2021-08-20 20.49.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633266/a6f5040a-bc90-691b-a797-488f0f4a7e47.png)
![スクリーンショット 2021-08-20 20.49.58.png](https://qiita-image-store.s3.ap-northeast-1.amaz

元記事を表示

OTHERカテゴリの最新記事