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

[JavaScript]サブドメイン許可 url 正規表現 チェック

#はじめに
タイトルが適当でごめんなさい:bow_tone1:
『この正規表現ではこれが通っちゃうよ！』などあれば教えて頂けると嬉しいです。
『この正規表現どこで使うの?』ですが、主にフィッシング詐欺対策かな？と思っています。
どうやって書こうって悩んでしまったので今回qiitaに載せました。:bow_tone1:

#想定URL
今回の『モデル』はqiitaにさせて頂きます:bow_tone1:

○合格のurl例
`http://qiita.com`
`https://qiita.com`
`https://sample.qiita.com`
`https://qiita.com/sample`
`https://qiita.com/sample/aaaa?a=aa`
`https://qiita.com/sample/aaaa?a=aa&b=bb`
`https://b.qiita.com/sample/aaaa?a=aa&b=bb`

×不合格のurl例
`http://a.com/qiita.com`
`https://a.com/qiita.com`
`javascript

年末まで毎日webサイトを作り続ける大学生 〜14日目 DOMのノード関係 + mousemoveを学ぶ〜

##はじめに
初めまして。
年末まで毎日webサイトを作っている者です。
今日もMDNを見て勉強しましたが、実装は違うものを作りました。
DOMを操作して要素ノードをつけたりテキストノードをつけたりです。
というか、ノードについていまいち理解できていなかったので復習しました。
はやりたいことあったけど実力が及ばず・・・今日は残念な仕上がりになりました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は14日目。(2019/11/1)
よろしくお願いします。

##サイトURL
– https://sin2cos21.github.io/day14.html

##前提
覚えておくといいノードは4つです。全部ではないですが、大体これだけ知っていればwebサイト制作には困らないと思います。

1. ドキュメントノード (htmlより上の文書の大元になるノード、よって1つしかない)
2. 要素ノード (pとかdivとか）
3. テキストノード (pで挟まれている文字とか）
4. 属性ノード (idとかclassとか、タグの中に書かれているやつ)

javascript Vue.js + Firebase 教材まとめ

##はじめに
javascriptとVue.jsを勉強する上で有力な教材をまとめました。
GeekSalonの教材以外でも、とてもためになるqiitaの記事やサイトがありますのでどんどん活用しましょう！
ゼミの課題をやり終えてもっと勉強したい人や、基礎的なところから勉強しなおしたい人は、
是非自分の求める教材を探してみてください！
また、後半にはfirebaseの教材のリンクもまとめているので興味のある方は読んでみてください。

##javascriptを学ぶ
– [プロゲート](https://qiita.com/sin_tanaka/items/ea149a33bd9e4b388241) : 基礎, 復習

プロゲートとは、初心者向けのプログラミング学習サービスです。
ブラウザ上でコードを書いて結果の確認までできるため自分のPC内で環境構築などの`準備`をしなくてもいい点が魅力です。
エキスパートコースの教材でもjavascriptの基礎を学ぶことはできますが、プロゲートではとてもわかりやすく丁寧に教えてくれる教材が揃っています。なので、ゼミや

初心者によるプログラミング学習ログ 143日目

# 100日チャレンジの143日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

143日目は、

おはようございます
143日目

udemyで架空のwebサイト制作
新着記事一覧部分

技術書でjavascript学習#100DaysOfCode YYTypeScript#7「他の言語からTSに来てみての感想は？」「チームにTSをどう導入していったか？」「フロント開発環境、Docker使ってる？」「TS開発時の鉄板構成は何？」「Reactのクラスコンポーネントとファンクショナルコンポーネントどう違う？」「フロントエンドで採用すべき、おすすめアーキテクチャ」

これは2019年11月1日に開催したTypeScriptイベント[YYTypeScript#7]のイベントレポートです。

[YYTypeScript#7]: https://yyts.connpass.com/event/151560/
[YYTypeScript]: https://yyts.connpass.com/

[YYTypeScript]は一言で「TypeScripterの部室」です。発表者の話を聞く「一方向的な勉強会」とは真逆で、TypeScriptについて、雑に・ゆるく・ワイワイ話しながらTypeScripter同士の交流を深める「双方向的な座談会」の形式になります。集まった人たちで「今日話たいこと」「聞きたいこと」をいくつか挙げていき、それをテーマに雑談していきます。

__今回の配信動画__

YYTypeScript#7の収録をアップしました?https://t.co/JBRpBL

元記事を表示

vue + webpack の非nuxt環境でコンポーネントをまるっとrequireする

タイトルのまんまです。 `require.context` を利用して、或るディレクトリ配下にあるコンポーネントファイル(.vue）をまるっとrequireしたい。

エントリーファイル（main.js）に次のように記述します。

“`javascript
function requireAll (context) {
const components = {}
context.keys().forEach((_path) => {
const name = _path.split(‘/’)
.filter((s) => !/^\./.test(s))
.map((s) => s.charAt(0).toUpperCase() + s.slice(1))
.join(”)
.replace(/\.vue$/, ”)
components[name] = context(_path).default
})
return components
}

