- 1. netflex-clone
- 2. React: エフェクト(useEffect)を使わなくてよい場合とは
- 3. Python,Ruby,PHP,Java,JavaScript,Perlの連想配列の比較
- 4. 好きな単語でクロスなワードパズルを作って共有できるWebサービスを作った
- 5. javascriptのクロージャ（Closures）とは
- 6. はじめての Chrome 拡張 最小構成ハンズオン
- 7. navigator.clipboard.writeText()がユーザにパーミッション無く動作するのか検証してみた
- 8. 世界中の数字をアラビア数字に変換した話
- 9. 人事のおじさんプログラミングを学ぶ Day9「税込価格の計算～functionの作成と活用」
- 10. Promiseを効率的に処理していく方法
- 11. ゆるふわな状態管理ライブラリを作った
- 12. javascirptで64の倍数の配列をfill()とmap()でスマートに作る方法
- 13. NotionのAPIにNode.jsからアクセスしてみるメモ #Notion
- 14. ローカルサーバでスマートフォンブラウザから端末の向きを検出する
- 15. JavaScriptのクイズの選択ボタンのプログラムと説明
- 16. three.jsでverticesを更新しても一回しかされなかったり、見る角度によって表示されなくなったりしたけど直った
- 17. React + TypeScript: Apollo Clientで操作エラーを扱う
- 18. JSでObjectを代入したり、forEachする方法
- 19. javascript html内に反映する方法
- 20. Java と JavaScript の違い(TypeScriptもあるよ！)
netflex-clone
Steps
1.Demo App
2.Get TMDB API Key
3.Create a react app
4.setup firebasefirebase login
firebase init
firebase deploy“`
npm install -g firebase-tools
“`
React: エフェクト(useEffect)を使わなくてよい場合とは
本稿執筆時現在、「React Docs」(BETA)の公開が進んでいます。その中の記事のひとつ「[You Might Not Need an Effect](https://beta.reactjs.org/learn/you-might-not-need-an-effect)」は、副作用のフック[`useEffect`](https://ja.reactjs.org/docs/hooks-effect.html)をいつ使うのか、あるいは使わない方がよいかについてのていねいな解説です。初心者にとってはもちろん、中級者以上にとっても役立つでしょう。本稿は基本的に記事の情報は網羅しているものの、邦訳ではありません。足りない部分は補ったり、説明の仕方を改めたり、不要と思われる記述は削除しました。
エフェクトは、Reactの仕組みからの非常口です。Reactの「外に出て」コンポーネントを外部システムと同期できます。たとえば、React以外のウィジェットやネットワーク、あるいはブラウザDOMなどです。外部システムが関わらないなら、エフェクトは要りません。コンポーネントの状態を、プロパティや状態
Python,Ruby,PHP,Java,JavaScript,Perlの連想配列の比較
Python,Ruby,PHP,Java,JavaScript,Perlの連想配列の比較
# Python
https://qiita.com/hz1_d/items/407dd13f90a8a4533d23
# Ruby
https://qiita.com/ryouya3948/items/5ea2049abfd92eb1ded7
# PHP
https://qiita.com/shizen-shin/items/8383e27c7cf16c0ccb4a
# Java
https://qiita.com/taropon_wwwww/items/95477174ac16287c9744
# JavaScript
https://qiita.com/yrn03m/items/87e223acc6e733b50429
# Perl
https://perlzemi.com/blog/20161013147635.html
好きな単語でクロスなワードパズルを作って共有できるWebサービスを作った
クロスなワードパズル[^1]を作って共有できるWebサービスを作りました。
こんなサービスです。
[](https://kurehajime.github.io/hash4word/?code=44Kk44Oz44Kv44Oq44Oz44KwLOODreODg-OCr-ODnuODsyzjgqzjg47jg7Pjg4njg63jg5Us44Oq44Oz44KvLOODsyzjg6os44KvLOODrQ)ここで遊べます。
https://kurehajime.github.io/hash4word/
## できること
### 問題を解く
バラバラに散りばめられた単語を入れ替えて、あらかじめ指定された4単語を、→方向と↓方向に作ればゲームクリアです。
[ {
this.salary = salary
}public get annualSalary() {
return this.salary + this.bonus
}
}
~~~
このコードは関連する役割をするメソッドや変数を一つのクラスにまとめてカプセル化したクラスです。このコードを見ると、privateで設定されたbonusは外部からはアクセスすることができない状態で、getメソッドのannualSalaryのみが参照しています。
では、いつこのようなクロージャを使うでしょうか。# クロージャの利用場面
### カプセル化した時
上記のコ
はじめての Chrome 拡張 最小構成ハンズオン
# はじめに
これは初めて Chrome 拡張を作る人が超基本を理解するのを手助けするための資料です。
[ユニークビジョン](https://qiita.com/organizations/uniquevision)社内のハンズオン勉強会の資料として作りました。:::note info
この記事は Manifest V3 に準拠しています。
:::# Chrome 拡張の全体像
Chrome 拡張のざっくりとした全体像を図にまとめてみました。
機能ごとに説明します。
## ポップアップウィンドウの表示
がユーザにパーミッション無く動作するのか検証してみた
# 本記事の目的
以前navigator.clipboardについてQiitaこんな記事を書きました
https://qiita.com/arakawayasuaki/items/cc60a876dad4b3f8b15b
するとこんなニュース記事が発表されており
https://gigazine.net/news/20220829-chrome-clipboard/
>GitHubでtomayac氏が投稿した内容によると、画像をクリップボードにコピーするAPIのメソッド「navigator.clipboard.write()」および文字列をクリップボードにコピーするAPIのメソッド「navigator.clipboard.writeText()」は、FirefoxとSafariではユーザーによる操作が求められるのですが、Chromeではユーザーの操作なしで実行されるとのこと。Naleksuh氏は「これは以前から問題になっていたものです。この問題があるので、ランダムなウェブサイトでJavaScriptを有効にすべきではないのです」とコメントしています。
どうやら
**cl
世界中の数字をアラビア数字に変換した話
# この記事の成果物
https://www.npmjs.com/package/@satachito/replace-numeral
# はじめに
https://slip.828.tokyo/
[こんなサイト](https://slip.828.tokyo/)を作っていたら、世界中の数字をアラビア数字に変換するハメになった。世界中って言ってもUnicodeの世界だけれど。そして案の定文字とコードの泥沼にはまった。
Unicodeの中のものをカテゴライズした表がある。
http://www.unicode.org/reports/tr44/tr44-16.html#GC_Values_Table
世界中に数字はたくさんあるけれど、これの中のNd(Decimal_Number)に該当するものがアラビア数字に変換可能なもののようだ。
では、UnicodeのNdカテゴリにあるものはどこのコードポイントにアサインされているのだろう、と思って探したらそれらしきものがあった。一応 unicode.org だからこれが最新だと思われる。
https://util.unicode.
人事のおじさんプログラミングを学ぶ Day9「税込価格の計算～functionの作成と活用」
書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿って、
functionを使って税込価格を計算してみた。
Promiseを効率的に処理していく方法
# promise-pool
## やりたいこと
あるAPIを叩いて、データを取ってきたい。20個くらいAPIを叩く先があるけれども、10個ずつ取りにいって、1つの処理が終われば次のAPIを叩きたい。
## 1つずつ取ってくる場合(async await)
“`TypeScript
import axios from ‘axios’;
const first = async () => {
const start = performance.now();
const result1 = await axios.get(‘https://yahoo.co.jp’);
const result2 = await axios.get(‘https://yahoo.co.jp’);
const result3 = await axios.get(‘https://yahoo.co.jp’);
const result4 = await axios.get(‘https://yahoo.co.jp’);
const result5 = await axios.get(‘ht
ゆるふわな状態管理ライブラリを作った
たった65行の**激薄でゆるふわ**な状態管理ライブラリを作ってみました。
https://www.npmjs.com/package/use-tiny-state
## なんでつくった
外部ライブラリに頼らずにReactで親子関係にないコンポーネント間で状態を管理するにはContext APIを使うのが一般的かと思います。Context APIを使えば、Providerでラップされたコンポーネント内でpropsのバケツリレーをせずに状態を共有する事ができます。
しかし、Contextを用いた状態管理では以下の２つの制約があります。
### 無駄に再レンダリングされる
以下の記事で述べられている通り、Context APIを使用した状態管理ではProviderに渡す値を更新するたびProvider以下のツリー全てが再レンダリングされてしまいます。
https://zenn.dev/sora_kumo/articles/72fae8a8244adf
また、アプリケーションが成長するに伴いグローバルで管理したいコンテキスが増えると、俗に言うProviderタワー（
javascirptで64の倍数の配列をfill()とmap()でスマートに作る方法
## こんな配列がほしい
“`
[ 64, 128, 192, 256, 320, 384, 448, 512, 576, 640, 704, 768 ]
“`## モダンな記法で書きたい
“`
new Array(12).fill(64).map((v, i) => {return (i + 1) * v})
“`## 解説
new Array(12) で空要素が12個ある配列を作ります
Array.fill(64)で64を埋めます
各要素をMapで繰り返し処理してindex+1を乗算しています
NotionのAPIにNode.jsからアクセスしてみるメモ #Notion
Notionを最近触っていますが、APIおよびJavaScript SDKがある模様なので触ってみました。
## インテグレーションを作成する
> https://www.notion.so/my-integrations
> 名前などを適当に入れて進めてみます。試しに、`Node.jsテスト`としておきました。
> 
const express = require(‘express’);
const app = express();
const https = require(‘https’);
const options = {
key: fs.readFileSync(‘./key.pem’),
cert: fs.readFileSync(‘./cert.pem’)
};
con
JavaScriptのクイズの選択ボタンのプログラムと説明
ブログの知識と教養と雑学の百問、[前半（芸能と文学と芸術と時事と自然）](https://www.nagahitoyuki.com/2022/07/the-first-half-of-a-hundred-questions-of-knowledge-education-and-trivia.html)と[後半（歴史とITと健康とスポーツと生活）](https://www.nagahitoyuki.com/2022/07/the-last-half-of-a-hundred-questions-of-knowledge-education-and-trivia.html)でクイズ形式の三択ボタンをJavaScriptで作成したときのプログラムの内容を説明する。
“`JavaScript:JavaScript
// 誤解
three.jsでverticesを更新しても一回しかされなかったり、見る角度によって表示されなくなったりしたけど直った
three.js r69,r70でのはなし
（※はてブからの移植 https://fkef.hatenablog.com/entry/2015/03/10/014318 ）—
# 頂点編集が反映されなかった話
物のpositionを変えるのはNeedUpdateなどしなくても問題なく反映されるが、
vertices(頂点)座標を更新するときには毎回`geometry.verticesNeedUpdate = true`をかまさないと アニメーション`render()`ごとにフラグがもと(`false`)に戻ってしまうらしいbooleanだからなんかずっとupdateしてくれるもんかとおもってたけど違うのね
[verticesneedupdate – Google 検索](https://www.google.co.jp/search?q=verticesneedupdate)
[javascript – ThreeJS Dynamic Line Change – Stack Overflow](https://stackoverflow.com/questions/
React + TypeScript: Apollo Clientで操作エラーを扱う
[Apollo Client](https://www.apollographql.com/docs/react/)はReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿は公式サイトの「[Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling)」にもとづく、操作エラーをどう扱ったらよいかについての解説です。Apollo Clientでクエリを使うための基礎はすでに学んだことが前提となります(まだの方は先に「[React + TypeScript: Apollo ClientのGraphQLクエリを使ってみる](https://qiita.com/FumioNonaka/items/0c6b711627e3443ff73b)」をお読みください)。ドキュメントの邦訳ではなく、日本語で説明し直しました。原文から省いた部分もあり、逆にわかりにくいところは補っています。
Apollo ClientがGraphQLサーバーで操作を
JSでObjectを代入したり、forEachする方法
## 概要
業務の中で受け取ったフォームのオブジェクトをパラメーターに入れたいときに代入が必要だったり、そのオブジェクトのvalueを抜き出したいというケースに遭遇するのでちょっと調べた。## Object.assign
Object.assignはObjectAとObjectBをマージするのに使う。
“`javascript
Object.assign(fruits1, fruits2)
“`
大事なのは第二引数のObjectを第一引数のオブジェクトにマージするため同じ要素が含まれている場合は第二引数のObjectが優先されるという点。実際にどのような動きをするのか見ていただきたい
“`javascript
const fruits1 = {
a: apple,
b: banana
}const fruits2 = {
b: melon,
c: peach
}newFruits = Object.assign(fruits1, fruits2)
console.log(fruits1) // {a: ‘apple’, b: ‘melon’,
javascript html内に反映する方法
## はじめに
この記事は、「なんとなく理解できた」を目的としているため、正確性、具体性に欠ける表現がございます。精度の高い情報を求めている方には向かないので、ご理解ください。
## 方法
### 1 html内に記述
“`
“`
と打つことで、その中にJS文を打ち込むことが出来る。head内に打ち込むこともできて、htmlのプログラミング上、上から反映されるので、基本はhead内の終わりに打ち込む。
### 2 JSファイルを作成する
.jsのファイルを作成して記述する。
そうすることで、何度も同じ文を使えたり、HTMLファイルが無駄に長くなることがなくなる。
読み込む際は、headに、こんな感じで書く。
“`
“`### 結論
ちょっとしたその場限りのコードは直接書き込む。
それ以外の文は、.jsファイルを作るのが良し
## おわり
最後まで見ていただき、ありがとうございます。
気になった点や、感想などをいただけると、嬉しい
Java と JavaScript の違い(TypeScriptもあるよ！)
突然ですが皆さん、こう思ったことはありませんか？
**結局、Java と JavaScript の違いってなんなの？？**
人によって、ハムとハムスターだったり、そばと焼きそばだったりします。
(ついでにTypeScriptのことを「型焼きそば」と言ったり……)でもそれって、ニュアンス的に正確じゃない気がします。
なので今回は、Java と JavaScript(ついでにTypeScript) の違いを適切に解説します!一応、出来る限り正確に書きますが、間違いがあればコメントいただけると幸いです…
# Java と JavaScript の違い
### 使用用途
* Java
– 主にサーバサイドの言語。処理ロジックを担当することが多い。* JavaScript
– 現状、どちらでも扱うことが出来る。[^1]
[^1]: サーバサイドでJavaScriptを扱うには、Node.js等が必要です* TypeScript
– JavaScript 同様、現状はどちらでも扱うことが出来る。[^2]
[
