- 1. Dropbox Test
- 1.0.1. React bug: disabledにしたボタンがonMouseEnterやonMouseLeaveイベントを妨げる
- 1.0.2. すごいReactパッケージ5選
- 1.0.3. 税込から税抜を求めるには切り上げ?切り下げ?→ケースバイケースで要注意な件
- 1.0.4. JavaScript 文字列を配列に変換する
- 1.0.5. thisなきJS エラーあり
- 1.0.6. 化物語の予告風デザインのホームページを作った
- 1.0.7. Web API DOMとEvent Flowを理解する
- 1.0.8. 【PHP】GET・POST サーバー 作成
- 1.0.9. JavaScriptでGoogle Maps APIを使用する
- 1.0.10. 【はじめての】GASを使ったスクレイピング自動化
- 1.0.11. cdnで読み込んでいたライブラリがからhttpの読み込みができなかった
- 1.0.12. 分かりづらいクロージャ入門
- 1.0.13. 【GAS】年間行事予定表を1年間分まとめてカレンダーに書き込む
- 1.0.14. JavaとJavaScriptの違い
- 1.0.15. フロントエンド開発者のための刺激的なプロジェクト10選 1選目考察【後編】
- 1.0.16. Vueの使い方指南(cdn, vue-cli, nuxt.js)
vuexのgettersでstateをフィルタリングする方法
stateにあるJSONデータ、もしくはactionsで持ってきたデータをフィルタリングする方法。
今回はそもそもバックエンド側でフィルタリングしようねという話になったので、自分の環境では使用しなかった。
でもせっかく組んだし、もったいないので共有します(あんまり使い道は無いだろうけど・・・)“`
export const getters = {
getFilteringList: (state) => (query) => {
// queryの形式を[{key:”,value:”}…]に変換する
let conversion = Object.entries(query).map(([key, value]) => ({‘key’: key, ‘value’: value}))
// 条件に合致したデータを返す関数を定義(every関数なので、全てに合致する必要がある)
function isMatchToAllConditions(data, conditions){
return condit
firebase-admin を用いて最も単純な Firebase Cloud Firestore のデータを取得するコードサンプル
# 動機
Firestore のデータを取得する単純な事例があまり見当たらず、本家の資料を見てもいまいちピンとこなかったので、`firebase-admin` を使った最も単純なコードを書きたくなったため。
# 実行環境と利用ツール
– [Ubuntu 20.04.2.0 LTS (Focal Fossa)](https://releases.ubuntu.com/20.04/)
– [Node.js](https://nodejs.org/en/)
– バージョンは 14.16.0
– [Firebase Admin SDK](https://firebase.google.com/docs/admin/setup)# Cloud Firestore 設定
まずはじめに Firebase コンソール(Web)から `books` コレクションと自動 ID を割り振ったドキュメントを作成します。
内容は極めて単純にしたかったので string 型の `title` というフィールドのみ追加します。
最後、値は `javascript` としています。
完成形の
「;」や「\n」のあるなしで処理が変わるんだと実感した話
##この記事で解決できるかもしれないエラー
`SyntaxError: Unexpected identifier`
JavaScriptだと珍しくないエラーのようです。[Blockly](https://developers.google.com/blockly/)を使っている時にこのエラーが出た際はこの記事が参考になるかもしれません。## プログラムの流れ
### ブロックを作成するファイル
Blocklyを使ってLOGOのようなビジュアル言語を作成しています。
![スクリーンショット 2021-03-29 10.17.54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/31872a10-8c93-90c1-6c53-21bb9e4639a4.jpeg)ブロックの定義はこんな感じ
“`javascript:turtleBlock.js
Blockly.Blocks[‘turtleforward’] = {
init: function() {
this.appe
JavaScriptでDropbox APIから画像を読み込む
とりあえず動いた喜びと感動とメモ帳書きとして
“`html
Dropbox Test
Dropbox Test
let accessToken = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
let dbx = new Dropbox.Dropbox({accessToken: accessToken});
let dir_path = "/Photos"
dbx.filesListFolder({path: dir_path})
.then(functi
React bug: disabledにしたボタンがonMouseEnterやonMouseLeaveイベントを妨げる
# `disabled`にしたボタンの上からすぐ下の要素にマウスポインタを移しても`onMouseEnter`イベントが起こらない
`disabled`にしたボタンのすぐ下に、`onMouseEnter`イベントハンドラを定めた要素が置かれたときに生じる問題です。`disabled`にしたボタンの上から下の要素の領域にマウスポインタを入れても、`onMouseEnter`イベントが起こりません。Chromeで確認されました。
![2103002_001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128949/2848104d-141e-43e3-8289-47470bb066cb.png)
GitHubのReactを見ると、まさにそのものズバリのissue(問題)「[Bug: MouseEnter does not fire when coming _from_ disabled elements](https://github.com/facebook/react/issues/19419
すごいReactパッケージ5選
本記事は、Varun Chilukuri氏による「[Five awesome React packages to check out](https://javascript.plainenglish.io/five-awesome-react-packages-to-check-out-1ee42f2c19f7)」(2020年9月8日公開)の和訳を、著者の許可を得て掲載しているものです。
#すごいReactパッケージ5選
>小さくてもインパクトのある変更で、あなたのアプリを競合他社から引き離します。
![Image for post](https://miro.medium.com/max/700/1*I_JUZpOeDH29bn_YnhvvzQ.jpeg)
##1. React Loader Spinner
待つのが好きな人はいません。今やユーザーは最低限の条件として、ウェブサイトが高速であることを求めています。アプリが重いか遅い場合は、コンテンツの読み込み中、この最新のローディングアニメーションを表示しましょう。アプリの美観を向上させるだけでなく、ユーザーを維持するのにも
税込から税抜を求めるには切り上げ?切り下げ?→ケースバイケースで要注意な件
4月から税込み表示が義務化され、また世のエンジニアが苦労する中、逆に税込から税抜を求めるの思った以上に苦労した話です。
一般的な小売では税込から税抜を求める状況はないと思いますが、相対取引で定価が無い場合は税込価格から決まることはザラです。具体例として`10096円〜10099円`の間の価格でお話ししますと
10097円は÷1.1して**切り捨てた**9179円が正解です。
10099円は÷1.1して**切り上げた**9181円が正解です。なぜなら双方とも誤って切り上げたり、切り下げると共に9180円になり、そこから税込価格を逆算すると10098円一択となってしまい元に値と矛盾するからです。ちなみに
10098円は割り切れる整数なので、切り捨て切り上げ関係なく、9180円の一択になります。
10096円は切り捨てて9178円、切り上げて9179円としてどちらでも良いのですが、それらからの税込み価格の計算は、端数の取扱次第で10095〜10097円まで幅広く解釈することができます。これらを踏まえ実装としては、税抜価格netが最大化する按分になるceilでまず計算してみて、そ
JavaScript 文字列を配列に変換する
配列の要素がダブルクォーテーションで囲まれている場合
```javascript
let arrayStr = '["A", "B", "C"]';
let array = JSON.parse(arrayStr);
```配列の要素がシングルクォーテーションで囲まている場合
```javascript
let arrayStr = "['A', 'B', 'C']";
let array = JSON.parse(arrayStr.replace(/'/g, '"'));
```両方対応
```javascript
let array = arrayStr.replace(/[\[\]"' ]/g, '').split(',');
```# 参考記事
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global
thisなきJS エラーあり
# はじめに
JSでTODOアプリをつくり、そのやり方を教材として書き起こしていた。教材の仕様に沿ってアロー関数をつかったらうまく動作しなくなった。なんだこれは。少しだけ考えた。# 問題
問題が発生したのはTODOの内容をクリックして、既存のタスクを編集する箇所。今までのfunctionではOKだったが、アロー関数にするとなんだかおかしい。# コード
問題点を明らかにするためにその箇所だけを抜き出して別にコードを書いた。「テスト」をクリックするとアロー関数のやつが実行されて、「テスト2」だと普通の関数が実行される。
テストをクリックして、入力フォームのカーソルを外すと「Uncaught TypeError: Cannot read property 'classList' of null」
というエラーが出てくる。
```html:test.html
化物語の予告風デザインのホームページを作った# はじめに
タイトルの通りです。
なんとなく思いついたのでそれっぽいデザインで作ってみました。
モバイル用の実装はしていないのでPCのみです。
コードの書き方とかディレクトリ構成とか色々適当なので分かりにくかったらすみません。
それぞれのページにダミーデータみたいなのを入れてあります。GitHubにありますので良かったら。
[ソースコード](https://github.com/jonsumisu628/bakemonogatari-ish)![2021-03-29-050426_1366x768_scrot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543602/cea3479b-ca59-f8a4-eef6-118d1ae0c884.png)
こんな感じ# 参考
今回作ったものの中身などは特に解説はしませんので、GitHubを見てください。
ですが、制作過程で参考にしたサイトなどを紹介します。## ブログページ関連
- マークダウンファイルをブログ記事として表示する
-
Web API DOMとEvent Flowを理解する
# はじめに
ふと、DOMとは何か理解したくなったので勉強してまとめたいと思います。
DOM全体だとかなり長くなってしまうので、今回はよくある下記のようなコードがどのような仕組みで動いているのか理解したいと思います。```js
let element = document.getElementById('el');
element.addEventListener('click', function() {})
```# DOM: Document Object Model
DOMは、HTMLやXMLを操作するためのインターフェイスです。
XMLに対してDOM操作って個人的には馴染みのないものですね。Webページを表現するHTMLは、あくまで"文書"です。
DOMは、HTMLをオブジェクトとして操作・変更するためのインターフェイスであり、その操作を行う言語がJavaScriptです。
DOM操作を主に使用される言語がJavaScriptなだけであり、DOM操作は他の言語でも可能です。
例えばPHPには、DOM操作するためのクラスが用意されています。
https://www
【PHP】GET・POST サーバー 作成
今回はphpのget・postサーバーの作成について書きます。
正直、今回の記事は自身のメモとしての意味合いが大きいです。
似たようなことが書かれた記事は多いですし、コードの内容も多くないため簡潔に書いていこうと思います。
##実装環境
今回はそんなに手間をかけるつもりはないため、xamppを使用します。
VSCodeを使用してコードを書きましたが、コマンドでビルドが必要だとかいうこともないので、テキストエディターは何でも良いです。
##GET・POST サーバー
```index.php
JavaScriptでGoogle Maps APIを使用する
##はじめに
Maps JavaSctipt APIを使用することで、JavaScript上で独自の画像やコンテンツを使ってカスタマイズしたGoogleマップを画面に描画できたり、Googleマップ上にマーカーを表示したりなど、マップの幅をグッと広げることができます。
[Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/reference/map?hl=ja#:~:text=%E3%82%A6%E3%82%A7%E3%83%96-,Maps%20JavaScript%20API,-%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB)のリファレンスを参照すれば色々な使い方やできることができることがわかると思いますが、今回は、基本となる、Google Mapを画面に描画させる方法を紹介します。##コード紹介
```Google_Maps_API.html
【はじめての】GASを使ったスクレイピング自動化
## はじめに
最近、総務系の業務にGASを使って自動化しちゃお~みたいな記事を多く見かけます。
便乗して普段は**Python**しか使わない私も使ってみたらスクレイピングがとても楽にできて驚きました(GASというよりもJSがすごいような気もしますが)ということで、今回ははじめて**GAS**(Google Apps Script)を使う方向けの記事を書いていきます。
内容は、Webサイトのデータをスクレイピングしてスプレッドシートに格納する処理を毎日自動化するものになります。## 概要
[GAS](https://developers.google.com/apps-script)とは、簡単に言えばGoogleが提供する**JavaScriptベースのサーバーレス**といった説明になるでしょうか。
普通の[サーバーレス](https://aws.amazon.com/jp/builders-flash/202003/awsgeek-serverless/)とは違って言語が決まっている分、実現できることは限定的ですが、限定されている分学習コストが非常に低いことが魅力的だ
cdnで読み込んでいたライブラリがからhttpの読み込みができなかった
# アクシデント内容
サイトがhttpsでcdn先がhttpのライブラリが読み込めなかった# 原因
httpsの規約?でhttpのライブラリを読み込めない
(その旨のエラー文がデベロッパーツールで表示されていた気がする…たしか)# 対処
- ライブラリをDLしてそれを参照する
分かりづらいクロージャ入門
鈴木さんには2回挨拶できるけど、田中さんには1回しか挨拶できない。
そんな場面はなかなかないけど、ボタンを二回以上クリックされたくないときとかに応用できそう〜。``` js
const once = (fn, done = false) => (...args) =>
!done ? (done = true) && fn(...args) : undefined;
const greet = name => console.log('Hello', name);
const greetOnce = once(greet);greet('Suzuki');
greet('Suzuki');
greetOnce('Tanaka');
greetOnce('Tanaka');
```
【GAS】年間行事予定表を1年間分まとめてカレンダーに書き込む
学校の年間行事予定表を1年間分まとめてカレンダーへ書き込むGASです。
Googleが指定するcsv形式で予め作成した予定一覧をカレンダーのインポート機能を使って読み込めば、カレンダーに予定をまとめて書き込むことはできるのですが、それも億劫になってきたので今回GASで一気に書き込めるようにしました。
ごく初歩的な機能だけで十分なため、GASプログラミング未経験者にも理解しやすいコードだと思います。
## 特徴
- 1年間分まとめてカレンダーへ書き込める。
- 特定の日に複数の行事がある場合には行事1と行事2に分けて入力することにより、同日最大2つまで行事を書き込むことができる。
- 行事は全て全日扱いで書き込む。
- 各学校毎に行事予定表のレイアウトが違っても、ダウンロードしたシートに適切にマッピングさせれば幅広く対応可能。## 簡単な使い方
1. [年間行事予定表toカレンダー(公開用)](https://bit.ly/2PcR8e6)をクリックし、コピーをドライブ上へ作成
2. シートの中で変更して良いのは背景が灰色の部分(年度、行事)のみ。行事の入力が済んだら、メニュ
JavaとJavaScriptの違い
#JavaとJavaScriptの違い
まずJavaとJavaScriptは全く違うプログラミング言語です。そもそもこの二つの言語は違う目的で使われます。
#Javaとは
javaは環境に依存せずに開発を行えます。そしてJavaはシステム開発、Web開発、アプリケーション開発と、使える場面が多岐にわたり、さまざまな開発に利用されています。
#JavaScriptとは
Webページの見栄えをよくしたいユーザーが使用して、主にデザインや簡易的な処理をブラウザ上のみで行えるようにした言語。
JavaScriptの特徴は、あまりプログラミングの知識もなく、開発環境がそろっていなくても手軽に始めることができる点です。
# 具体的にどう違うか?
#1 開発した会社が違う
そもそも開発した会社は違うのでその目的や文法、利用される分野も異なります。
#2 目的が違う
Javaは「Write Once, Run Anywhare(一度プログラムを書けば、どんなハードウェアでも動作する)」ことを目指して開発されました。
JavaScriptは、容易に開発できる手軽さと素早さを求めて
フロントエンド開発者のための刺激的なプロジェクト10選 1選目考察【後編】
https://qiita.com/nakada-web/items/25ff6287a04470afb1b3
前編に続き、
https://qiita.com/baby-degu/items/e720c2007716811c8b30
を、考察していきます。プロジェクト1選目は、下記リンクにて確認できます。
https://codepen.io/bnhovde/pen/OJLYGKx
#getBoundingClientRect()
任意の要素の大きさ(height,width)と、ビューポートに対する位置を返す。#clientX clientY
イベント発生時のマウスの座標を返す。
このプロジェクトでは`mousemove`イベントが発生した時にカーソルの位置を取得しています。```JS
// Mouse position
const useMousePosition = () => {
const [position, setPosition] = useState({ x: 0, y: 0 });useEffect(() => {
const
Vueの使い方指南(cdn, vue-cli, nuxt.js)
#tltr
###Vueってどう使えばいいんじゃー
この反応をする人は実は少なくないんじゃないかと思っている。
というのも、Vueは、公式がさまざまな使い方を紹介している反面、決定的な使い方が存在しない。そのため、大きく分けて3種類の使い方が「__トリプルスタンダード__」に存在しているという、__カオス極まりない状態__になっているのが現状。
この記事では、「__そもそもVueとは何か、それぞれの使い方で何が違うのか__」を解説する。
#ざっくりVueとは
###JSフレームワーク
ブラウザ上でJavaScriptをたくさん利用するようになったので、楽にJavaScript扱うために作られたしくみ。
__Vue__や__React__という種類がある。これを利用すると、開発が__めっちゃ楽__