- 0.0.1. 年末まで毎日webサイトを作り続ける大学生 〜61日目 インベーダーゲームのリベンジ〜
- 0.0.2. AzureFunctionsをJavascriptで構築する時の嵌りどころ
- 0.0.3. Vue.js + LaravelでシンプルなSPA構築チュートリアル：VueとAPI結合編
- 0.0.4. Vue.js + LaravelでシンプルなSPA構築チュートリアル：LaravelAPI編
- 0.0.5. Vue.js + LaravelでシンプルなSPA構築チュートリアル：Vueフロントエンド編
- 0.0.6. Vue.js + LaravelでシンプルなSPA構築チュートリアル：概要編
- 0.0.7. Vue.js / Web Speech API で作る、 PWA対応 英単語学習ソフト
- 0.0.8. CAMPFIREのページをモニタリングしてクラウドファンディングの状況をウォッチする – スクレイピング編
- 0.0.9. 【JavaScript/CSS】スクロールしたら順番に要素を表示するデモ（IntersectionObserver使用）
- 0.0.10. ReactNativeについて少し調べてみた
- 0.0.11. React-VisでReact-Friendlyなデータビジュアライズ
- 0.0.12. FullCalendarの使い方
- 0.0.13. A-frameとAR.jsでWebAR名刺をつくってみる
- 0.0.14. アルゴリズムから作る画像認識入門
- 0.0.15. 年末まで毎日webサイトを作り続ける大学生 〜60日目 Closureを学ぶ〜
- 1. Closure
年末まで毎日webサイトを作り続ける大学生 〜61日目 インベーダーゲームのリベンジ〜
##はじめに
こんにちは！@70days_jsです。55日目のリベンジをしようとインベーダーゲームに取り掛かりました。
結論から言うと、当たり検知ができず、まだ未完です。
あと書き方がまずいのか、実行するとpcが唸り出します。61日目。(2019/12/18)
よろしくお願いします。##サイトURL
https://sin2cos21.github.io/day61.html##やったこと
とりあえずgifから↓
こんな感じで、機体を動かせる・敵がランダムに出てくる・ビームが出せる、まではできたんですが当たり検知の方法がどうしても思いつきませんでした。
html↓
“`html
“`前回の反省を生かし、canv
AzureFunctionsをJavascriptで構築する時の嵌りどころ
# はじめに
Javascript初心者がAzureFunctionsの開発を行った際に嵌ったポイントをお伝えしたいと思います。
# 前提
実際の案件概要は以下のような感じです
– 概要：検証用のPoCアプリの開発
– 構成：SPA(Vue.js) + AzureFunctions + CosmosDBでのサーバレスアプリケーション（基本PaaSで）
– ローカル環境:Windows + VisualStudioCode
– 言語：Javascript（フロントエンドとバックエンドで統一したかった）
– 開発時期：2019年8月～2019年11月
※本記事で書いている内容は現在時点でも修正されているかもしれませんし、今後も修正される予定のものも多いので、あくまで参考程度に見てもらえると助かります# 本記事で触れるテーマ
– ベースOSの選択
– ローカル環境構築について
– Proxyを突破する技術
– Lintの設定
– Bindingsの落とし穴## ベースOSの選択
Functionsのリソースを作成する際、事情がない限りはWindowsを指定する形で
Vue.js + LaravelでシンプルなSPA構築チュートリアル：VueとAPI結合編
# はじめに
Vue.jsとLaravelによるSPA実装のチュートリアル記事です。本記事は、４本の連載記事の４本目です。
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：概要編](https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2)
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：Vueフロントエンド編](https://qiita.com/minato-naka/items/9241d9c7a7433985056d)
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：LaravelAPI編](https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5)
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：VueとAPI結合編](https://qiita.com/minato-naka/items/9362ea5af5f823c95b0b)
↑↑今ここ↑↑# 前回まで
Vue.js + LaravelでシンプルなSPA構築チュートリアル：LaravelAPI編
# はじめに
Vue.jsとLaravelによるSPA実装のチュートリアル記事です。本記事は、４本の連載記事の３本目です。
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：概要編](https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2)
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：Vueフロントエンド編](https://qiita.com/minato-naka/items/9241d9c7a7433985056d)
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：LaravelAPI編](https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5)
↑↑今ここ↑↑
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：VueとAPI結合編](https://qiita.com/minato-naka/items/9362ea5af5f823c95b0b)# 前回ま
Vue.js + LaravelでシンプルなSPA構築チュートリアル：Vueフロントエンド編
# はじめに
Vue.jsとLaravelによるSPA実装のチュートリアル記事です。本記事は、４本の連載記事の２本目です。
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：概要編](https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2)
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：Vueフロントエンド編](https://qiita.com/minato-naka/items/9241d9c7a7433985056d)
↑↑今ここ↑↑
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：LaravelAPI編](https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5)
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：VueとAPI結合編](https://qiita.com/minato-naka/items/9362ea5af5f823c95b0b)# 前回ま
Vue.js + LaravelでシンプルなSPA構築チュートリアル：概要編
# はじめに
Vue.jsとLaravelによるSPA実装のチュートリアル記事です。本記事は、４本の連載記事の１本目です。
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：概要編](https://qiita.com/minato-naka/items/2d2def4d66ec88dc3ca2)
↑↑今ここ↑↑
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：Vueフロントエンド編](https://qiita.com/minato-naka/items/9241d9c7a7433985056d)
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：LaravelAPI編](https://qiita.com/minato-naka/items/0e709cb0e6628c82c1c5)
[Vue.js + LaravelでシンプルなSPA構築チュートリアル：VueとAPI結合編](https://qiita.com/minato-naka/items/9362ea5af5f823c95b0b)Vue.j
Vue.js / Web Speech API で作る、 PWA対応 英単語学習ソフト
この記事は[「PWA Advent Calendar 2019」](https://qiita.com/advent-calendar/2019/pwa)の18日目の記事です。
今年の春、Progressive Web Apps や Firebase の練習がてら、英単語学習ソフトを開発しました。
(が、そのまま放置していた)作りっぱなしももったいないので、アドベントカレンダーに乗じてご紹介します。
* [ベーシック英単語800](https://basicenglish800.firebaseapp.com/)
以下のような特徴があります。
* Vue.js を利用したMPA(Multi-page Application)
* Progressive Web Apps 対応。Windows10/スマホにインストールして、オフラインで動作。
* 英単語の発音をクリックして確認できる (Web Speech API 利用)
* Firebase のHosting機能を利用して公開
* 選択肢と回答をランダムに生成。英単語アプリにありがちな「同じ選択肢と回答が繰り返され、出題パ
CAMPFIREのページをモニタリングしてクラウドファンディングの状況をウォッチする – スクレイピング編
クラウドファンディングプラットフォームの大手CAMPFIREさんのWebサイトをスクレイピングして、ファンディング中のプロジェクトの現在の進捗や、パトロン数などをウォッチしたいと思います。
今回はスクレイピング編です。
## 対象とするSPARKSチャンネル
今回はCAMPFIREの中でも、プロトアウトスタジオ x CAMPFIREで現在開催中の`SPARKS by BOOSTER STUDIO`のチャンネルを対象にスクレイピングしてみます。
> Sparks – https://camp-fire.jp/channels/sparks
> 
### 環境など
* Node.js 13.3.0
* axios 0.19.
【JavaScript/CSS】スクロールしたら順番に要素を表示するデモ（IntersectionObserver使用）
## はじめに
Webページで良く見る、スクロールしたら順番に要素が表示される演出のデモを作成してみました。JavaScriptの`IntersectionObserver`を使っています。
## 環境
“`yaml
OS: macOS Catalina 10.15.1
“`
## 結論：デモ
各要素の数字は、`data-delay`を何秒に設定したかです。
参考までに表示してあります。
ReactNativeについて少し調べてみた
# ReactNativeとは？
– Facebook社が開発・公開しているネイティブアプリのクロスプラットフォーム開発フレームワーク
– 言語としてJavaScriptを使用
– `JSX`というXMLシンタックスなライクな書き方ができる
– `Props`と`State`でデータを扱う# JSXとは？
JSXはJavaScriptにXMLライクのシンタックスを追加する言語拡張です。
JSXを使うと、JavaScriptコード中にHTMLタグを埋め込んでいるかのように記述できます。“`javascript:JSX
Hello world!
“`# Propsとは?
– コンポーネントと外部で値をやり取りするためのインターフェイス
– コンポーネントに必要な値を受け取ることができる。
– 状態によって値が変わるようなものはStateに任せるため、Propsは`immutable`で変更してはいけません。“`javascript:props
class Greeting extends Component
React-VisでReact-Friendlyなデータビジュアライズ
## はじめに
この記事は[React#2 Advent Calendar 2019 18日目](https://qiita.com/advent-calendar/2019/react2)の記事です。
タイトル通り、Reactでのデータ可視化に関する内容になっています。
ダッシュボードを初めとしたデータビジュアライズの絡む開発をReactでするなら、React-Visってライブラリもなかなか良いよ！ということで書きました。個人的な背景としては、Reactベースでのプロダクト開発において、Reactのライフサイクルやコンポーネント設計に合わせて作られた可視化ライブラリはないのかな？、と思い探していたところ見つけたのがReact-Visなので、似たような思いをお持ちの方がいたら参考になるかもしれません？（元々は似た理由でrechartsを使っていました）
## React-Visとは？
Uber社のOpen Source Projectの1つで、githubに公開されています。Star 6.6k（2019/12/18時点）でなかなかと思うのですが、日本語記事が探しても見つから
FullCalendarの使い方
# FullCalendarの入手
[FullCalendar](https://fullcalendar.io/)に興味があったので触ってみました。
Googleで引っかかる情報はバージョンが古いようで最新版(4.3.1)で検証してみます。
[FullCalendar-4.3.1](https://github.com/fullcalendar/fullcalendar/releases/download/v4.3.1/fullcalendar-4.3.1.zip)
とりあえず「Get Started」からzip版をダウンロードしてスタート
###今回は，WebARの中の`A-frame`と`AR.js`を使用してAR名刺をつくっていきたいと思います!!!
昨晩から急遽制作した『WebAR名刺』無事に完成しました！！！
宇宙飛行士の3Dモデルがふわふわ動いていたり、カーソル合わせると自分のサイトに遷移したり、割と細かい所までこだわって頑張ったので是非みんな六本木ミッドタウンホワイエA-B間のブースに体験しに来てほしい〜 #ORF2019 アルゴリズムから作る画像認識入門
こんにちは！フミです。
はじめに、この記事は[あくあたん工房のアドベントカレンダー](https://adventar.org/calendars/3951)17日目のものです。
他の方の記事もぜひ読んでみてください。さて、今回は、機械学習無しで作ってみる画像認識システムについて軽く作り方を紹介したいと思います。
画像認識初心者が自分の体験をまとめているだけなので、最適化されたシステムになっていないのでご注意ください。やっていることは課題に特化した処理ですが、画像認識で基礎となる技術をまあまあ使っているので、読んでみても損はないと思います（ホンマか）
## やりたいこと
今回は画像の中からサッカーボールを検出してみたいと思います。
背景は芝生、もしくは白と黒を頻繁に使用しない任意の背景とします。
よろしくお願いします。##サイトURL
https://sin2cos21.github.io/day60.html##やったこと
結論から。
Closureとは？
**変数が定義された環境を保持する仕組み**
という解釈が一番しっくりきました。間違っていたらコメントよろしくお願いします。
とてもシンプルなカウンターを作りました。(gif)↓
html↓
“`html
Closure
Next.jsでenvファイルを使う
## やること
envファイルをNext.jsで使えるようにする。### 必要パッケージインストール
dotenvをインストール“`
yarn add dotenv
“`### .env作成
“`
TEST = HOGEHOGE
“`### next.config.js作成
“`next.config.js
require(‘dotenv’).config()module.exports = {
env: {
TEST: process.env.TEST,
},
}
“`### 読み込む
“`pages/index.js
export default () =>process.env.TEST:{process.env.TEST}
“`
ダミーの入れ物を用意して、それを選択した状態にして、コピーをコマンド操作でしてあげる必要がある。
“`:Javascript
$(‘#btn’).on(‘click’, function(){
const text = ‘sample’;const dummyText = document.createElement(‘textarea’);
const bodyTag = document.getElementsByTagName(‘body’)[0];dummyText.text(text);
bodyTag.appendChild(dummyText);dummyText.select();
document.execCommand(‘copy’);bodyTag.removeChild(dummyText);
alert(‘
CloudFunctionsのhttpCallable()をTypeScriptで型安全に使う【Firebase】
# TL;DR
“`ts:getSanitizedMessage.ts
import firebase from ‘firebase’;
import ‘firebase/functions’;interface GetSanitizedMessageResponse
extends firebase.functions.HttpsCallableResult {
readonly data: {
ok: boolean;
text: string;
};
}const getSanitizedMessage = async (): Promise
=> {
const addMessage: firebase.functions.HttpsCallable = firebase
.functions()
.httpsCallable(‘addMessage’);
const result: GetSanitizedMessageResponse = await addMessage({
text:
Reactで自分で作った英文を保存できるアプリを作った①
Reactを使い作った英文を保存できるアプリを作って見ました。
英文と一緒に日本語での意味も登録できるので非常に便利です。
英文を保存する仕組みに関してはtodoリストを作るときと同じなので割愛させていただきます。
したがって、この記事では英文を保存する以外の機能を説明していきたいと思います。githubに作ったものを載せてあります。
https://github.com/KuRa04/React_makesentenceこのアプリを作るにあたって参考にした記事
https://qiita.com/mikan3rd/items/20152cdd63a708264a9esrc/app.js
//色のボックスをクリックしたら背景が変わる
changeBgColor = (
Vanilla JSなにそれおいしいの？
# はじめに
もうすぐ地獄のクリスマスですね。僕は、AirPodsProとiPadと湾曲ディスプレイとRTX2080Tiと銀魂全巻を買ってもらえれば全然余裕です、はい。
ところで、僕はJavaScriptを始めて一年ちょっとになりますがほとんどReactを書いてきました。しかし、いわゆるPure JSとかVanilla JSとかはほとんど書いたことがなく、javascriptについてフィーリングでなんとかしてきた部分も多くありました。基本的な関数とクラスについて勉強したことをまとめます。# 関数
## 参考書
関数の部分では[こちらの本](https://www.amazon.co.jp/%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88JavaScript%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80-%EF%BD%9E%E3%83%A2%E3%83%80%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AB%E3%82%88%E3%82%8B%E5%9F%BA%E7%A4%8E
