【Rails】Ajaxを用いた非同期フォロー機能の実装

#目標


# 開発環境
・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 前提

ログイン機能を実装済み。

ログイン機能 ➡︎ https://qiita.com/matsubishi5/items/5bd8fdd45af955cf137d

# フォロー機能を実装

### 1.モデル

“`terminal:ターミナル
$ rails g model relationship follower_id:integer followed_id:integer
“`

“`terminal:ターミナル
$ bundle
“`

“`ruby:schema.rb
ActiveRecord:

Vue.js の Composition API における親子コンポーネント間のデータ受け渡し

皆様いかがお過ごしでしょうか。
いろいろと大変な時期ですが頑張っていきましょう。

Vue 3.0 のリリースを目前に控え、今後メインの記法となっていくであろう Composition API における親子コンポーネント間のデータのやりとりにフォーカスについてまとめてみました。
※ 2020 年 4 月現在、 `vue@2.6.11` + `@vue/composition-api@0.5.0` での挙動を元に書いています。

デモサイトを用意してあります。記事の該当する部分と交互に見ていただくと理解しやすいかもしれません。
https://vue-props-samples.netlify.app/
※ 記事内のコードは、装飾用のクラスなどを省略しています。
※ ブラウザ拡張機能 [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) を使うと、コンポーネント内の様子などを確認できるようにビルドしてあります。
※ ソースはこ

?【CakePHP2】js.mapファイルが存在しないエラーの解消法

## 環境
PHP 7.2.21
CakePHP 2.10.18

## やりたいこと
pnotifyを追加したところ、下記の様なJsControllerが無いエラーが多数吐かれていたが動作に問題はなかった
が、このまま放置は良くないので出ないように修正したい

“`error.log
2020-03-04 10:10:58 Error: [MissingControllerException] Controller class JsController could not be found.
Exception Attributes: array (
‘class’ => ‘JsController’,
‘plugin’ => NULL,
)
Request URL: /js/vendor/jquery-pnotify/pnotify.js.map
Stack Trace:
#0 /***/***/***/webroot/index.php(100): Dispatcher->dispatch(Object(CakeRequest), Object(CakeResponse

RailsでjQueryを使う

学習中に作っていたrailsアプリでjQueryを使いたかったのですが、
設定方法があいまいだったのでざっと調べました。
参考にしていただけると幸いです。

# jQueryを使いたい。

## 作業内容
**1.  ’jquery-rails’の導入**
**2.  turbolinksの停止。**
**3.  読み込みの確認。**

### 1.  ’jquery-rails’を導入する
最下行にjquery-railsを記載します。

“`ruby:Gemfile
gem ‘jquery-rails’
“`

### 2.  turbolinksを停止させる
Gemfileからturbolinksをコメントアウトする。

“`ruby:Gemfile
~変更前~
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem ‘turbolinks’, ‘~

TOEIC400点台の僕がどうしてもやりたい英語js教材がありました

…のでやってみました。（※回し者ではありません。）

# 1. やった教材
Wes Bos氏の「javascript30」という教材です。
メールアドレスを登録するとすぐ閲覧できました。

https://javascript30.com/
https://github.com/wesbos/JavaScript30

# 2. Wes Bosと私の出会い
このQiita記事です。（めっちゃ人気！）
https://qiita.com/baby-degu/items/a06bddd1a61b7d907a55

この記事の
> このコースを修了する頃には、JavaScript、DOM、そしてブラウザーAPIを使いこなせるようになっているはずです。

この部分を読んで、「マジか！！！すごっ！！！」となったのがきっかけです。

# 3. この教材の愛すべきところ
## なんといっても無料！
海外のサイトだと、お金払えって言われると少し怖いですもん。

## 「文法理解」から「アプリ開発」へ移行する際のみぞを埋めてくれる！
Wes「基本文法を学んだあとは、たくさんのアプリを作るべきだ！でも何を

後から追加されたhtmlタグのイベント付与について

例題：\

を押したら\

が生成されるDOM(Document Object Model)がある。

１．htmlにイベントを持たせる手法・・・NG

$(“button2”).click(function(){
alert(“2つめクリック”);
});

画面読み込み時にbutton2は存在しないためイベントが付与されない？

２．documentにイベントを持たせる手法・・・OK

$(document).on(“click”, “button2”, function(){
alert(“2つめクリック”);
});

クリックしたときにイベントを付与するため

参考サイト
https://qiita.com/negi/items/6ec0d3cedba499eac81a

Webサイトの読み込み順がよくわからないので少し調べた話

JSの勉強のため調べたのでメモメモ。

【読み込み順】

JSってとりあえずheadタグに書いておけばとりあえず動くって考えてました。

考えなきゃいけない発端が下記のコード。

(Vue.js の記事で書いたコードを少し変えて使用します。)

“`

