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

ソート機能を実装した際に感じたfilterメソッドの魅力

#はじめに
先日、開発中のサービスにおいてリアルタイム検索とソート機能を実装した際にJavaScriptのFilterメソットに大いに助けて頂きました。
備忘録を兼ねて機能や使い方を書き残していきたいと思います。

###Filterメソットとは？
filter() メソッドは、引数として与えられたテスト関数を各配列要素に対して実行し、それに合格したすべての配列要素からなる新しい配列を生成します。
[MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)より

つまりは関数内で既存の配列から必要箇所を抜き出して、戻り値を用いて新たに配列を作ることも出来ますし、引数を指定してフロント側から欲しい値を持ってくることも出来ます。

###How To Use
“`javascript
const items = [
{ name: “itemA”, price: 1500, madeIn: “Japan” },
{ n

Svelte+Sapperで作る電影予告集会

[The State of JavaScript 2019](https://2019.stateofjs.com/front-end-frameworks/)を見ていて気になった[Svelte](https://svelte.dev/)を触ってみる延長でサイトを作りました。SvelteとSapperを使いたくなったときの参考にしてもらえたら。

[](https://yokoku.cc)
[電影予告集会](https://yokoku.cc)

# 要点のまとめ
|　| 概要 | 仲間 |
|:—:|:—:|:—:|
| **Svelte** | 最小限のコードでUIを作れる | React/Vue |
| **Sapper** | SSRから静的サイトまで | Next.js/Nuxt.js |

2020年流行するであろうwebデザインのトレンド

ここ最近はざっくり言ってしまえばフラットデザイン2.0、マテリアルデザインが主流になっていると思います。
視認性もよく操作もしやすいのが好まれる傾向になています。
そんな中でこれからあるいは、今も流行っているものもありますが2020年で流行するwebデザインを紹介したいと思います。
なるべくサイトも載せていこうと思いますが、ページが更新されて違うデザインになっていたり、サイトがなくなってしまっていたらごめんなさい。

##・ダークモードに対応したデザイン
ios13からiphoneでもダークモードが搭載されました。
すでに対応しているサイトもありますがまだまだダークモードに対応していないサイトが多く見れれます。
目に優しいから、かっこいいからなどの理由で利用している人は多いと思いますのでこれからもっと増えてくるでしょう。
ただカラーが変わるのでブランドイメージとかの兼ね合いもあるのでなかなか難しい部分ではありますが…
高卒プログラマーのアルゴリズム体操（n!は末尾何桁ゼロが並ぶか）

[codewars.com](https://www.codewars.com/) の問題を解いていて、右往曲折あってどうにか答えにたどり着くまでの流れを復習の意味でまとめています。
頭の良い記事ではありませんが、数学的センスを何処かに置いてきたので解説とか読んでもよく分からないけど、バカが悩んでる様を見ると少し理解が早まるぞ！という方のお役に立てれば幸いです。

## 書いてる人
– 数学知識は皆無（高校でやったはずですがほとんど覚えていません、、算数ができる程度です）
– 主にJSを利用（以下の問題もJSで解いています）
– JSに関して初学者ではないが、リファレンスに載ってる関数を全部把握してるかと言われると微妙というレベル
– アルゴリズムってねーあれだよねー

という感じですので、同じような人におすすめです。
codewars.com や projecteuler.net を解きながら初歩の初歩から数学やアルゴリズムの勉強をしている最中です。

## codewars
codewars.com はサイト上でプログラミングの問題を解いていくサービスです。
以下が詳しいです。
h

Vue CLI 3のプロジェクトでBootstrap4を使ってみた

# はじめに
はじめまして、Qiita初投稿です。
最近Vueを勉強し始め、Bootstrapと組み合わせてポートフォリオ作ろうと思い調べていたのですが、vue-cliの3.0系に対応した連携方法の情報がなかなか見つからなかったのでメモがてら記録しておきます。

[Vue.js を vue-cli を使ってシンプルにはじめてみる](https://qiita.com/567000/items/dde495d6a8ad1c25fa43#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)
[Vue.js + Bootstrap4でポートフォリオサイトの雛形を作ろう！](https://qiita.com/masa08/items/3474d97a1283dfc275c9)

# プロジェクト作成
Vue vue-cliの3.0系をつかって作成しました。

“`
$ vue create my-project
“`

vue-cliの3

JavaScfiptでワンライナーFizzBuzz

## 概要
たまたまFizzBuzzのJavaScriptワンライナーを即興で書く機会があったので、その時に書いたコードについてまとめました。
## 140byte版
こちらが実際に書いたコードです。

“`javascript:fizzbuzz.js
let num = 100; // FizzBuzz数
console.log(Object.keys(Array(num).fill()).map(i=>Number(i)+1).map(i=>i%3==0&&i%5==0?”Fizz Buzz”:i%3==0?”Fizz”:i%5==0?”Buzz”:i).join(“\n”)) // 140byte
“`

JavaScript では Range オブジェクトが使えないので（2020年1月現在）
`Object.keys` に `Array(x).fill` を与えて num 数分の配列を生成しています。

上記のワンライナーを分解して順番に解説すると

“`javascript
Array(num).fill() // [undefined, undefined, unde

[自動更新が止まらない]RailsでJavascriptファイル（html機能）を用いて自動更新機能実装をした時に、ブラウザ上の繰り返し表示が止まらないエラーの解決例

#1.エラーの様子と間違っていたファイル

まず筆者が起こしたエラーは下のものです

＜エラーの様子（gifなので動かない場合は画像をクリックしてご確認ください）＞