const components = requireAl

元記事を表示

6行HTMLブラックジャック

[上海](https://qiita.com/nagtkk/items/fc1904966d81e9730964)が短くならなかったので気晴らしに。

絵文字版

See the Pen
jOOYNQd by nagtkk (?上海のクリア可能パターン生成

## ?上海?

「上海」とは、積み上げられた麻雀牌の山から、

– 左右少なくとも一方に隣接する牌が無く、
– 上に別な牌が積み重なっていない、
– 同じ柄の牌の組

を取り除いて行き、すべて取り除いたらクリアというパズルゲームです。

基本的には 144枚(数牌+字牌+花牌+季節牌)の牌を使いますが、難易度や盤面設定により様々なバリエーションがあります。牌の積み方も色々。

上海の指南書や攻略サイトなどでは、

– 左右少なくとも一方に隣接する牌が無く、上に別な牌が積み重なっていない牌

のことを、**自由牌**と呼ぶようです。

この定義を使って言い換えれば、「上海」は、

– 積み上げられた麻雀牌の山から、同じ柄の自由牌の組を取り除いて行き、全て取り切ったらクリアというパズルゲーム

ということになります。


## サンプル: とりあえず遊ん

元記事を表示

ゲームをつくる：Cocosでキー入力とスライダーインターフェイスを実装

#この記事は、
ヘックス戦略SLFが好きな筆者が、楽しい戦略SLGを自分で作る記録です。

# この記事のまとめ
– Sliderインターフェースの実装をした
– キー入力インターフェイスの実装をした

[こちらから動くもの](https://storage.googleapis.com/hex_slg/hex_touch_test/index.html)を確認できます。
ヘックスのタッチをどのように検出しているかは[こちら](https://qiita.com/papipu-games/items/d52b4d538e3e8ca8e202)。

## Sliderインターフェースを実装した
カメラのズーム機能をSliderインターフェースで実装します。
Sliderインターフェースは、操作された際にメソッドをコールバックで呼び出してくれるので、
まずそのメソッドをCameraにアタッチしたcc.Componentに作成します。

“`javascript
// **********************************************************

コピペで使うFirebase【Cloud functions編】

# 概要
Cloud functionsを使う際にコピペで動かしたいのでそのまとめです。

**公式ドキュメント**
[Cloud Functions for Firebase](https://firebase.google.com/docs/functions/)
[HTTP トリガー](https://firebase.google.com/docs/functions/http-events)
[Storage トリガー](https://firebase.google.com/docs/functions/gcp-storage-events)
[Firestore トリガー](https://firebase.google.com/docs/functions/firestore-events?hl=ja)
[Authentication トリガー](https://firebase.google.com/docs/functions/auth-events?hl=ja)

# トリガー
– [HTTP](#http)
– [リクエスト](#リクエスト)
– [G

【初心者】JavaScript　while文／for文／配列／length【備忘録９】

##10/29～31で勉強したこと

### while文
-　１～１００までなど、くり返しの処理を行う際に使う。
-　条件式には、「この値まで繰り返し処理を行う」という式を入力する。
【例】let number=1;
while(number <= 100){ console.log(number); number += 1; } ### for文 -　while文をさらに簡単に書く方法があり、forを使った式を使う。 【例】for(let number=1;number <= 100;number +=1){ console.log(number); } 【おまけ】number +=1 を簡略化すると　number++　という入力でも処理が可能。 ### for/ifなどを組み合わせた文章 -　例えば、繰り返しの中で３の倍数だけ処理を変えたい場合は下記のように書く。 【例】for(let number=1;number <= 100;number ++){ if(number % 3 === 0){ console.log("３の倍数"); }else{

js-DAY4-ブラウザで入力されたデータをjson形式でDL

Start making apps everyday as a javascript training.
Everything made by scratch.
Limit to make it this app is 1hour.
Not responsive design, show on the desktop screen.

## About this app
「データベース使わずにJavascriptだけでjsonファイルをいじいじしてDLできたらな」
こう思ったことはありませんか？

このスクリプトはそれを実現します。
javascriptだけでブラウザ上のフォームに入力された値を配列でjsonファイルとしてDLできます。

DAY3までに”ローカルストレージにデータを入力して保持”をできるようになりました。
そこで、「もしこのデータを何らかの形でローカルに保存できれば」と考えていたところ、jsonファイルでのDLが可能になりました。
これで、仮にローカルストレージがリセットされても、jsonファイル形式でデータを保管して置けますね。

使いどころとしては、、、
デー

js-DAY3-簡易アプリで出現するフォームを操作

Start making apps everyday as a javascript training.
Everything made by scratch.
Limit to make it this app is 1hour.
Not responsive design, show on the desktop screen.

## About this app
「ページの移動なくいくつか質問して、その結果次第でデザインを変更したい」
こう思ったことはありませんか？

このスクリプトはそれを解決します。
クイズをいくつか出題し、その結果次第でどんどん枝分かれしていきます。
そして、最後に出現するフォームを変化させます。

ちなみに、今回使用するフォームは実際に送信できちゃいます。
さらに、そのフォームはGoogleフォームを自由にカスタマイズしたものとなっています。
HTML,css,javascriptだけのファイルですが、Googleフォームを連携させることでデータベースなしでフォーム機能を実装できるんです。

> Googleフォームは実際のGoogleフォームのfo

人気のSMS APIをまとめてみた

一般にSMSに短縮されたショートメッセージングサービスは、携帯電話間でテキストメッセージを送信するための一般的な方法です。 電子メールや電話などの他の形式の通信と比較して、SMSの送信には、費用対効果、慎重さ、時間消費の削減、高いオープンレートなど、いくつかの利点があります。

SMS API（アプリケーション プログラミング インターフェース）プラットフォームを使用すると、テキストメッセージを送信し、この一般的な通信ソリューションの利点を活用できます。 たとえば、一部のAPIを使用すると、大量のショートメッセージ（通常はメッセージごとに約160文字）を送信し、世界中の潜在的な顧客に費用対効果の高い方法で製品を販売できます。

次の4つの主要な基準に基づいて、いくつかのSMS APIを検討しました。

•**API機能**：テキス

ARでサイコロを投げるまで ～Blenderを使って３Ｄモデルの作成~JavaScriptでサイコロを動かす～[PlayCanvas / 8th Wall]

# はじめに

前回の記事の続きになります。「[PlayCanvas 入門- モデルの作成～ゲームに入れ込むまで](https://qiita.com/yushimatenjin/items/2a2c35fe7b1d08f9e361)」

# **8th Wallとは**
[8th Wall ](https://www.8thwall.com/)というARのライブラリ / プラットフォームをご存知でしょうか？これは、WebARを簡単に行う事ができるようになるもので、世界初のモバイルWeb用のARプラットフォームです。
表面の検出や照明の検出が出来る マーカレス・任意の画像をマーカーとして 使用すること可能です。

##