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

[Rails]もっと見るボタンの実装（JavaScriptのみ、jQueryなし）

### 完成イメージ


合計のレコード数が9件だった場合、

最初は、6件だけ表示。
これを押すと、残りの3件が表示されるという仕組みを作る。

### 前提
マークアップコードはHamlで実装。

// Haml側でのデータの扱い
– ＠sections = 複数のセクション
– section: アプリケーション内で表示する後述の「contents」を格納するセクション
– contents: 「section」と1対多の関連がある、アプリケーション内で表示する複数のレコード

### JS側

“`haml
:javascript
// もっと見る表示
function SeeMore(contentsId, minimumContentsId, button) {
c

Vue.js HTMLの属性(attribute)の中で文字列内変数展開をする

ES2015(ES6)の`(バッククォート)を使った展開方法が使える

“`javascript
new Vue({
el: .app
data: { key: ‘sample’ }
})
“`

“`html

“`

IEはこのTemplate literals (Template strings)を対応してない。

## 参考

https://www.yoheim.net/blog.php?q=20170602

【React】Material-UI と Emotion を併用するときの環境構築

React (TypeScript) のプロジェクトにおいて Material-UI と Emotion (CSS in JS) を併用するときに、役に立つかもしれない準備的な話になります。

## 前提

create-react-app の TypeScript テンプレートを使います。
npm ではなく yarn を使っています（npm でも同様の手順を踏めば動くと思いますが、確認していません）。

## React の環境構築

プロジェクト名は適宜変更してください。今回は myapp にします。

“`shell
$ npx create-react-app myapp –template typescript
“`

## Emotion のインストール

Emotion をインストールします。

“`shell
$ yarn add @emotion/react @emotion/babel-plugin
“`

## CRACO のインスール

`CRACO` なにこれって感じですね。簡単にいうと create-react-app の設定を上書きするときに使え

JavaScriptを基本からまとめてみた【14】【Promise】

##はじめに

####学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##非同期処理とは
『非同期処理』とは、ある処理が実行されてから終わるまで待たずに、次に控えている別の処理を行うこと。JavaScriptはシングルスレッドでしか動かない性質があるため、複数の処理を並列で走らせることができない。そのため効率的に処理をするために考えられた仕組みが非同期処理と呼ばれるもの。

##Promiseとは
『Promise』とはJavaScriptにおいて、非同期処理の操作が完了したときに結果を返すもの。Promiseは処理が実行中の処理を監視し、処理が問題なく完了すればresolve、反対に問題があればrejectを呼び出してメッセージを表示する。

##Promiseの基本的な書き方
Promiseはre

SortableJSを使ってみる

formrunみたいに「ドラッグアンドドロップで何かしらの成果物を作成する」みたいなHTMLは自分で作れるのだろうか？

と思って色々調べていたら、SortableJSなるものが使えそうだったので使ってみる。

まだ使い始めなので機能とかは全然理解していないけど、メモ程度にここに残していく。予定。

# SortableJSとは
以下を見るよろし。サンプルも同ページにたくさんあるので、基本的な機能はここ見れば十分、なはず。

http://sortablejs.github.io/Sortable/

# 何となく作ってるもの
以下みたいなやつ。


ドラッグアンドドロップで追加できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401295

Tailwind CSSのインストール方法2 〜Purgeとcssnano編〜

