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

Twitter のスクレイピングについて

最近pythonを本格的に取り組み始めた者なのですが、python(もしくはJavaScript) を用いてTwitterで任意のユーザーが呟いたツイートの中で特定の単語を含む物を随時取得したいと考えています。
しかし最近始めたこともあり、スクレイピングに関してほとんど知識が無く、Twitterのスクレイピング禁止規約において、どこまでが許されてどこまでが許されないかがわかりません。
少し調べてみたのですが、twitterAPIを経由して検索欄から特定の単語を検索、抽出するのは規約に違反するのでしょうか？
Twitterの規約に反せず、特定の単語を含むツイートを探す方法を知っている方がおられましたらご教授頂きたいです。拙文で申し訳ございません。

【TypeScript】?プログラミング初心者向け

##はじめに
JavaScriptの基礎をある程度終え、次の開発環境がReactをTypeScriptで書くということだったので一通り学んでみました。
今回は羽山 博さんの[TypeScriptで学ぶJavaScript入門](https://www.atmarkit.co.jp/ait/subtop/features/dotnet/typescript_index.html)を参考にしてまとめました。文章やコードはサイトから引用したものになります。２０１４年から２０１５年に連載されたものなので情報が古い点があるかもしれません。プログラミング初学者向けに書かれた記事だったので大変わかりやすかったです。
詳しい内容などは、サイトを参考にしてください。全部まとめたの結構長いです。３、４日かけて読みました。

##TypeScriptとは
・マイクロソフトが開発したスクリプト言語である。
・オープンソースである。
・TypeScriptのソースコードはJavaScriptのソースコードにコンパイルされる。

###JavaScriptから追加された点
・変数のデータ型をあらかじめ決めておけ

初心者向けReactおすすめ教材

## 概要
本文は年始から業務ではじめてReactを使うことになった筆者が学習に用いた教材を紹介するものです。他の初心者の方の参考になればと思い、記載します。

## 学んだ教材たち
### 無料
#### reactチュートリアル
https://ja.reactjs.org/tutorial/tutorial.html
なんだかんだで公式チュートリアルがわかりやすかったです。

チュートリアルの中にもありましたがこちらを触った後で、一段階ずつ[学べるガイド](https://ja.reactjs.org/docs/hello-world.html)を読んでみたら、及第点をとれるぐらいにreactを理解できているはずです。

### 有料
#### プロゲートReactコース
https://prog-8.com/languages/react

上で紹介したチュートリアルが難しいと感じたのならば、progateで勉強してみるのがいいと思います。最初は無料なのでそこから合いそうか判断し、一月分だけ契約してみるのがいいです（月額税込1078円）。また、この教材も難しいと感じるのなら、j

JavaScript と DOM 応用編

DOMとJavaScriptについて、ちょっと理解できてきたので、より踏み込んだところをまとめて行きます。本記事はUdemyの講座を参考にしたメモです。

UdemyのAngelaさんの講座（英語だけどめっちゃわかりやすいです！） → [リンク](https://www.udemy.com/course/the-complete-web-development-bootcamp/?deal_code=JPA8DEAL2PERCENTAGE&aEightID=s00000016735001)

##addEventListenerでクリックしたときに関数を適用する

例えばユーザーがボタンをクリックした時に特定の処理を実行する際などに使用します。

“`js:qiita.js

//buttonがclickされたらclicked()関数を適用する
document.querySelector(“button”).addEventListner(“click”,clicked);

“`

※addEventListener()の中に入れる関数は（）をつけない。clicked

[ Nuxt.js ] 超基本的なルーティングについての備忘録

# 目的
下記の読者・将来の自分への技術的な備忘録

– 「 Nuxt.js でページのルーティングを実装してみたい 」という方
– 「 あれ？Nuxtでルーティングってどうやるんだっけ？ 」という方

# 目次
– 前提条件
– 実装（ルーティング）
– まとめ

## 前提条件
Nuxtアプリケーションを`「npm run dev」`で開発環境サーバー（”http://localhost:3000/”） が立ち上げられている状態。

### ディレクトリ構成
“`bash
– nuxt-app
– pages
– navi (*今回追加)
– mypage.vue (*今回追加)
“`

*「nuxt-app」は作成したアプリケーション名。
今回、新たに「pages」と「mypage.vue」を作成する。

## 実装（ルーティング）

### 実装手順
1.「pages」のディレクトリ内に「navi」ディレクトリを作成する。
2.「navi」ディレクトリ内に「mypage.vue」ファイルを作成する。
3.「mypage.vue」に下

ChromeのGlobal Media Controlsに情報とコントロールを付ける

Chrome 79で最近[Global Media Controls](https://japanese.engadget.com/2019/12/23/chrome-79/)というのが有効化されるようになりました。
割と前から？テストしていたみたいですが、この記事を書いた時くらいから勝手に有効化するようになったみたいです。
Youtubeの動画を再生すると以下見たいな感じに表示されます。


基本的にはvideoやaudioの様なメディアに反応して出てくるのですが、Youtube以外は再生/停止ボタンしか出ずGoogleだからか？と思いましたが違いました。
スマホでは多分よく使われている[Media Session API](https://w3c.github.io/mediasession/)を使うとデスクトップでも情報として取ってくれま

vueにおいて関数のレスポンシブ化をした話

会津大学でプログラミングを書いてる学生です。

モバイルのときとPCのときで別の挙動をする関数を作った話をします。

## もくじ
– [がいよう](#がいよう)
– [しくみ](#しくみ)
– [こんかいまなんだこと](#こんかいまなんだこと)

—

## がいよう

授業でwebアプリ開発をしていて、その中で**モバイルのときとPCのときで別の挙動をする**ようにしたい状況がありました。

– あるリストがあり、それをクリックするとモーダルウィンドウが開き詳細が見ることができる。
– そのリストはそれぞれ固有のIDを持っている。
– 検索フォームがあり、IDと検索文字が部分一致するリストを返す(?)

てな感じ。ですが、使用する状況がモバイルが多く、**IDと検索文字が完全一致した時に直接モーダルウィンドウを開いたほうが使いやすいという結論に至りました**。

これを関数のレスポンシブ化と呼びます(？？？)。

というわけでいっちょやってみます

## しくみ

“`
if(this.$el.offsetWidth < 670){ ... } ``` 結構力技かもし

初心者による DOM 要素ノードの取得一覧-1

#概要
クライアントサイドのjavascriptにおいて、文書ツリーから要素ノードを取り出すというステップは欠かせない技術です。ここでは、文書ツリーから要素を取得する基本的な手段を一覧にしてみた。

#getElementById()
id=””のように取得したい要素が明確な場合はgetElementById()を使う。

“`javascript:sample.js
document.getElementById(id)
//id: 取得したい要素のid値
“`

id値が複数あってしまった場合は最初に該当された要素１つを返す。

#getElementsByTagName()

上のgetElementByIdとは似ているが、Elementsと複数形になっていることに注意。getElementsByTagNameメソッドは、タグ名をキーにして要素を取得する。

“`javascript:sample.js
document.getElementByTagName(name)
//name: タグ名
“`
これはタグをキーに要素を取得するので、複数の要素が該当する可能性が

Everything you need to know from ES2016 to ES2019 日本語訳

原文はこちら:
[https://inspiredwebdev.com/everything-from-es-2016-to-es-2019](https://inspiredwebdev.com/everything-from-es-2016-to-es-2019
)

こんにちは, shuzonです。

上記のES2016-2019のまとめ記事は非常に良い記事でした。
`英語だから気持ちが乗らず読まない` 人がいると勿体無いなーとふと思い、

日本語で気軽に広く読んでもらいたいなーと思い日本語訳をしてみました。

### 訳者のステータス

– js歴は2年ちょっとくらい
– jquery, vue, reactを少し
– 最新のjsをちゃんと触り始めたのはここ3ヶ月

誤訳や解釈の誤りがあった場合はコメントにて指摘してください。

原文ママの方が伝わりやすいと判断した部分に関しては原文を採用します。

# ちょっとしたメモ

本文中に僕のメモを混ぜ込んでいます。

本文と切り離すために以下のprefixと共に記述します。

– FYI: for your in

非同期通信でTodoの保存を行うアプリケーションのJSを細かくみてみる。

アプリは以下のような物


jsファイル、コントローラー、ビューは以下の通り。

“`todo.js
$(function() {

function buildHTML(todo) {
var html = $(‘

‘).append(todo.content);
return html;
}

$(‘.js-form’).on(‘submit’, function(e) {
e.preventDefault();
var todo = $(‘.js-form__text-field’).val();
$.ajax({
type: ‘POST’,
url: ‘/todos.json’,
data: {
todo: {
content: todo
}
},
dataT

エンターキーでsubmitしたくないフォームをJavaScriptで制御する

入力フォームを選択した状態でエンターキーではsubmitしたくない(送信ボタン等を押下した時だけsubmitしたい)場合、以下JSで制御できる。

“`js

const forms = Array.from(document.querySelectorAll(‘form’)).filter(el => !el.getAttribute(‘data-allow-enter-submit’));
if (!forms.length) return;

for (let i = 0; i < forms.length; i += 1) { const form = forms[i]; form.addEventListener('keydown', e => {
if (
((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) && e.target.tagName !== ‘TEXTAREA’
) {
e.preventDefault();
return

ejectなしのExpoアプリにStripe決済をWebViewを使って埋め込む

決済サービスのStripeをExpoで使用する方法を模索していて、この記事はその一つの実装例です。
最新のStripe APIをJSで使用する際、zaburoさんの下記の記事が参考になりますので、まずは目を通してください。

**(2020年元旦時点で最新の）Stripeの決済をReactで使う**
https://qiita.com/zaburo/items/7d4de7723b6d2445f356

さて、この記事での前提条件はこんな感じです。

* ejectはしない
* `Stripe Checkout`ではなく、`Stripe Elements`を使用する
* 決済は`Charge`方式ではなく`PaymentIntent`を使う
* 当然だけど`Stripe Elements`の中の値には関与しない。つまり、入力をネイティブ領域で行わせてそれをWebViewの`Sripe Elements`に反映するというようなことはしない。（`Stripe Elements`でそれができるのかはわからないが、巧妙に回避されているのは確か）

Expoプロジェクトをejectせずに使用でき

【Nuxt.js】filter実践編：文末を…で省略しよう！

# 前置き

filterを使って
文末を…(三点リーダー)で省略してみます?
**コードの後にそれぞれの
各ポイントで解説をしていきます。**

【考え方】
文字の長さlengthが
・10文字まで(0〜9)はそのまま表示
・11文字目以降(10〜)も続くなら
　　10文字目まではそのまま表示
　　11文字目を…にする

# CSSでもできるよね？
できます！
が、
基準が字数ではなく、行数や幅になります。
https://www.yoheim.net/blog.php?q=20180702

# コード(ローカルver)
sliceが分かりやすいよう
data内テキストは数字の0〜にしました。
では後ろの解説をどうぞ。

“`index.vu

配列の中に空objectがあったら削除する処理

##やりたかった事
今回やりたかった事は何かしらPOSTする時にエンドユーザーが必須項目でない入力欄を空で
submitした際に事前に配列の中身の空objectをdelete処理してPOSTする事。
因みに備忘録です。
##実際の処理
実際にありそうなプロフィール入力だとこんな感じになるのかな？

“`typescript:hoge.component.ts
//入力された項目
const profile = {name : ‘suzuki’, age : ’30’, sex : null, address : null};
//この処理でnullだった場合、空objectを削除
Object.entries(profile).forEach( o => (o[1] === null ? delete profile[o[0]] : 0));
conosle.log(profile);
//{name: “suzuki”, age: “30”}
“`

##まとめ
配列の中の空objectを削除したいってなった時にまぁ安易にif文使おうとしてたのでこういうやり方もあるんだなと勉強に

?【CakePHP2】Fromをsubmitする前にRemodalを表示させる

## 環境
PHP 7.2.21
CakePHP 2.10.18
MySQL 5.7.27

## やりたいこと

Form内容を入力後にRemodalを表示させ、その「OK」ボタン押下をsubmitボタンとしたい

## やったこと

兎にも角にも公式ページよりダウンロード
https://github.com/VodkaBears/Remodal/releases

↓

distディレクトリにある4ファイルをすべて所定のディレクトリに配置する
remodal.min.jsが欠けているとオプションが無効になり
cssが欠けていると当然デザインが壊れる

“`Hoge.ctp


React にて、publicフォルダ内の画像を参照する

# tl;dr
`process.env.PUBLIC_URL`もしくは`window.location.origin`から`public`フォルダのパスを取得できます。

# サンプル
?以下のサンプルは、`create-react-app`直後の`App.js`を編集したものです。

“`Javascript:App.js
import React from ‘react’;

function App() {
return (

);
}

export default App;
“`

# 参考
?[ReactJS and images in public folder](https://stackoverflow.com/questions/4719

OSXでTypeScriptのビルド時に大文字と小文字を区別する

## 起こった問題
ローカル環境（OSX）では通っていたTypeScriptnのビルドが、ステージング環境（Linux）では失敗した。

## 原因
OSXのデフォルトのファイルシステムがcase insentive（大文字と小文字を区別しない）するのに対して、 Linuxの方がcase sensitive（大文字と小文字を区別する）であったため。

UIコンポーネントを開発している時は、モジュール名の先頭を大文字にしていたが、import時に小文字にtypoしてしまっていた。それでもMacの場合は、ビルドが通ってしまう。

*Linux Kernelでもファイルシステムによっては case insentiveになる模様。

## 解決策
一旦はtypoを修正してことなきを得たが、恒久対応をしたい。

`tsconfig.json`のcompilerOptionsで設定できないかなと思ったが出来なかった。

2018年から議論をしているが導入までには至っていないようだった。個人的にはcompilerOptionsで設定出来るようにして欲しい。
[該当のissue](https://gi

Vue.jsのカスタムコンポーネントを拡張する

# Vue.jsのカスタムコンポーネントを拡張する

既存のコンポーネントの機能を生かしつつ、機能追加する方法のまとめ。
Vuetifyの`VTextField`を拡張して、数値をカンマ区切りで表示する入力フィールドを作ります。

## 仕様
* 入力（focus）時は`type=”number”`としてカンマなしの数値を入力する
* 表示（非focus）時は`type=”text”`として3桁のカンマ区切りで表示する
* valueの型は`Number|null`とする
* `v-model`での双方向バインディングが出来るようにする

## ラッパーコンポーネントの作成

まずプロパティ、イベント、スロットを透過的に`VTextField`に渡すコンポーネントを作成します。

### プロパティ

プロパティを`VTextField`に受け渡すために属性の継承を無効化して、`v-bind`を指定します。

デフォルトの挙動はテンプレートのルート要素に属性が継承されますが、`$props`に受け渡されるわけではなく、`$attrs`に直接渡されてしまうため、期待した動作をしません。

M5StickCを使ってブラウザ上で3Dモデルを動かしてみる

# はじめに
[obnizOSを搭載したM5StickC](https://obniz.io/ja/doc/m5stickc/hw_overview “M5StickC”)に内蔵された角速度センサーをコントローラーにして、ブラウザ上の3Dモデルを動かしたいと思います。

ブラウザ上に3Dモデルを描画する方法として、[A-Frame](https://aframe.io/ “A-Frame”)（ブラウザ上に簡単にVRや3Dを作成できるフレームワーク）を使用します。

# 完成品

M5StickCの角速度センサを使ったプログラム。#obniz #M5Stick

javascript基礎 HelloWorldから変数と定数まで

# hello

### ■ コンソールでHello World
“`html:html

“`

“`console:console
Hello World
“`

### ■ 変数
変数・・値を格納する箱

#### ■ let

“`js:main.js
let name = “hoge”;
console