{{ message }}

“`

`

Node.jsのLambdaでPre-Signed URLを発行する

# Pre-Signed URL
S3はアクセス権を設定することで、誰でもファイルにアクセスできるようにしたり、できなくしたりが可能です。
Pre-Singed URLは誰でもファイルにアクセスできなくしているところに一時的にアクセスを許可することができます。
今回はこのPre-SingedをLamndaで発行してみたいと思います。

# S3
バケットを準備して非公開の設定にしておきます。
テスト用に1つ画像ファイルをアップロードしておきましょう。

# Lambda
今回はNode.jsでPre-Singed URLを発行します。
LambdaからS3にアクセスできるようにロールを設定しておきましょう。

## コード
バケット名、ファイルパスは適宜変更して下さい。

“`js:Lambda
const s3 = new AWS.S3()
const params = {
Bucket: ‘<バケット名>‘,
Key: ‘<ファイルパス>‘,
Expires: 100 // 期限（秒）
}

async function getPresignedUrl(){
re

【JavaScript】テンプレートリテラル

# テンプレートリテラル

**テンプレートリテラル**によって、複数行文字列や文字列補間は驚くほど簡単に実現できるようになりました。

例えば、従来のJavaScriptの構文でHTMLを組み立てようとした場合、おそらく次のようになるでしょう。

“`js
var user = {
name: ‘鈴木太郎’,
age: 25,
image: ‘exapmle.jpg’
}

var html = ”
html += ‘

‘
html += ‘

名前：’ + user.name + ‘

‘
html += ‘

年齢：’ + user.age + ‘

‘
html += ‘

‘
html += ‘‘
html += ‘

‘
html += ‘