[1.はじめに](#1-はじめに)
[2.Purge機能を使ってみよう](#2-Purge機能を使ってみよう)
[3.cssnano使ってみよう](#3-cssnanoを使ってみよう)
[4.開発環境を構築しよう](#4-開発環境を構築しよう)

#1. はじめに
[前回の投稿](https://qiita.com/YSasago/items/8625892876d45d9d4cf4)でTailwind CSSのインスールはできたので、今回はTailwind CSSを最適化していきます。前回の投稿の続きとなります。前回作成した“`dist.css“`ですが、まだ最適化されていないので、18万行位あります。そこで、使っているTailwind CSSを最適化していきます。

* 最適化前のdist.css

#2. Purge機能を使っ

React 入門道場　~Reactを学ぶ上で理解したいES5,ES6~

#　はじめに

Reactの勉強するを前にES5、ES6の違いについて浅はかであったので今回簡単に纏めることにしました。

#　目次
* Javascriptの標準仕様について
* ES6について
* ES6をES5に変換するBabel
* まとめ

#　Javascriptの標準仕様について

JavaScriptの標準仕様はECMAScriptと呼ばれています。
ECMAScriptはECMA Internationalのもとで標準化されているJavaScriptの仕様となっています。

__課題点__
標準化以前は、ブラウザごとに言語仕様の独自拡張が行われていたため、ブラウザ間の互換性が極めて低かったそうです。ECMAScriptが策定されたことにより、ブラウザ間での互換性が向上しました。

現在、大抵のブラウザは、ECMAScript 5.1以上に対応。
ECMAScript 5.1は、略してES5と表記します。

#　ES６について

__ES6は新しいJavaScriptで、今までのJavaScriptを改善したバージョン。
いわゆる次世代JavaScriptってわけで

react-pdfで罫線と文字列をPDF出力する

# 背景
React+Goを使ってWebアプリケーション開発をしております。今回、入力フォームに入力された内容を履歴書としてPDF出力する処理を実装することになったので、Reactのライブラリ「React-pdf」を使用してみることにしました。

公式ドキュメントだけ読んでも解決しない問題があったので、こちらの記事も参考にしてみてください。全角文字の出力には特定のフォント指定が必要です。それについても解説しています。

#この記事で解説する内容
– React-pdfを使用したPDF出力のプログラムソース
– フォント「ナス」のバイナリファイルダウンロード方法

#参考（公式ドキュメント）
https://react-pdf.org
※英語ですがページ全体を翻訳すれば問題なく読めます。

#プログラムソース

プロジェクトフォルダ構成はこんな感じを想定しています。

ProjectName（プロジェクトフォルダ）
　└ backend
　　　└┬ react-app
　　　　　└ src
　　　　　　　└┬ fonts
　　　　　　　 　│　　┝ Nasu-Bold.ttf（フォント

JavaScriptを基本からまとめてみた【13】【非同期処理】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##非同期処理とは
『非同期処理』とは実行した処理の完了を待たずに次の処理を実行する動きのこと。
逆に『同期処理』は実行した処理の完了を待って次の処理を実行する動きのこと。

下記のコードを実行するとアラートで”3″が実行される。

“`main.js
let int1 = 0;
let int2 = 0;
// int1とint2に値をセットする関数
function set_int(a, b){
int1 = a;
int2 = b;
}
// int1とint2を足し算する関数
function sum_int(){
alert(int1 + int2);
}
set_int(1, 2); // 変数に値をセ

【第2回】ブラウザ上で動画をカット編集する

ブラウザ上で動画を表示し、指定した時間でカット編集する方法をメモしておきます。
動画編集はMoviePyというPythonライブラリを用いることとし、環境はAWSのcloud9で作成します。
全2回の構成で、第1回ではMoviePyを使って動画編集を行えるようにします。
第2回では、javascriptでカットする領域を表示するなどします。
間違い等あった場合は、コメントでご指摘いただけると幸いです。

[第1回](https://qiita.com/a_takeeeee/items/d16c5028c96420539333)はこちら。

##1. cut.htmlの作成(前回と同じ)
まずはcut.htmlを書いておきます。

“`html:cut.html
{% load static %}

【第1回】ブラウザ上で動画をカット編集する

ブラウザ上で動画を表示し、指定した時間でカット編集する方法をメモしておきます。
動画編集はMoviePyというPythonライブラリを用いることとし、環境はAWSのcloud9で作成します。
全2回の構成で、第1回ではMoviePyを使って動画編集を行えるようにします。
第2回では、javascriptでカットする領域を表示するなどします。
間違い等あった場合は、コメントでご指摘いただけると幸いです。

[第2回](https://qiita.com/a_takeeeee/items/6a949264995ca246f7b1)はこちら。

##1. 全体概要
###1.1 ディレクトリ構成
project/
　　├ static/
　　　　├ cut.js
　　　　├ main.css
　　├ templates/
　　　　├ index.html
　　　　├ cut.html
　　├ forms.py
　　├ models.py
　　├ urls.py
　　├ views.py

###1.2 完成形
完成形はこのようになります。

【index.html】
![image.png]

【JavaScript】appendChildの使い方

# はじめに
アウトプットが苦手な自分が練習の一環として記事を書いてみる。

第四回目です。

以前にappendChild()を使用して画面にフォームを追加するコードを書いていましたが、
~~しっかり理解して使っているわけではなかった~~ので備忘録としても
JavaScriptでHTMLの要素を追加する`appendChildの使い方`について書いていきます。

※今後、新たに分かったことがあれば追記していく。

# appendChildとは
appendChild()とは特定の親ノードの子ノードリストの末尾にノードを追加するメソッドです。
※似たようなものでappend()がありますが、あちらはjQueryで書く場合に使用するようです。

# 使い方
例としてボタンを押下するとテキストボックスが追加されるコードを作成します。
サンプル画面のHTMLになります。

“`html:サンプル.html

テキストボックス追加

ボタンを押下すると↓にテキストボックスを追加する

GAS 基礎編③　メモ

ドットインストールでGASの勉強をしています。
自分用にコードをメモ。

## Googleフォームと連携する

“`javascript
function sendTask(e) {
MailApp.sendEmail(‘hoge@gmail.com’, ‘タスクが追加されました’, e.namedValues[‘Task’]);
}
“`

上記とは別に、トリガーを設定する。
* 実行する関数　→sendTask
* イベントのソース →スプレッドシート
* イベントの種類　→フォーム送信時

とすると、タスクに自動追加されメールが届く！

## Web上で公開

“`javascript
function doGet() {
var template = HtmlService.createHtmlOutputFromFile(‘index’);
return template.evaluate()
}
“`
## TaskをWEB上で公開

“`html



vue.jsの使い方の基礎＃６【フォーム入力バインディング】

ドキュメントに沿って手を動かしたことを自分用教科書として書いていきます（フォーム入力バインディングの部分）
[公式ドキュメント](https://v3.ja.vuejs.org/guide/forms.html)とやっていることは基本的に同じです。

Vue.js基礎知識に関する記事を随時更新しています。もしよければ参考にしてください。

https://qiita.com/kty000/items/c919e01fc0c118098eb9

#基本的な使い方
formの要素（input,textarea,select）に双方向データバインディング（vueがもつ情報とアプリケーション状態の結びつけ）を付与するために`v-mode`を使用することができます。
`v-model`はフォーム要素の value 属性や checked 属性、selected 属性の初期値を無視します。

>内部的には、`v-model`は異なる input 要素に対し異なるプロパティを使用し、異なるイベントを送出します。

要素が違うなら使うプロパティもちがうわよってことらしい。

##text要素
text

タイトル

j

JavaScriptでもメディアクエリが使えるwindow.matchMediaを関数化して使い回す

## 要約
– [window.matchMedia](https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia)はメディアクエリ文字列を渡して、その条件が切り替わった時にだけ処理を実行してくれます
– いわゆる`debounce()`などで`resize`イベントの間引きをする必要がありません（画面の横幅を使う処理は`resize`イベントが引き続き適切です）
– IE10からサポートされているので、ブラウザの対応範囲を気にする必要はありません（[matchMedia \| Can I use\.\.\. Support tables for HTML5, CSS3, etc](https://caniuse.com/matchmedia)）
– コールバックを実行する関数にして、1箇所でメディアクエリ文字列を管理できます

## ソースコード
– [real\-world\-website\-boilerplate/mediaQuery\.js](https://github.com/yuheiy/real-wo

【GAS】Date()で取得した現在の時間を今日の0時にする

#背景
GASでGoogleカレンダーの情報をなんやかんやしたくて、
**GASをいつ実行しても、「今日の0時0分」が欲しい！**と思いました。
文字列だけ取り出せるけど、Date型にしておきたく、少し悩んだのでメモ。

#もっとシンプルなもの
コメントにて頂きました、シンプルにsetHours利用する方法で良いのですね…！
リファレンスしっかり学びます。
ご指摘ありがとうございます！

“`javascript
const date = new Date();
date.setHours(0,0,0);

Logger.log(date);
“`

:::note info
14:48:40 情報 Thu Aug 19 00:00:00 GMT+09:00 2021
:::

#完成形

“`javascript:Yattane.gs
var strToday = Utilities.formatDate(new Date(),”JST”,”yyyy-MM-dd”).split(“-“);
const todayStartTime = new Date(strToday[

JavaScriptを基本からまとめてみた【12】【関数( function )】

##はじめに

####学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##JavaScriptにおける関数（function）とは
『関数』とは、複数の処理をひとまとまりにしたもの。メソッドと呼ばれることもある。JavaScriptにおける基本的な構成要素のひとつであり、Function型のオブジェクトとして扱われ、関数をオブジェクトとして扱うことが出来るのはJavaScript特有の特徴。

##関数を使うメリット
関数を利用することで目的ごとに処理を分割したり、似たような処理を何度も書かなくて済むようになる。全ての処理を関数を使わずに書いた場合と、関数を使って書いた場合とではコードの文量が何倍にも変わる。場合によっては何倍どころか何十倍、何百倍になることもある。

##関数を定義する
####①

【Handsontable】セル内にプログレスバー(Progress)の表示

# はじめに
IE 11 のサポート終了が2022年6月15日と決まりました。Delphi 5で作成されたWebアプリケーションがあり、Active Xのグリッドを使用しています。Microsoft EdgeのIEモードで動作するとはいえ、IE対応は流石にやめたいです。

WebアプリケーションをASP.NETで作り替えようとしているのですが、Active Xのグリッドにはパーセント表示の際に進捗バーが表示されています。
移植する上で、Handsontableでプログレスバー(Progress)の表示に挑戦してみました。

# 環境
HandsontableはMITライセンス版のバージョン 6.2.2を使用しています。

# Handsontableフォーラムのサンプル
Handsontableフォーラムの質問者の回答に答える形で、JsFiddleにサンプルが作成されています。

https://forum.handsontable.com/t/progress-bar-custom-cell-formatting/1425

http://jsfiddle.net/gaq4y6w4/

30代実務未経験がRailsでオリジナルポートフォリオを作成

# はじめに
こんにちは、Nonaと申します。
31歳でWebエンジニアになることを目標に2021年5月からスクールにてRailsを中心に学習中です。これまで学んできたことをいかして今回Railsにてオリジナルアプリを作成したのでアプリについて説明させていただきます。

##アプリについて
###No Dog,No Life!(犬の同伴がOKな場所の情報共有サイト)
いつでもどこでもワンちゃんと一緒にお出かけをしたい！そんな方のためにワンちゃん連れ OK の穴場の PLACE（公園、お店、施設）情報を共有し合うサイトです。
URL : https://nodognolife.xyz/
GitHub : https://github.com/Naru-hub/PF_NoDogNoLife


##なぜこのアプリを作ったのか？