- 1. JavaScriptでの型判別まとめ(typeof, Object.prototype.toString.call)
- 2. TypeScript – ファイルから import した定数をそのまま export する
- 3. 勉強会でなかなかメンバーが質問してくれない、意見をしてくれない
- 4. 手数料計算【javascript】
- 5. SkyWayの公式のチュートリアルをやってビデオ通話を作ってみた
- 6. nodeでテンプレートエンジンっぽいものを作った
- 7. Minori4.html 個人用
- 8. Minori4_1.html 個人用
- 9. サーバ側でReactMarkdownを実行しmarkdownをhtmlに変換する
- 10. Vue.jsの公式ドキュメントを整理していく 2回目
- 11. 【React】Custom Hooksとは
- 12. 【TypeScript】ESLintとは
- 13. 【TypeScript】Prettierとは
- 14. 【TypeScript】型システムとは
- 15. 【React】ミュータブルとは
- 16. Astro + pagefindで手軽に検索機能の実装
- 17. 【React】マウントとは
- 18. 【React】ライフサイクルとは
- 19. 【React】レンダーツリーとは
- 20. 【React】条件付きレンダリングとは
JavaScriptでの型判別まとめ(typeof, Object.prototype.toString.call)
自分用メモ
|型|値|typeof|toString.call|
|-|-|-|-|
|string|””, “abc”, ‘a’, String(1)|string|[object String]|
|String|new String(“”)|object|[object String]|
|number|0, NaN, Infinity, Number(‘1’)|number|[object Number]|
|Number|new Number(0)|object|[object Number]|
|bigint|1n, BigInt(1)|bigint|[object BigInt]|
|Bigint|?|?|?|
|boolean|true, Boolean(0)|boolean|[object Boolean]|
|Boolean|new Boolean(true)|object|[object Boolean]|
|symbol|Symbol(1)|symbol|[object Symbol]|
|Symbol|?|?|?|
|null|null|object|[ob
TypeScript – ファイルから import した定数をそのまま export する
# コード例
importは書かずに export だけ書けば成り立つようだ
“`ts
export {
FOO_CONSTANT,
BAR_CONSTANT,
} from ‘foo_file’
“`# 解説
次のように import した定数をそのままexportしたかった
(以下は文法エラー)“`ts
import {
FOO_CONSTANT,
BAR_CONSTANT,
} from ‘foo_file’export const FOO_CONSTANT = FOO_CONSTANT
export const BAR_CONSTANT = BAR_CONSTANT
“`# チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ
# プロフィール・経歴
https://github.com/YumaInaura/YumaInaura
勉強会でなかなかメンバーが質問してくれない、意見をしてくれない
### 導入
社内外でのオンライン勉強会は当たり前になってきましたね。よく社内で勉強会を開催しているとき、「どなたか質問ありますか?」といってもだれも返答がないことってよくありませんか。そのとき発表者も少し悲しくなってしまいます。もちろん発表内容が難しくて理解できなかった”発表の質”の場合もありますが、(それもフィードバックしてほしい)どう工夫してもなかなか質問がないとときがあります。しかしそこには共通している部分があり、それは質問しづらい環境が必ずあることが1つ原因にあるのではないかと思っています。
そこであえてみんなが感じているその雰囲気をいじることを考えてみました。### 「参加者から質問者をランダムに選出する」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655530/c549d733-b6a9-74ef-2e98-00f1e4042a18.png)“`
手数料計算【javascript】
“`ruby
window.addEventListener(‘turbo:load’,() =>{
console.log(“OK”);
“`
urbo:loadというイベントは、ページが全て読み込まれた後に発火します。JSファイルの読み込みが正しく出来ていればコンソール上に”OK”という文字列が表示される“`ruby:
document.getElementById(“id名”)は、id名を指定してHTMLの要素を取得するメソッドです。
“`金額を次は金額を入力するたびに、イベント発火するようにaddEventListenerを使用
const inputValue = priceInput.value;
value属性を指定し、input要素から実際に入力した金額の値を取得。つまりフリマの出品値段から今回指定したい10%の値段を取得
これが終わると次はいよいよ手数料の実装。
innerHTMLを使用して、販売手数料や利益計算結果を表示できるようにしましょう。innerHTMLは、HTML要素の書き換えを行うことができます。
“`ruby
SkyWayの公式のチュートリアルをやってビデオ通話を作ってみた
# はじめに
こんにちは、プログラミングを始めて約3年のエンジニアのkeitaMaxです。
今回は、SkyWayの公式に従ってチュートリアルをこなして、音声・ビデオ通話アプリを作成していこうと思います。
# SkyWayに登録する
下記サイトでまずはアカウント登録をします。無料でも使用できるので、今回は無料版に登録をしました。https://console.skyway.ntt.com/
公式のガイドに従って登録、メール認証をしてプロジェクトとアプリを作成します。
アプリまで作成すると、『アプリケーションキー』と『シークレットキー』が発行されますのでメモっときます。
# 実際にローカル環境で通話をつなぐ
SkyWay開発ドキュメントのなかにクイックスタートという項目があったので、それに従ってブラウザのアプリケーションを作成します。https://skyway.ntt.com/ja/docs/user-guide/javascript-sdk/quickstart/
まずは環境作成をします。公式に載っている通りに、以下の手順で開発環境を作成しました。
>3-1.
nodeでテンプレートエンジンっぽいものを作った
## 背景
同じようなページを複製したいけど、それだけのためにEJSやPugを入れるのも面倒。。。
じゃあ自分でサクッと作ろう!## 環境
node 20.10.0
npm 10.2.3## 前提
以下のポケモン151匹のデータが入ったJSONをもとに、 (JSONは記事最下部に記載)
“`pokeData.json
[
{
“no”: 1,
“name”: “フシギダネ”,
“abilities”: [“しんりょく”],
“stats”: {
“hp”: 45,
“attack”: 49,
“defense”: 49,
“spAttack”: 65,
“spDefense”: 65,
“speed”: 45
}
},
{
“no”: 2,
“name”: “フシギソウ”,
“abilities”: [“しんりょく”],
“stats”: {
“hp”: 60,
“attack”: 62,
Minori4.html 個人用
“`Minori4.html
入力フォーム