‘
“`

いくつもの文字列の連結により、何が

他人に近寄ってはいけない時代に警鐘を鳴らす

「コロナヤベー。誰とも近付かんわ」

あ、会社で一番モテる佳代ちゃんだ。

チュ

![IMG_9366.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com

JSのDOMクエリ(XPath, CSSSelector)で、正規表現を使いたい

XPath, CSSSelectorで、DOMをクエリする場合に、クラス名やコンテンツの文字列で検索したい場合が多い。

“`js
// xpath
document.evaluate(‘//dom[ contains(@class, “abc”) ]’, this, null,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

// css-selector
document.querySelector(‘a[class*=”abc”]’);
“`

単純なクエリでは問題ないが、正規表現が使えると、圧倒的にクエリの表現力が上がる。

`rexpath`を使うと、XPath, CSSSelectorと正規表現を協調させられる。

“`js
document.rexpath([‘and’, ‘//a’, [‘@~’, ‘class’, /tr-item\d+_.+/i]]);
“`

## やるべきことは手短に

独自のクエリ言語を開発するとか、XPath2.0をwebアセンブリで実現するとか、

Androidをペンタブレットにする(3/3)

[Androidをペンタブレットにする(1/3)](https://qiita.com/poruruba/items/7a48fd52aa302bc48caa)、[Androidをペンタブレットにする(2/3)](https://qiita.com/poruruba/items/6a797e8cb7cde166d013)と続けてきましたが、最後にWebブラウザからBLEでAndroidを操作してみます。



すべてのソースコードは以下にあります。

poruruba/sensor_pen_tablet
　

LambdaのオーソライザーでBASIC認証を追加する【言語不問】

[前回作成したサーバーレスLaravel](https://qiita.com/umihico/items/64fcf159f68ebd866170)ですが、BASIC認証を付与しようとしたら躓きました。
**API Gatewayを経由すると、`WWW-Authenticate`ヘッダーがx-amazn-remapped-www-authenticateに置き換えらます。その結果BASIC認証を求めるポップを表示できず無条件で`４０１ Unauthorized`エラーだけを表示するWEBになります。**

つまり問題はLambdaではなく、API Gatewayです。ALBでURLを設定すればこの問題はありません。ALB経由のLambdaを使ったサーバーレスLaravelのBASIC認証は通常のLaravelと同じです。[53eda06](https://github.com/umihico/laravel-demo/commit/53eda06)

API Gateway経由でもBASIC認証を導入するには以下のように変更します。

+ 別途新規のLambda関数を作成し、API

群間のサイズの差の検定方法

を拝見した。こちらの記事は、Sample Ratio Mismatchの詳細についてわかりやすく解説がなされていた。

Sample Ratio Mismatchは以下のようなものだ。

> なぜこれが起こったかを調べたところ、実験開始後に、A/Bテストに割り当てられたTreatmentユーザ数がControlユーザ数と比べて有意に少なかったことが原因でした。それが起こってしまった原因を特定し（後に理由はでてきます）、正しく検証した結果、期待どおりのPositiveな差を検出することができました。
> まさにこの現象のこと、Sample Ratio Mismatch（SRM） と言います。つまり、A/Bテストのために割当したControl / Treatmentの2つの集団で、サンプルサイズが 期待どおりの比率で集まらなかった ことで、誤った結果を導いてしまう現象です。

「Control / Treatmentの2つの集団で、サンプルサイズが 期待どおりの比率で集まったかど

100日後にエンジニアになるキミ – 19日目 – Javascript – JavaScriptの基礎2

今日もJavaScriptの続きをやっていきましょう。

前回はこちら

[100日後にエンジニアになるキミ – 18日目 – Javascript – JavaScriptの基礎1](https://qiita.com/otupy/items/2f71d5f9c754b29d9555)

## プログラム言語の学習方法について

JavaScriptに関わらず
プログラム言語というのは文法を正しく覚えないと
プログラムを正しく動作させることができません。

まず最初はプログラム言語の文法を覚えて
プログラムを書くこと、プログラミングに慣れることを目指しましょう。

学習方法としては
1.資料を見て
2.コードを書く
3.実行してみる
4.正しい結果になっているかを確認する
5.間違っていたらコードを書き直す

を繰り返してゆきます。

これを少しづつ進めてゆき文法を覚えましょう。

ある程度覚えたらコードを書く目的を立ててみましょう
最初は軽めの目標でいいと思います。

・現在時刻を取得して、このタグに表示させる。
・BMIの計算結果を表示できるようにする。

ある程度こなせるように

Next.js + TypeScript プロジェクトに ESLint, Prettier を導入する

みなさんこんにちは。
今回は Next.js + TypeScript のプロジェクトに、ESLint と Prettier を導入してみましたのでそのメモを残します。

# 背景
久しぶりに開発業務で Next.js v9.3.0 と TypeScript v3.8.3 を使ったプロダクトを開発機会があり、改めてイチから環境を構築しました。

TypeScript の構文チェックには TSLint がありましたが、現在は deprecated になっているため ESLint を入れます。

Prettier は v2 がリリースされましたのでv2.0.2 とします。

[TSLint](https://github.com/palantir/tslint)

# ライブラリ
– “next”: “9.3.0”
– “eslint”: “^6.8.0”
– “@typescript-eslint/eslint-plugin”: “^2.25.0”
– “@typescript-eslint/parser”: “^2.25.0”
– “eslint-config-prettier”: “

ドットインストールのJavaScriptおみくじ作成についてふりがなプログラミングしてみた

はじめに

プログラミング初心者のアウトプット学習です。
ドットインストールのJavaScriptのおみくじ作成についてソースコードを簡単に説明してみました。
qiita初投稿につき書き方など未熟な部分もございますがご了承ください。

HTMLについて

“`html

Vue.js イベントハンドリングまとめ

## インラインメソッドハンドラ

簡単な処理であればインラインでメソッドを定義できる。

以下のコードは`button`要素にイベントハンドラ`v-on:click`を設定し、`button`をクリックするたびに`{{ count }}`の値が1増えていく。

“`js:js
var app = new Vue({
el: ‘#app’,
data: {
count: 0 // countプロパティに0をセット
}
})
“`

“`html:html

{{ count }}

Click!

“`

## メソッドイベントハンドラ

先ほどの同じ処理を`methods`オプションで定義してみる

`this.count`で`data`オプションに定義した`count`にアクセスできる

“`js:js
var app = new Vue({
el: ‘#app’,
data:

vueで作ったSPAなWebアプリ「いつめん掲示板」

## 成果物

https://board.itsumen.com/

## リポジトリ

### フロントエンド

https://github.com/yuzuru2/board_front

### バックエンド

https://github.com/yuzuru2/board_back

## いつめん掲示板とは?

フロントエンドをvueで作ったSPAな掲示板です。

※SPA シングル ページ アプリケーション

## UI



## いつめん掲示板を支える技術

### フロントエンド

コロナ対策の３０万円の給付金を受け取れるか、JavaScriptで簡易チェッカーを作る

# はじめに
コロナ対策の給付金に関する概略が出てきました。このご時世、３０万円の給付金を受け取れるかどうかは大きいですよね。

ですが、住民税や年収や均等割など、普段生活している人にとっては聞き慣れない言葉が多数出てきます。
実際、私達はコロナ対策の給付金を受け取れるのでしょうか。受給のための条件をチェックします。

また、前置きは良いからすぐに自分をチェックしたいという人のため、CodePenのリンクをここにも載せます。
https://codepen.io/gurujowa/full/JjYPWax

# 受給条件についておさらい
こちらの東京新聞の記事に、わかりやすい条件のまとめが出ていました。
https://www.tokyo-np.co.jp/article/economics/economic_confe/list/CK2020040802000149.html
![Screenshot 2020-04-08 at 14.54.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2463