言葉で表現すると、仕様としてはsendボタンを押したら、1回だけ「家に帰ってお母さんに報告だ！」が出て（ブラウザ上の）更新が止まる予定でした。（裏では1秒に１度更新する設定にはしていますが、見た目に反映させない仕様を目指していました。）

しかしご覧の通り表面上ループを抜けられずコメントがずっと繰り返されてしまいます。
（これでは永遠にお母さんに報告し続けることとなってしまいます。）

困ったなと思いながら、この表記をするファイルにlinkを組んである「qiitaに聞いた」をクリックするとコメントは１度のみ投稿されたこととなっています（データベースへの取得は一回だけと設定ができ

【Rails】 DataTables 実装方法

# はじめに
RailsアプリケーションでDataTablesを使っている記事を見かけなかったので、まとめることにしました。
やり方がわかっていないと細かい仕様を変更するのに時間がかかってしまいますが、やり方さえ覚えてしまえばとても使いやすい強力なツールです。
Bootstrap や jQuery UI を使うことによって、時間をかけずに多機能&良いレイアウトを提供してくれるため、爆速で開発できるRailsととても相性がいいと個人的には思っています。

# DataTables
DataTables は、HTMLのテーブルに、__ページ切り替え、ページ当たりの件数設定、ソート、フィルタなどの機能を簡単に追加できるjQuery プラグインのライブラリ__。

# 使い方
## 設定
“`Ruby:GemFile
# ページネーションにはkaminariを使用するため
gem ‘kaminari’
gem ‘jquery-datatables-rails’
“`

“`
$ bundle install
“`

“`
$ rails g jquery:datatables:in

Vue.js×FullCallendarでWEBカレンダー作成（花粉カレンダー作成①）

##はじめに
耳鼻咽喉科の開業医をしています。
花粉症の患者さんに使ってもらえるような花粉飛散情報が分かるカレンダーアプリを作りたいと思っています。
調べてみるとFullCallendarというオープンソースのJavaScriptライブラリがあり、カレンダーのUIと機能を簡単に実装できるようです。
今回カレンダーを表示して予定を入れるところまで挑戦してみました。

##完成図

##作成
こちらの記事を参考にさせていただきました。ありがとうございます。
[【忘却のJavaScript #3】Vue.jsでカレンダーを表示してみる](https://wing-degital.hatenablog.com/entry/2019/05/16/001013)

**１．vueプロジェクトの作成**

コマンドプロンプトから以下のコマンドを実行し、雛形

JavaScript勉強の記録その22:setTimeoutとclearTimeoutを使って関数を呼び出す

#setTimeoutを使って関数を呼び出す
setInterval(関数名,ミリ秒)とすることで、特定のメソッドを指定したミリ秒間隔で呼び続けることができますが、setTimeoutはsetTimeout(関数名,ミリ秒)とすることで、特定のメソッドをミリ秒後に1度だけ呼ぶことができます。

例えば以下の例では、ボタンがクリックされてから、2秒後にDateオブジェクトが生成されてコンソールに表示されています。

“`index.html







showDatePerSecondを呼ぶ



“`

“`index.js
function showDateTimePerSeco

Node.js install for mac

何からNode.jsを入手したか忘れないためのメモ。

– [公式](https://nodejs.org/ja/download/)からLTS版mac用のinstallerをダンロードする
– installerを起動し、各設問をデフォルトのまま進めてinstallする
–
– nodeのバージョンを確認する

“`
$ node -v
v12.14.1
“`

– npm(パッケージマネージャ)のバージョンを確認する

“`
$ npm -v
6.13.4
“`

以上です。

参考:
https://jsprimer.net/use-case/setup-local-env/

[Angular]module間でコンポーネントを共有する

## 概要

– Reactではコンポーネントはimportすればどこからでも使うことができるが、Angularでは一手間加えないとできなかったのでやり方のメモ

## やり方

– 共通コンポーネント用のSharedModuleを作成してそれらを各moduleでimportすることで使えるようになる

### サンプル

– 以下のようなhomeモジュールとaboutモジュールでCustomButtonコンポーネントを共有したい場面を想定して説明します

“`zsh
% tree src/app/
src/app/
├── app-routing.module.ts
├── app.component.ts
├── app.module.ts
├── custom-button
│   └── custom-button.component.ts
├── about
│ ├── about-routing.module.ts
│ ├── about.component.ts
│ └── about.module.ts
└── home
├── home-rout

Googleサービスでサーバーレスなカウントダウンサイトを作ってみた

##完成イメージ
Googleアカウントがあれば、無料のサーバーレス運用ができます。
実際に作ったサイト
https://sites.google.com/view/olympic-paralympic/

##さっそく作成
Googleサイトを利用します。
https://sites.google.com/new

右下の**＋**をクリック

※Googleドライブからも作成できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.am

webGLでVertex Animation Textureをやる

WebGLでVertex Animation Textureを実験的にやってみた記事です。

## 環境
・Three.js
・gsap
・Houdini Indie 18
Houdiniの無料版でできるかは確認していません。
・Windows 10

## Vertex Animation Texture について
VATとはそれぞれのピクセルに頂点の位置、回転などの情報を特定のフレーム分含めたテクスチャデータの事です。
テクスチャのサイズですが、ポイントの数、フレーム数が多くなるに連れてテクスチャサイズも大きくなります。
テクスチャのX軸が頂点番号になり、Y軸はフレーム数になります。


## HoudiniでVertex Animation Textureを出力する
Houdiniにはゲー

JavaScriptでテーブルをモーダルウインドウに表示

JavaScriptでJSONから動的に生成したテーブルをページング付きでモーダルウインドウに表示します。モーダルウインドウにランキング等を表示したい場合などに使ってください。

“`javascript