- 1. [Vue.js] どうしてVue.set()で配列の更新が検知できるの？
- 2. [超簡単] Reactからfirestoreにアクセスするデモ！
- 3. グループ分けアプリを作って護廷十三隊を分けてみた
- 4. 初学者がつまずくJavaScript
- 5. 初心者によるプログラミング学習ログ 231日目
- 6. VS Code で ESLint × Prettier のベストかも知れないプラクティス
- 7. JSONの基礎の基礎
- 8. Ruby、PHP、Java、JSでの書き方の違い
- 9. Nuxt で description をデフォルト設定していないのに、謎の値が入る
- 10. GASがV8エンジンに対応したのでドキュメント読んだ
- 11. 一瞬でJavaScriptのfor文が爆速になった話
- 12. Vueとaxiosを使って外部APIからデータを取得する
- 13. [js]配列の中身がObjectのとき、特定の要素があるかチェックするうまい方法
- 14. 【Rails】フォームにフォーム外のファイルを追加しようとしたらJavaScriptをめっちゃ書くことになった
- 15. JavascriptでDOM生成したフォームは別の関数スコープで作成しないと要素を取得できない
- 16. JestでHTML5 FileAPI を使ったテストをする方法
- 17. 【2020年2月】プロジェクトごとのnode.jsのバージョンを、direnv+nvmで【強制】【固定】
- 18. 中間テーブルとは？？
- 19. HTML+CSSコーディングの言語化
- 20. KintoneとJavaScript 即時関数
[Vue.js] どうしてVue.set()で配列の更新が検知できるの？
[[Vue.js]配列の変更が検知できない理由の「JavaScriptの制限」って何よ！ – Qiita](https://qiita.com/kozzzz/items/feb5e0a16d6f1fad08e8)
こちらの記事で配列の更新検知には`Vue.set`を使うと記載したのですが、
どうして検知できるのかな？って思って調べました。## 結論
内部では`splice()`をしているだけだった。## 実装を見てみる
公式[GitHub](https://github.com/vuejs/vue/blob/6fe07ebf5ab3fea1860c59fe7cdd2ec1b760f9b0/src/core/observer/index.js#L209)を見てみましょう！ :eye: :eye:“`js
export function set (target: Array| Object, key: any, val: any): any {
// 中略
if (Array.isArray(target) && isValidArrayIndex(key
[超簡単] Reactからfirestoreにアクセスするデモ！
firebase初心者のアクマちゃん([@akumachanit](https://twitter.com/akumachanit))デモ！
firebaseめちゃくちゃ簡単で楽しいからみんなもやってみるデモ！
今日はReactからfirestoreにアクセスする手順を説明するデモ〜〜〜！#今回やること
1. firebaseをReactアプリに**インストール**する
2. **firebaseプロジェクト**を作成する
3. **データベース**を作成する
3. **接続用コンポーネント**を作成する
4. データを**出し入れ**してみる1と2はすでにやってある人は飛ばしていいデモよ！
#firebaseをReactアプリにインストールする
Reactアプリのディレクトリで`npm install`するデモ“`terminal
npm install firebase@latest
“`#firebaseプロジェクトを作成する
説明しなくてもわかると思うけど、コンソール入ってプロジェクトを追加！
##CSVを読み込んで画面に表示する
[こちらの記事](https://www.sejuku.net/b
初学者がつまずくJavaScript
**こんにちは。ばーんです**
今回は前回行ったfizzbuzzゲームとズンドコキヨシを実践した感想を纏めていきます。
自身のJSレベルがProgateを終えたところなので、かなり苦戦しながら進めました；；特に自身の経験でつまずいたところを解説していきたいと思います！
それではいってみましょー！^o^/
(fizzbuzzの記事は[こちら](https://qiita.com/baan_nasebanaru/items/cf145c1e58c97c74aab4)。ズンドコキヨシの記事は[こちら](https://qiita.com/baan_nasebanaru/items/fd39e95e38de61295797))#はじめに
今回つまずいた6人衆はこちらっ！
**「アロー関数、戻り値、引数、配列**、オブジェクト指向、テストコード」解説する（できる）のは前の4つです。あとの2つは概念程度しか理解できていないので、おいおい試して分かり次第記事にしたいと思います。
正直前の4つはProgateで学習してる時も「これやばそうだな…」という感じがむんむん出てたんですよね…
初心者によるプログラミング学習ログ 231日目
#100日チャレンジの231日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
231日目は
おはようございます
231日目
・udemyで、css+javascript講座
・webサイト部分的模写#早起きチャレンジVS Code で ESLint × Prettier のベストかも知れないプラクティス## 前書き
餅は餅屋と言う事で、コードフォーマットは `Prettier` に任せ、`ESLint` には静的解析だけを担当させると言う棲み分けが昨今の風潮ではないかと思います。
しかし VS Code には拡張機能でも `ESLint` や `Prettier` が用意されており、`npm` 等でインストールされるそれらとの関連がややこしい。
と言うわけで、 **「いろいろ突き詰めればいろいろあるけどとりあえずこれで良くね？」** と言うやり方をご紹介します。チーム・組織や案件によってニーズやルールは異なるのは当然ですが、ごくごくシンプルに決まったルールでフォーマットと lint をやってくれればそれでいいんだ。と言う人向けです。
## 前提
前提として、VS Code に
– [ESLint 拡張](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
– [Prettier 拡張](https://marketplace.visualstudio.com/items?iJSONの基礎の基礎
JSONは、Java Script Object Notationのこと。テキストベースのデータフォーマット。
JavaScriptのオブジェクトとほぼ同じ形式であり、例えば下記のJavaScriptオブジェクト。
“`javascript
var schoolOne = {
hensachi: 60,
students: 260,
name: “ichi-koukou”}
“`
これを、JSONにすると
“`javascript
{“hensachi”: 60, “students”: 260, “name”: “ichi-koukou”}
“`
こんな感じになります。簡潔に短くなりました。
JavaScriptのオブジェクトをJSONに変換する方法はこちら。
“`javascript
JSON.stringify(schoolOne);
“`
これで、JSONに変換されました。
逆に、JSONをJavaScriptオブジェクトに変換する場合は
“`javascript
//まずJSONに変換したものを変数に入れ
Ruby、PHP、Java、JSでの書き方の違い
##はじめに
「Rubyでプログラミングの基礎を学んだから、次はjsやってみようかな！」
↓
「書き方ごちゃごちゃになって、何が何だかよくわかんねー！！」こんな人もいるのでは？
僕自身も以前、詰め込みすぎでパンパンになりましたので、書き方の違いをわかりやすくまとめてみました。
一つ一つ覚える必要はありませんので、この記事を、ストックしていただければと思います。
オブジェクト指向の理解も多少深まると思いますので、最後までご覧ください！## 文字出力
基本となる文字の出力。言語によって処理のされ方が違うので難しいところですが、基本なのでしっかり押さえましょう。Javaはやっぱり記述が長いですねw“`ruby:
#Ruby
puts “こんにちは”
“`
“`php:
#PHP
echo “こんにちは”;
“`
“`java
//Java
System.out.println(“こんにちは”);
“`
“`javascript
//JavaScript
console.log(“こんにちは”);
“`## 変数代入
プ
Nuxt で description をデフォルト設定していないのに、謎の値が入る
## 解決策
`nuxt.config.js` の `plugin` にて `meta` プロパティをオフにする
“`
…,
[‘@nuxtjs/pwa’, { meta: false }],
…,
“`もしくは、 `@nuxtjs/pwa` を使わない。
## 前提
+ Nuxt.js v2.8.1
+ @nuxtjs/pwa## 起こったこと
`nuxt.config.js` で、metaタグの `description` を設定していないのに以下のようなタグが append される
“`html
“`## 原因
`@nuxtjs/pwa` が README.md の値を append していた
この時の `README.md` の `—` の値が使われていた。。
“`
# Project title—
some text…
“`
## @
GASがV8エンジンに対応したのでドキュメント読んだ
# GASがV8エンジンに対応したのでドキュメント読んでみた
公式のV8移行ドキュメント
[Migrating scripts to the V8 runtime](https://developers.google.com/apps-script/guides/v8-runtime/migration)
を読んだのでメモだいぶテキトーです。
– [GASがV8エンジンに対応したのでドキュメント読んでみた](#gas%e3%81%8cv8%e3%82%a8%e3%83%b3%e3%82%b8%e3%83%b3%e3%81%ab%e5%af%be%e5%bf%9c%e3%81%97%e3%81%9f%e3%81%ae%e3%81%a7%e3%83%89%e3%82%ad%e3%83%a5%e3%83%a1%e3%83%b3%e3%83%88%e8%aa%ad%e3%82%93%e3%81%a7%e3%81%bf%e3%81%9f)
– [経緯](#%e7%b5%8c%e7%b7%af)
– [適用方法](#%e9%81%a9%e7%94%a8%e6%96%b9%e6%b
一瞬でJavaScriptのfor文が爆速になった話
AtCoder初心者のアクマちゃん([@akumachanit](https://twitter.com/akumachanit))デモ！`for`文を早くする方法を見かけたので試してみたデモ！
#三行で
– `i++`を
– `i=(i+1)|0`に変えると
– **爆速になったデモ**#実演
“`js
// これを
for (i = 0; i <= H; i++) { // 省略... } // こうしただけ for (i = 0; i <= H; i=(i+1)|0) { // 省略... } ```  *えっ...* *メモリも...* #なんで？ なんでも処理系に型を認識させることで速度が上がるらしいデモ。 詳しいことはこれから調べるからワガハイには聞かないでくれデモ...笑 環境によって差異とかあっても当悪魔は一切関知しない
Vueとaxiosを使って外部APIからデータを取得する
“`js
new Vue({
el: ‘#fetchUsers’,
data: {
users: []
},
mounted() {
axios.get(‘/users’)
.then(response => (this.users = response.data))
}
});
“`
“`html{{users}}“`
結果
“`
{userId: 1, userName: sato}, {userId: 2, userName: tanala}
“`
[js]配列の中身がObjectのとき、特定の要素があるかチェックするうまい方法
配列の中に特定の要素があるかチェックする方法はいくつかあります。
ここではpersonsというオブジェクト要素を複数もつ配列で考えてみます。まずは、まあよくある書き方
##例１
“`js:sample.js
const persons = [
{name: ‘takada’},
{name: ‘yamada’},
{name: ‘tanaka’},
]
const target = ‘takada’let hasTargetName = false
persons.map((person) => {
if (person.name === target) {
hasTargetName = true
}
})console.log(hasTargetName) //trueが表示される
“`for文でもいいですが、mapを使って配列の要素を見ていって、targetと一致するものがあるかを調べています。でもなんか、すごく原始的な感じがして嫌だ。。。
##例2
調べてみると**includes**というのが
【Rails】フォームにフォーム外のファイルを追加しようとしたらJavaScriptをめっちゃ書くことになった
# 概要
Railsのフォーム送信は色々いい感じにやってくれるが、少し変えたい時もある。
僕はフォーム外からファイルを追加したかった。そういう時は、rails-ujsのajaxイベントハンドラを使うとフォーム送信に要所で割り込める。
[Working with JavaScript in Rails#3.5 Rails-ujs event handlers](https://guides.rubyonrails.org/working_with_javascript_in_rails.html#rails-ujs-event-handlers) ※ Rails 5.1以降の機能以下、これを使ってフォーム外のファイルをフォーム内容と同時送信する例を紹介する。
## やりたいことの例
本来フォーム内の`name`だけ送信されるところ、フォーム外からファイルを追加送信したい。
ここでは仮に、フォーム外の`newImageFiles`に画像ファイルを入れてあり、フォーム内容と一緒に送信したいという前提で話を進める。“`erb
<%= form_with model: [:use
JavascriptでDOM生成したフォームは別の関数スコープで作成しないと要素を取得できない
選択ボックスの値を取得したり、操作するために使われるgetElementByIdの解説が充実しているサイトは数多くありましたが、基本的にhtmlファイルにベタ打ちで書かれたフォームに対する操作を前提としたものです。
#getElementByIdのおさらい
例えば
“`form.html
“`
と言う形でプルダウンリストを作成することが出来るが、以下のjavascriptでリストの中身を取得することが可能である。
“`form.js
var elm = document.getElementById(‘musume5’);
“`ここまではどこにでも書かれている。
#リストをD
JestでHTML5 FileAPI を使ったテストをする方法
# 概要
– HTML5 FileAPIのFileオブジェクトを使ったテストをJestで行う方法について書きます
# 前提
– Jestではフロントエンド アプリのテストもテスト時にNode.js用にコード変換して実行する
– この特性のため、Node.js用にブラウザ用のAPIをがんばって再現してる(JSDOM等つかって)
– なるべく~~Node.jsに媚びたコードを書かず~~フロントエンドのお作法だけでテストを書きたい# FetchしたファイルをHTML5 Fileとして取り扱う方法
**やりたいこと**
Fetch APIを使って、あるURLからファイルをダウンロードしてきて HTML5 File APIのFileオブジェクトとして取り扱い、それをJestしたい。
## node-fetchをインストールする
フロントエンドでおなじみのFetch API (window.fetch) はNode.jsには無いので、似た機能を提供する[**node-fetch**](https://www.npmjs.com/pac
【2020年2月】プロジェクトごとのnode.jsのバージョンを、direnv+nvmで【強制】【固定】
# プロジェクトごとにNode.jsのバージョンが異なって辛みマシマシ
そんな時は以下の処方箋がおススメ。
例えば node.js 10 を強制的に使用する場合は以下のようにプロジェクトのフォルダ直下に`.envrc`ファイルを作成し、nvm で `10` を指定しておきます。“`bash:.envrc
[[ -s ~/.nvm/nvm.sh ]] && . ~/.nvm/nvm.sh
nvm use 10
“`で、コマンドから direnv を有効にします。
“`bash
$ direnv allow .
“`以上！
## direnv、nvm のリンク
– [nvm: Node Version Manager](https://github.com/nvm-sh/nvm)
– [direnv: unclutter your .profile](https://direnv.net/)
– [direnv | Github](https://github.com/direnv/direnv)
中間テーブルとは？？
## プログラミング初学者が学習する中間テーブルについて
– Railsなどのフレームワークを学習していて『中間テーブル』という言葉がよくわからなかったので備忘録も兼ねて解説します！ （初投稿なので温かく見守ってください泣）– [x] 中間テーブルってなんなの？？
– [x] 具体的な使い方## 中間テーブルってなんなの？？
中間テーブルとは・・・データベースで、テーブルとテーブルの多対多の関係を表すテーブルのこと。これだけ言われてもパッとしないかもしれません。イメージしてみましょう！
#### データベースにuserテーブルとgroupテーブルというのが存在すると仮定します。
*userテーブル*
| id | name |
|:————–:|:————–:|
|1|山田|
|2|佐藤|
|3|鈴木|
|4|田中|
|〜|〜|*groupテーブル*
| id | group-name |
|:—-:|:————:|
|1|Aグループ|
|2|B
HTML+CSSコーディングの言語化
はじめに
==================================================HTML＋CSSコーディングにおける制作者の思考や判断、アプローチ、コード化に至るまでの流れなどを分解し、コードの状態なども含めてそれぞれを短い言葉で言語化しました。
以下のような効果が期待できます。
* HTMLとCSSを使っておこなってきた事を客観視・再認識できる
* 始原的な動機を把握することで、手法を別の視点で捉えられるようになる
* 認識合わせや熟練度確認に利用し、制作時のコミュニケーションを円滑にする場合によっては、ぼんやりと捉えていたことや、詰まりやすかったポイントなどがハッキリと認識できるようになるかもしれません。
言語化の概要
————————————————–まずは、**全体像が分かる概要図**を掲載します。
この記事は、以下のステップと各項目について順に説明するものになります。で以下の様に述べたのですが、”終えた”は言い過ぎだったような気がして修正しました。失礼しました。
> 即時関数という仕組みがありましたが、役割を終えた感があります。先日こんなものを見つけました。[kintone JavaScript APIのイジりかた](https://developer.cybozu.io/hc/ja/articles/201755040-%E7%AC%AC1%E5%9B%9E-kintone-JavaScript-API%E3%81%AE%E3%82%A4%E3%82%B8%E3%82%8A%E3%81%8B%E3%81%9F)というページの説明です。cybozuさんの[kintone](https://kintone.cybozu.co.jp/)というアプリケーションです。
