- 1. Elixirから覚えるJavaScript 〜Promise（文法遊び）〜
- 2. Media Session APIについての所感
- 3. Video.js完全マニュアル part9 〜Playerの外観〜
- 4. React 18 + Javascript版Amplify v5環境で手動configureする方法
- 5. AWS SAMでJavaScript v3のLambdaをデプロイする（Node16以下）
- 6. Next.jsでfaviconの設定方法
- 7. 【JavaScript】モーダルウィンドウの作成
- 8. prototype を知ることで MDN が読みやすくなった話
- 9. [本の紹介][JavaScript]Colaboratoryでやさしく学ぶJavaScript入門
- 10. 【Babylon.js】物理エンジンを使ってみた
- 11. Elixirから覚えるJavaScript シリーズ
- 12. Elixirから覚えるJavaScript 〜every〜
- 13. VSCode で動く Teams Toolkit での F5 デバッグをカスタマイズしよう
- 14. 【Firebase】TSyringeを使ってFirebase FunctionsにDIを導入した時のまとめ
- 15. YubinBangoライブラリで住所を自動入力
- 16. Video.js完全マニュアル part8 〜Playerを操作する関数紹介〜
- 17. JavaScriptで平仮名(ひらがな)を判定する
- 18. プロフェッショナルなReactプロジェクトの立ち上げ方(和訳)
- 19. 2022年に最も普及するReactの技術スタック(和訳)
- 20. 「配列破壊」の視点からJavaScriptの配列メソッドを完全まとめ
Elixirから覚えるJavaScript 〜Promise（文法遊び）〜
僕は普段はElixirを使ってます
必要になったのでJavaScriptの勉強をはじめました
題名はElixirから覚えるJavaScriptですが、逆もできるかも？今日はPromiseを見てみたいと思います
本来は非同期で使いますが、なんとなくElixirのパイプ風にしてみたかった
意味はあまりなく文法遊びですお題
10を初期値
|> 結果表示
|> 10倍
|> 結果表示
|> 12足す
|> 結果表示# Elixir
“`elixir
10
|> IO.inspect()
|> then(& &1 * 10)
|> IO.inspect()
|> then(& &1 + 12)
|> IO.inspect()
“`“`elixir:実行結果
10
100
112
“`# JavaScript
“`javascript
const promise = new Promise((resolve, reject) => {
resolve(10);
});const inspect = (x) => {
console.log(x);
Media Session APIについての所感
本記事は自分のブログからの流用です。[Media Session APIについての所感](https://mkw-blog.herokuapp.com/article/157PERT2DAhvR36vyEr2uh)
Media Session API はメディアについての通知をカスタマイズする機能を提供しています。これによってメディア再生時に表示されるデバイス毎に違う通知画面の情報をある程度統一したり操作性が良くなることでUX向上に繋げられたりすることができます。ただこの機能はまだまだ扱いにくく不安定？なところも多いので触っていて思ったことを備忘録としてまとめました。
仕様はこちら: [Media Session API](https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API)# Media Session API概要
これについてはGoogleが提供しているデモを見ていただくのが一番わかりやすいと思います。[Media Session Samples](https://googlechrome.gi
Video.js完全マニュアル part9 〜Playerの外観〜
# はじめに
Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart9です。
Video.jsの公式のガイドである[Video.js Guides](https://videojs.com/guides)を翻訳ツールを使いながら解説していきます。前回はPlayerを作成後のPlayerの操作で使える関数を紹介しました。今回はSkinと呼ばれるPlayerの見た目、つまり外観の操作について解説します。
前回
[Video.js完全マニュアル part1 〜Video.jsを使う理由〜](https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543)part1から読む人は[こちら](https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543)
# この記事の対象者
– Video.jsを利用する人
– 動画プレイヤーのUI操作をしたい人
– 動画再生関連のサービスを作りたい人# この記事の解説する章
[Skin](https:
React 18 + Javascript版Amplify v5環境で手動configureする方法
# 検証環境
* React: 18.2.0
* aws-amplify: 5.0.7
* aws-amplify/ui: 5.3.0
* aws-amplify/ui-react: 4.2.0# 注意事項
Amplify SDKのモジュールのうち、AuthとGeoでは設定が可能なことを検証していますが、
それ以外のモジュールでは未検証です。また、マニュアル未記載の方法につき自己責任でお願いします。
# 結論
Amplify関連のリソースを表示する前に、App.tsx等で以下のようにconfigureする。
* Amplify v4以前の設定方法
“`Typescript:App.tsx
import { Amplify } from ‘aws-amplify’;Amplify.configure({
Auth: {
// REQUIRED only for Federated Authentication – Amazon Cognito Identity Pool ID
identityPo
AWS SAMでJavaScript v3のLambdaをデプロイする（Node16以下）
この記事は Lambda の Runtime が Node16 以下で`SDK for JavaScript v3`を AWS SAM でデプロイする方法について記述しています。
:::note info
Node18以降はv3に対応しているので、v3で書かれたソースだけをデプロイしても動きます。代わりに、Node18以降でv2で書いている場合はv2のSDKをソースに含めてデプロイする必要があります。
:::プロジェクトを`sam init`で作成した場合、ルートパスでデプロイすると`template.yaml`や`__tests__`などのファイルもアップロードされてしまい見た目が悪いです。そのため`template.yaml`で`CodeUri`を指定すると思います。
“`yaml:template.yaml
SampleFanction:
Type: AWS::Serverless::Function
CodeUri: src/
“`このようにすると、v3のSDKが`sam build`の対象に含まれなってしまいます。この場合は`package
Next.jsでfaviconの設定方法
[https://realfavicongenerator.net/](https://realfavicongenerator.net/)
↑ファビコンジェネレーターに画像をアップロードする
細かい設定はお好みで。その後、ファイルとコードが作成されるのでファイルをダウンロード
ダウンロードしたファイルをpublicフォルダに持ってくる
pagesフォルダに_document.jsファイルを作って公式どうりに記述↓。
[https://nextjs.org/docs/advanced-features/custom-document](https://nextjs.org/docs/advanced-features/custom-document)
にファビコンジェネレーターで作成したコードをコピペする以上！
【JavaScript】モーダルウィンドウの作成
# 1日1UI投稿！
昨日思いついたので本日よりスタートです。
UIに限らずですが、アウトプットを積極的にやっていきます。# モーダルウィンドウを作成
本日はモーダルウィンドウ作成しました。
完成品は↓See the Pen
モーダルウィンドウ by ri-tama (prototype を知ることで MDN が読みやすくなった話# はじめに
株式会社Relicでフロントエンジニアとして働いてる、えーきといいます。
今年から仕事でjavaScriptを書き始め、まだまだ勉強中の新米エンジニアです。突然ですが、javaScriptのメソッドを調べると、だいたいMDNが検索上位に表示されるかと思います。
map()メソッドやsplit()メソッドをMDNで見てみると、
– **Array.prototype.map()**
– **String.prototype.split()**の様な書き方がされています。
この記事では、***.prototypeってどこから現れたの？という疑問に対して調査した記事になります。
同じ様な疑問を感じられた方がいらっしゃれば、お時間のある時に読んでもらえたら嬉しいです。# 結論
最初に ***.prototype の正体について下記のコードを用いて説明します。
“`javascript:hoge.js
const arr = []
console.log(typeof arr) //object
console.log(arr instanceof Array)
[本の紹介][JavaScript]Colaboratoryでやさしく学ぶJavaScript入門
# [Colaboratoryでやさしく学ぶJavaScript入門](https://book.mynavi.jp/ec/products/detail/id=128345)が目から鱗
ColaboratoryでJavaScriptが実行できるのはありがたい。
ある意味、CodePenより使いやすいのではないだろうか。
サンプルもキレイで内容もとても分かりやすかった。
一読の価値があると思います。[Colaboratoryのページ](https://colab.research.google.com/drive/1OzlbKiDHoO8P6nISgR7lVRsmAnwOvvxO?usp=sharing)
【Babylon.js】物理エンジンを使ってみた
`Kick soccer ball`ボタンを押すとサッカーボールが飛びます。
https://codesandbox.io/embed/divine-cherry-wiwgdz?fontsize=14&hidenavigation=1&theme=dark&view=preview
# はじめに
ARIの土井です。前回[【Babylon.js】Reactを使って3Dモデルを表示する](https://qiita.com/yuki_doi/private/3d15aa76567cdc9be1d5)という記事を書きました。今回は物理エンジンを使って実際にサッカーボールを蹴ってみたいと思います。
# 物理エンジンとは
物理エンジンを使用すると、Scene内に重力を発生させたり、メッシュに質量や反発係数、摩擦係数を設定したりすることができます。詳細は以下のドキュメントを参照してください。
https://doc.babylonjs.com/features/featuresDeepDive/physics/usingPhysicsEngine
# 手順
## 物理エンジンの有効
Elixirから覚えるJavaScript シリーズ
僕は普段はElixirを使ってます
必要になったのでJavaScriptの勉強をはじめました
題名はElixirから覚えるJavaScriptですが、逆もできるかも？というシリーズを作りたいと思います
https://qiita.com/t-yamanashi/items/237377588d675829c2e9
https://qiita.com/t-yamanashi/items/850bb03afd811264ecd5
https://qiita.com/t-yamanashi/items/693319825f7c7b3cfb53
https://qiita.com/t-yamanashi/items/bc783e89b20d74c90f43
https://qiita.com/t-yamanashi/items/1cc9ebcffaa660900c87
https://qiita.com/t-yamanashi/items/2f778f445fd169b9cc76
https://qiita.com/t-yamanashi/items/57d4580246eb
Elixirから覚えるJavaScript 〜every〜
僕は普段はElixirを使ってます
必要になったのでJavaScriptの勉強をはじめました
題名はElixirから覚えるJavaScriptですが、逆もできるかも？今日はeveryを見てみたいと思います
お題
[1, 2, 3, 4, 5]の内容がすべて0より大きかったらtrue# Elixir
“`elixir
x = [1, 2, 3, 4, 5]
y = Enum.all?(x, fn x -> x > 0 end)
IO.inspect(x)
IO.inspect(y)
“`“`elixir:実行結果
[1, 2, 3, 4, 5]
true
“`# JavaScript
“`javascript
x = [1, 2, 3, 4, 5]
y = x.every((x) => x > 0)
console.log(x)
console.log(y)
“`“`javascript:実行結果
[ 1, 2, 3, 4, 5 ]
true
“`無事に同じ結果になりました
https://qi
VSCode で動く Teams Toolkit での F5 デバッグをカスタマイズしよう
早いもので 2023 年になりました。みなさまあけましておめでとうございます?さて昨年 Teams Toolkit は、前提条件チェッカーとデバッグ設定のカスタマイズなど、デバッグ体験を向上させるいくつかの新機能を追加しました。v.4.1.0 以降の最新 Toolkit では、さらにデバッグ体験をカスタマイズできるようになりましたので今回それらを紹介していきたいと思います。
Teams Toolkit を初めてお使いになる方は、まずこちらのチュートリアルをご覧ください。
– [Beginners’ crash course to build apps for Teams using Teams Toolkit for Visual Studio Code]
【Firebase】TSyringeを使ってFirebase FunctionsにDIを導入した時のまとめ
# Firebase FunctionsにDIを導入しようと思ったきっかけ
最近、私がサーバーサイドを開発するとき、Kotlinを選択することが増えました。
以前、私はTypeScriptを使って、NestJSやExpressを駆使しながらアプリケーションを開発していました。
しかし、Android開発や、Kotlinの素晴らしさに触れたことで、KotlinとKtorフレームワークを使って開発することに喜びを感じるようになりました。Ktorを使うとき、Koinライブラリを使ってDIを行います。クリーンアーキテクチャを意識しながら開発を進めていきます。このスタイルに慣れるにつれ、DIを使うことはコード管理のしやすさに繋がると、改めて思うようになりました。
サーバーサイドのプロジェクトでは全てKotlinとKtorを使って開発したいです。
ところが、Firebase FunctionsではNode.jsを使った開発が推奨されています。
Firebase CLIでも選択できるのは**JavaScript**と**TypeScript**だけです。そのため、公式にKotlinが採
YubinBangoライブラリで住所を自動入力
# 住所の自動入力ライブラリ「YubinBango」
TypeScriptで作成された「YubinBango」ライブラリ（ajaxzip3の後継のもののようです）を使って、郵便番号を入力したら、その下にある住所入力欄に都道府県や市区町村の文字列を自動入力させます。
この記事では「郵便番号入力欄が1つ、住所の自動入力欄が2つVer.」を作ります。この入力フォームはcssで見た目をいい感じにしています。レスポンシブ対応もなんとなくいい感じにしていますので、基本的には手順通りにHTML、CSS、JSを設置すると、見た目ごと設置可能と思います。
## 動作の様子
## 実際の動作サンプル（郵便番号を入力してみよう！）
Video.js完全マニュアル part8 〜Playerを操作する関数紹介〜
# はじめに
Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart8です。
Video.jsの公式のガイドである[Video.js Guides](https://videojs.com/guides)を翻訳ツールを使いながら解説していきます。これまではずっとPlayerを作成するために必要な初期化周りの設定や、初期化時に渡すオプションの紹介をしてきました。
今回は初期化してPlayer生成後の操作について一連の操作を紹介していきます前回
[Video.js完全マニュアル part7 〜公式FAQ集〜](https://qiita.com/manzoku_bukuro/items/da806c380aa9989d904a)part1から読む人は[こちら](https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543)
# この記事の対象者
– Video.jsを利用する人
– 動画プレイヤーのUI操作をしたい人
– 動画再生関連のサービスを作りたい人# この記事の解説する章
[
JavaScriptで平仮名(ひらがな)を判定する
正規表現を使い、文字列が平仮名か否かを判定します。
以下のように判定できることを目指します。
“`javascript
regex = /*ここに何らかの正規表現*/;
regex.test(“あいうえお”); // -> true
regex.test(“あぁ”); // -> true
regex.test(“aiueo”); // -> false
regex.test(“あいueo”); // -> false
regex.test(“あい うえお”); // -> false
“`
3つの方法を紹介します。
1. **[Unicodeプロパティを使う](#1-unicodeプロパティを使う)**
1. **[Unicodeエスケープシーケンスを使う](#2-unicodeエスケープシーケンスを使う)**
1. **[平仮名を使う](#3-平仮名を使う)**[注意事項](#注意事項nanto_viさんのコメントより引用)や、コメント欄もお読みください。
# 1. Unicodeプロパティを使う
これが最もスマートです。
現在では殆どの環境でUni
プロフェッショナルなReactプロジェクトの立ち上げ方(和訳)
### Professional React Development
1. [2022年に最も普及するReactの技術スタック](https://qiita.com/mwkiyo/items/70601c04142b12bc93f9)
1. [Screaming Architecture – Reactのディレクトリ構成を進化させる](https://qiita.com/mwkiyo/items/9549207680e71833a654)
1. **プロフェッショナルなReactプロジェクトの立ち上げ方**
1. [React開発者のためのGitワークフローとGitHubセットアップ](https://qiita.com/mwkiyo/items/9c6d1bd6df89e94f2a98)
* * *([こちらの記事](https://dev.to/profydev/how-to-set-up-a-professional-react-project-including-screencast-180f)の和訳です)
新しいReactアプリを始めるとき、プロフェッショナルな方法でセ
2022年に最も普及するReactの技術スタック(和訳)
### Professional React Development
1. **2022年に最も普及するReactの技術スタック**
1. [Screaming Architecture – Reactのディレクトリ構成を進化させる](https://qiita.com/mwkiyo/items/9549207680e71833a654)
1. [プロフェッショナルなReactプロジェクトの立ち上げ方](https://qiita.com/mwkiyo/items/c81c5ba5c4f02fdd29ec)
1. [React開発者のためのGitワークフローとGitHubセットアップ](https://qiita.com/mwkiyo/items/9c6d1bd6df89e94f2a98)
* * *([こちらの記事](https://dev.to/profydev/which-react-tech-stack-to-learn-in-2022-n84#styledcomponents-or-mui-as-most-popular-react-ui-library)の和訳です)
「配列破壊」の視点からJavaScriptの配列メソッドを完全まとめ
## はじめに
+ 元の配列：`arr`
+ return：`a`## 一，破壊的なメソッド
#### 1、shift
– 操作：配列の**最初**の要素を削除する
– return：削除した要素“`js
let arr = [1, 2, 3, 4, 5, 6];
let a = arr.shift();
console.log(a); // 1
console.log(arr); // [2,3,4,5,6]
“`#### 2、unshift
– 操作：配列の**最初**に要素を追加する
– return：新しい配列の長さ“`js
let arr = [1, 2, 3, 4, 5, 6];
let a = arr.unshift(0);
console.log(a); // 7
console.log(arr); // [0,1,2,3,4,5,6]
“`#### 3、pop
– 操作：配列の**最後**の要素を削除する
– return：削除した要素“`js
let arr = [1, 2, 3, 4, 5, 6];
let a =
