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

LaravelでFullcalendarに登録した内容を更新する方法

#はじめに
前回に続き、今回はFullcalendarで登録した情報を更新する方法についてご説明します。
[LaravelでFullcalendarを実装する方法](https://qiita.com/yuzuyuzu0830/items/20627eb9dbac7c29dc50)

また、今回はカレンダー上の登録したイベントをクリックするとモーダルが出てきて、そのモーダル上で更新ができるようにします。モーダルでは更新前の情報も確認できるようにしたいと思います。

-各バージョン
-Laravel 6.x
-PHP 7.4.9
-MySQL 5.7.30
-Fullcalendar v5

Fullcalendarはバージョンによって記述方法が異なるので注意してください。
v4の記事を参考にしてもうまくいかないことが多かったです。

なお、フォルダ名とうは登録時に作成したものをそのまま使用しておりますのでご了承ください。

#更新用のモーダルを用意する
モーダルはJavaScriptのプアグインであるMicromodal.jsを使用しました。
モーダルに関しては自作のものではなく、プ

カリー化と部分適用とパイプライン演算子の話。

皆さんアロー関数大好きですよね。
アロー関数かっこいいですよね。

“`Javascript
const plus = (x, y) => x + y
“`

引数を2つ受け取って和を返す関数を作りました。さてカリー化しましょう。
は？カリー化ってなにって感じですよね…

**考えるな、感じろ。**

というわけで理論的な説明は置いといてカリー化を感じてください。

“`Javascript
const curriedPlus = x => y => x + y
“`

さて問題です。関数curriedPlusの説明として正しいのはどちらでしょう？
1. 引数を2つ受け取って和を返す関数。
2. 引数を1つ受け取って(引数一号くんと名付けましょう)、「引数を1つ受け取って引数一号くんとの和を返す関数」を返す関数。

勘のいいあなたならもうお気づきでしょう。答えは２です。

“`Javascript
const curriedPlus = x => (y => x + y)
“`

ほら、関数が返ってるように見えるでしょ？

例えばxに10を代入してみましょう。

“

Firebaseでメールアドレス、パスワード入力なしで「emailVerified」をtrueにする方法

皆さんこんにちは！

今日は、Firebaseの“emailVerified“について書いていきます。

この“emailVerified“はメール認証を行っているかを示すものです。

これでユーザーの動作やページの制御を行えます。

これを行うには“sendEmailVerification“と言う関数を用いるのですが、通常メールアドレスとパスワードの入力を要求されます。

ユーザーからしたらめんどくさいですよね。

また、“emailVerified“はフロントからは変更を行うことができません。

それをメールに送ったリンクをクリックしたらメール認証完了という感じにしたいと思います。

それではやっていきましょう！

#FirebaseFunctionsの設定#

最初にFirebaseFunctionsで独自の関数を作成していきます。

“`functins/index.js
const functions = require(‘firebase-functions’)
const admin = require(‘firebase-admin’)

admi

【Deno】相対パスでファイル操作をするときに気を付けること

# Denoでファイル操作

Denoには標準でファイル操作を行うことのできる関数がいくつか備わっています。
例えば、これらのものです。

“`javascript
Deno.readFileSync(“filepath”) // filepathの読み込み
Deno.writeFileSync(“filepath”) //filepathに書き込み
“`

これらによって、Denoで様々なファイル操作（読み書き・コピー・削除など）が簡単に行えます。
そして、これらの関数の第１引数には対象のファイルパスを入れるのですが、ここには絶対パスだけでなく相対パスも使うことができます。

“`
test/
̩̩├data/
│ └test.txt
└main.ts
“`

上記のようなディレクトリ構成になっている場合、`main.ts`を以下のようにして実行します。

“`javascript:main.ts
const text = Deno.readTextFileSync(“./data/test.txt”);
console.log(text);

export

Optional Chaining のエラーをもう一度整理

前回の反省点として、Optional Chainingに問題をすり替えてしまって、結果、混沌としてしまったです。
よくよく考えれば、ts-loaderもbabelも Optional Chaining はサポートしているのであって、こいつらはローダー君は指定されたバージョンのjavascriptへ変換するのがお仕事です。
つまり、ここが原因でエラーがどうとか話しすと話が混乱するのですな。

ということで、もう一度出力されているエラーを見てみる。

## storybook をビルドして発生するエラー

“`
ERROR in ./src/components/_sandbox/WebGL.vue?vue&type=script&lang=ts& (./node_modules/vue-docgen-loader/lib??ref–12!./node_modules/ts-loader??ref–4-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/_sandbox/WebGL.vue?vue&

【初心者でもわかる】コピペで使えるアコーディオンの実装とボタンデザインパターン3選

# どうも7noteです。CSSでアコーディオンを実装するときのボタンデザイン3選

アコーディオンメニューの実装方法と、ボタンデザイン例を3つ紹介します。
それぞれ特徴の違う**基本的な方法を３つ紹介**しますので、組み合わせたりボタンの種類を変更するなどでオリジナルのデザインを作る参考になればと思います。

もちろん**コピペでそのまま使っても問題ないレベル**のものなので、用途にあわせてお使いください。

## アコーディオンの初期ソースの書き方例

###基本設定

“`index.html

質問１

回答１回答１回答１回答１回答１回答１回答１回答１
回答１回答１回答１回答１回答１回答１。

質問２

回答２回答２回答２回答２回答２回答２。

“`

“`style.css
.acdn dt {
background: #eee;
position: relative;
}
.acdn dt:not(:first-of-typ

useReducerを使って値を変更する機能を実装[React初心者向け]

## React初心者がハマりがちな穴かも
タスク管理アプリを作成するに当たって、useReducerを使ってState内プロパティの値をいじる関数を作ろうとしたところ、いくつかつまずいた点があり、ググってもあまり情報が無かったので備忘録として残しておきます。（’追加’と’削除’に関しては情報多かったけど’変更’に関しては…）
React初心者の方は参考にどうぞ。
ちなみにuseReducerの使い方を１から説明するような記事ではありません。

### やりたかったこと
以下の画像に手書きで記している箇所をクリックすることで文字列を未完了⇄完了と自由に変更できるようにしたかった。なお今回の場合、**完了or未完了はprogressというプロパティ**で管理しています。

### 試した方法
少しまわ

JavaScriptで関数型言語を作ろう(1)

唐突に始まりました．

普段はゲームエンジン[Tonyu System](https://qiita.com/hoge1e3/items/727caca153914e702cb8)を作ってたりします．Tonyuは変数に型づけがないので，一度は型のある言語を作りたいと思っているので，作ってみます．どうせ作るなら純粋関数型言語がいいな，と思って始めます．

一応，これくらいの機能はつける予定です．これらの概念が「何？」という方もその都度説明していくつもりです．

– レコード型
– 共用体
– 高階関数
– 遅延評価
– ジェネリクス

# とりあえず動かしてみよう

まず，こちらにあるサンプルを動かしてみてください．

https://github.com/hoge1e3/tinyfunc/releases/tag/single-2

動かすのに必要な環境は次のものです．インストール方法は各自調べてください．

– node.js / npm
– TypeScript

zipファイルをダウンロード＆解凍したら，解凍したフォルダでコマンドラインを開き，次を実行します．

“`shell

Google Translate API token generator

###python

https://www.github.com/ssut/py-googletrans/tree/master/googletrans%2Fgtoken.py

https://py-googletrans.readthedocs.io/en/latest/

tts tk
https://pypi.org/project/gTTS-token/

[https://gtts.readthedocs.io/en/latest/](https://www.github.com/Boudewijn26/gTTS-token/tree/master/docs%2Fnovember-2020-translate-changes.md)

###javascript

https://www.npmjs.com/package/google-translate-token

tts
https://flows.nodered.org/node/google-translate-tts

### emacs googletranslate
Emacs interface to

Swiperを使ってスライダーアニメーションを実装する〜導入編〜

## はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Swiperの概要、直接ファイルをダウンロードして導入する方法

## 概要

#### Swiper

SwiperはJavaScriptライブラリで、JQueryに依存せずJavaScript単体で動作させることができます。
導入も簡単で多機能のため、多くのユーザーに使われています。

## 導入

Swiperを導入するには、直接ファイルをダウンロードする方法と、CDNのようにサーバに読み込み
に行く方法などがありますが、今回は直接ファイルをダウンロードする方法をご紹介します。

① [公式ページ](https://swiperjs.com/)に移動します。


② Get Startedをクリック

kintoneアプリにqiitaの記事情報を表示する

#出来たこと
kintoneアプリに設置したボタンを押すことで、登録したQiitaの個人用アクセストークンに紐づく記事情報を取得し、記事のtitle・view count・LMGT count・urlをテーブルに表示出来ました。

こんな感じ。

#動機
Qiitaにブログをアップしだしたのですが、現状のviewとLMGTの数が気になりますね。しかし、QiitaのマイページではLMGTしか表示されません。そこで、ボタン一つで取得できるよう、kintoneでアプリを作成しました。
＊こんな時にGUI含めすぐに作成できるkintoneは超便利だと思っています。（作業時間は計2時間くらい）

#事前準備
1. 個人用アクセストークン取得（ログインしていれば、ここから発行できます） https://qiita.com/settings/applic

【10行】Vue コンポーネントをコンポーネントに動的に追加

“`vue:動的に増やしたい子コンポーネント(MyComponent.vue)

“`

“`vue:追加先の親コンポーネント

“`

javascriptでcssの@keyframesを操作する

内容は、■の大きさと色を変化させる、というものです。

１．pタグを生成して\内に配置する
２．@keyframesを記述して、\