- 1. 【Nuxt.js】 asyncDataとfetchって結局どう使うの？
- 2. Excelの資料作成で楽をするためにツールを作ってみた
- 3. あれやこれやしてても、たった3時間ぐらいで簡単なWEBアプリを作ってUnunoで公開した話
- 4. [React]@babel/preset-env と @babel/ransform-runtime を core-js@3 で対応する
- 5. Swipe.js スライド時にイベントを発火させる
- 6. スペース派必見！絶対にインデントにはタブを使ってほしい理由まとめ
- 7. 初心者 アプリ開発
- 8. 初心者によるプログラミング学習ログ 212日目
- 9. WebからFetch APIで取得したファイルをJavaScriptのFileオブジェクトとして扱う方法
- 10. bootstrap-selectのshow/hide
- 11. babylon.js 最初の一歩: シーンを描画する
- 12. 初心者による DOM イベントを使った処理-2
- 13. Next.jsでFirebase analyticsを使用する場合の注意
- 14. 【Firebase】【Firestore】名前にドットや空白など記号を含むフィールドで検索する
- 15. vsCodeにgruntを導入してみた
- 16. 初学者は教材選びが大事
- 17. 画像読み込みマネージャーのようなものを作ってみた
- 18. 【初心者】Vue.jsでタブメニューを作ってみた
- 19. 画像をアップロード前に圧縮する流行りの方法【Vue.js x Firebase x 令和】
- 20. 【PHP】stripe API で定額課金を実装する
【Nuxt.js】 asyncDataとfetchって結局どう使うの？
## TL;DR.
– `asyncData`と`fetch`はコンポーネントがロードされる度に呼び出され、外部からデータを取得する際に使用する
– `acyncData`は外部から取得したデータをページコンポーネントのみで使用する場合に使用する
– `fetch`は取得したデータをVuexのstoreに格納して使用したい場合に使用する## そもそもacyncDataとfetchって何？
– acyncDataとfetchはページコンポーネントの初期化前に呼び出される関数のこと。
– SSR(サーバーサイドレンダリング)、ページ遷移前にも呼び出される。
– 第1引数に`context`(オブジェクト)を取るので、クエリパラメータなどの値にアクセスして処理を行うことができる。
– `context`内で利用できるキーに関しては[API基本Context](https://ja.nuxtjs.org/api/context)を参照
– 一方で、コンポーネントのインスタンスが作成される前に処理が実行されてしまうため、`this`でコンポーネントのインスタンスにアクセスすることがで
Excelの資料作成で楽をするためにツールを作ってみた
# 概要
Excelの資料作成でちょっとでも楽がしたかったので、「Doci」というツールをつくりました。
本記事では、新たに技術を学ぶことではなく、培った知識・経験で日常の課題をいかに解決していくかにフォーカスしております。ですので、コードそのものよりも、「〜〜したいをどうコードに落とし込むか」を中心に書いています。以下に簡単な動作デモを載せます。
### 動作環境
とにかく挫折しないことを目指して、自分が使いやすい形でつくったので、以下のようにゆるい感じになっています。
* PCで使うことのみを想定しているので、レスポンシブ対応は考慮対象からはずしました
* クリップボードにアクセスする機能はブラウザによって挙動がさまざまだったので、Chromeのみに対応する形としました### 各種リンク
* [アプリ](https://a
あれやこれやしてても、たった3時間ぐらいで簡単なWEBアプリを作ってUnunoで公開した話
簡単なwebアプリを1から作って、3時間ぐらいで完全無料ホスティングUnubo公開までたどりついた話をします。
お名前で取得した独自ドメインを設定して、HTML/CSS/JavaScriptを使ったスタティックな簡単なwebアプリを公開しました。
##Unuboとは
[■ Unubo – Cloud deployments made easy](https://unubo.com/)
Unuboとは、Webアプリ、DB、ブログを完全無料でホスティングできるサービスです。完全無料のホスティングを探していて、ここあたりの情報がでてきました。
[■ Node.js,Python,RubyなどのWebアプリを完全無料でホスティング可能な「Unubo」を使ってみた！](https://paiza.hatenablog.com/entry/2019/09/11/Node_js%2CPython%2CRuby%E3%81%AA%E3%81%A9%E3%81%AEWeb%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E5%AE%8C%E5%85%A8%E7%84%A
[React]@babel/preset-env と @babel/ransform-runtime を core-js@3 で対応する
最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！#Babel と core-js の関係のおさらい
>Babelが提供する @babel/polyfill や @babel/preset-env などのモジュールを利用すると
>built-ins objects(Promise, WeakMap等)
static methods(Object.assign, Array.from等)
instance methods(Array.prototype.includes等)
といった新しい機能を使った実装が可能になりますよね。これらのBabelモジュールは core-js が提供するpolyfillを内部的に読み込んでいます。特に @babel/polyfill は core-js と regenerator-runtime を束ねて提供するpolyfill集ですcore-jsのバージョンを指定して直接読み込むます！
古いブラウザをサ
Swipe.js スライド時にイベントを発火させる
Swipe.jsでiphoneライクなTimepickerを実装したので共有します。
出来上がりイメージ図は
こんな感じです。
コードはこちらから確認できます。
[Timepicker using Swiper.js](https://codepen.io/dogoku/pen/zNxKpd)公式ドキュメントはあまり参考ならなかったです。(わたし的に)
[Swiper](https://swiperjs.com/)# 補足
iphoneライクに指でスワイプできるようにすると
どうしてもイベントが発火しなかったので、
泣く泣く指スワイプは外しました。
(実装に成功した方は是非教えていただきたい)ちなみに指スワイプを実装したコードは以下にな
スペース派必見！絶対にインデントにはタブを使ってほしい理由まとめ
**だ・である調チャレンジ！！**
ソースを見やすくする工夫はいくつかある。
そのうちの1つが「インデント」だ。
このインデントについて説明する。
また、この記事でいうタブとは「ハードタブ」で、次のラインに揃えるものである。
# インデントとは？“`JavaScript:JavaScript
let a = Math.random();
if(a < 0.5){ console.log("表"); }else{ console.log("裏"); } ``` クソコードさはどうでもいい。 とりあえず、このサンプルコードでは、見やすくするためにインデントを増やしている。 if文の{}の中が右に来ているだろう。それが**インデント**だ。 もしこのインデントがなかったらどうなるだろう。 ```JavaScript:JavaScript let a = Math.random(); if(a < 0.5){ console.log("表"); }else{ console.log("裏"); } ``` このたった数行のコードでも読みやすさ
初心者 アプリ開発
初めましてプログラミング初心者です
お店の空席確認ができるアプリを作成しています
ログインして席の番号をクリック
jsで席の番号の色が変わるように実装しましたログアウトの機能も実装してあるのですが
リロードした時に番号の色が変わらずログアウトした時のみ色が変わるような実装がしたいです
セッションを使えば実装できるのでしょうか
初心者によるプログラミング学習ログ 212日目
#100日チャレンジの212日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
212日目は
おはようございます
212日目前に作成した模写サイトにjavascript・jQueryで動きをつける試み。アウトプット重視#100DaysOfCodeWebからFetch APIで取得したファイルをJavaScriptのFileオブジェクトとして扱う方法
# 概要
JavaScriptの**[Fetch API](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API)**をつかってWebからファイルをダウンロードしてきて、それを**[File](https://developer.mozilla.org/ja/docs/Web/API/File)**オブジェクト として扱う方法
# やり方
“`javascript
const path=”https://riversun.github.io/img/riversun_144.png”;fetch(path)
.then(res => {
return res.blob().then(blob => ({
contentType: res.headers.get(“Content-Type”),
blob: blob
}));
})
.then(data => {
return new File([dbootstrap-selectのshow/hide
# 検証時の環境
– bootstrap 4.1.3
– jQuery 3.3.1
– Chrome 79.0# 背景
画面ロード時に，状態に応じてbootstrap-selectの表示/非表示を切り替えたく，
“`javascript
$(‘#select’).show();
“`のようにしていましたが，反映されたりされなかったりでした．
# 結果
以下にたどり着きました．
https://stackoverflow.com/questions/44511501/how-do-i-hide-a-bootstrap-select「bootstrap-selectは内部的に複数のbuttonに変換されるので親要素に対して適用すべし」とのことなので，適用しました．
いまのところうまくいっている様子です．
babylon.js 最初の一歩: シーンを描画する
WebGL フレームワークに Microsoft の人が作った [babylon.js](https://www.babylonjs.com/) というものがあります。
今回はそれを使ってまず 3D シーンを描画するまでの最初の部分をどう作っていくか紹介します。
今回の完成図↓
See the Pen
初心者による DOM イベントを使った処理-2
#イベントリスナー/ハンドラーの削除
イベントリスナー/イベントハンドラーは設定することしかできなかったが、削除もできる。##イベントハンドラーの削除
イベントハンドラーはイベントリスナーよりも簡単に削除できる。これは、onXXXXメソッドに対してnull値を代入するだけである。“`html:sample.html
“`
“`javascript:sample.js
window.addEventListener(‘DOMContentLoaded’, function() {
let btn = document.getElementById(‘btn’)//イベントハンドラーを登録
btn.onCLick = function() {
window.alert(‘Hello!, Javascript!’)
}
//イベントハンドラーを破棄
btn.onClick = null
})
“`##イベントリスナーの削除
Next.jsでFirebase analyticsを使用する場合の注意
## 概要
Next.jsにanalyticsを導入時に起きた問題を投稿します。## 現象
Next.jsなどでanalyticsを使用する際にサーバー側でエラーが発生する。## 理由
analyticsの内部でwindowが呼ばれていたため## 解決法
“`js
if (process.browser) {
firebase.analytics().logEvent(<イベント名>);
}
“`
【Firebase】【Firestore】名前にドットや空白など記号を含むフィールドで検索する
Firestoreではフィールド名にドットや空白など記号を含めて保存することができます。
“`javascript
let db = firebase.firestore();
const testdata = db.collection(“data”).doc(“test”);const doc = {normal:true, map:{}};
doc[‘dot.test’] = true;
doc.map[‘normal’] = true;
doc.map[‘space test’] = true;
doc.map[‘123456’] = true;db.collection(“data”).doc(“test”).set(doc);
“`保存されたデータ↓
#概要
各種jsのcombine(結合)及びminify(難読)を行うためのツールで他にも有名どころとしてgulp、google closure compilerがある。
visualStudioCodeで作業することが多かったため、vsCodeへの導入をメモ#導入手順
※導入するプロジェクトファイあるのルートを開いた状態でスタートすること1. Node.jsをインストールする
（vsCodeでnpm, nodeが使用できるようになる）
（Node.js）https://nodejs.org/en/
LTSの方をインストール2. Node.jsがインストールできたら、vsCodeを再起動する
3. vsCodeのターミナルでgrunt-cliをインストール
npm install -g grunt-cli4. フォルダにgruntをインストール
(初回のみ gitにコミット済みであればスキップ)
場所は、プロジェクトのルートがいい（srcと同じ階層など）
npm install grunt -save-dev
grunt -Vでverが確認できればおｋ5. Gr
初学者は教材選びが大事
#前回のあらすじ
・新人プログラマ向けの本が分かりづらすぎて学習効率が下がってた
#今日やったこと
・if文とswitch文を使って、コンピューター様とじゃんけんするプログラムを作った
（今回の教科書『いちばんやさしいJavascriptの教本』)
（学習環境 エディタ→メモ帳 ブラウザ→EDGE）
#困ったこと
・エラーが２箇所出て、場所の特定に難航した
特定方法→ブラウザのコンソールツールを見つつ、前後４行くらいを教本と見比べていく
・原因その１
===記号のつけ忘れ
・原因その２
教本の誤植（プラス記号の抜け落ち）
本のHPを見て判明
#感想
古めの版年に出た本を使って学習すると、誤植に振り回されるなぁと思った。
ランダムに数を生成するメソッド「Math.random()」は応用が利きそうだなァと思った。
エラーがでたとき、落ち着いて対処できるようになりたいと感じた。
#次回の目標
・関数について再学習しよう
画像読み込みマネージャーのようなものを作ってみた
#概要
jsで画像などを読み込む必要がある状況で、
複数データを読み込んで、ロードの終了を待ちたいというような状況がある
ロードを管理し、終了とロード状況を管理してくれる簡易的なものを作成してみた#前提
“`
main.js //制御するもの 画面ごとに用意するものobjController.js //画面に配置するオブジェクトを制御するもの
loadManager.js //今回作成するロードを管理するマネージャー
“`#createJSにおけるロード
“`
objController.jsfunction createLoadQueue() {
return new createjs.LoadQueue(true, null, true);
}var _manifest = [];
_self.loadFile = function (loaderIndex) {
var loader = createLoadQueue();
loader.index = loaderIndex;
load
【初心者】Vue.jsでタブメニューを作ってみた
最近、Vue.jsを勉強しています。
練習として、タブメニューをつくってみました。# Vue.jsの導入
以下のコードでVue.jsを導入します。
HTMLファイルのbody内に記述します。
``# JavaScriptを記述する
HTMLファイルのbody内のscriptタグ内に、以下のコードを記述します。“`javascript
new Vue({
el: ‘#app’,
data: {
active: 1
},
methods: {
change: function(num) {
this.active = num;
}
}
})
“`## 変数
`active` という変数を用意しています。
どのタブが選択されているのかを代入します。## 関数
`change` という関数を用意しています。
他のタブが選択されたときに用います。
`active` に、選択されたタブの番号を代入します。
画像をアップロード前に圧縮する流行りの方法【Vue.js x Firebase x 令和】
こんにちは。年末年始はずっとFirebaseを触っていました @ykhirao です。たぶん3年くらい遅れて流行に乗り始めています。Typescriptお正月にはじめました。
今日は、仕事がお休みなのでスマホぽちぽちしていたらすごく参考になる記事を見かけましたのですが、こちらの記事 [Firebaseで作る！リアルタイム画像変換CDN【Firebase Hosting + Cloud Functions】 – AppBrew Tech Blog](https://tech.appbrew.io/entry/2020/01/15/120000) で書かれている `アップロードされた画像をそのまま表示する時代は平成とともに終わりを告げたわけですが[※要出典]` という文言を見てくすっと笑ってしまい、少し前に [君はまだ平成のアーキテクチャを使ってるのか？僕はFirebaseと令和の時代に行くぞ。](https://qiita.com/hecateball/items/c55b6811835923fb9574) という記事がたくさんの方に読まれていたこととか、Twitterの擬人化された
【PHP】stripe API で定額課金を実装する
#はじめに stripeとは
stripeは、クレジットカードなどの決算処理を代行してくれるサービスです。
シンプルな実装で決済処理を実現でき、カード情報を自社サーバで持たなくても良いなどの特徴があります。大まかな流れとして、
1. サービスの請求モデルを作成
2. フロントサイドでカード情報を取得
3. バックエンドで顧客登録、決済処理と進んでいきます。
#サービスの請求モデルを作成する
##1. stripeに登録する
###1-1.はじめに、[stripeの公式ページ](https://stripe.com/jp)にて、今すぐ始めるをクリック。
###1-2メールアドレス、名前、パスワードを入力登録。
なお、テスト用に登録
