- 1. React + TypeScript: コンテクストが渡すデータを更新するコード例
- 2. 【初心者向け】Stripeでクレカ登録・決済・削除を実装する【Python, Go, Javascript】
- 3. データ型 プリミティブ型[JavaScript]
- 4. Goでwebアプリケーションを作成してみよう！ 第3回 ~フロントエンドの実装~
- 5. Google拡張機能と連携できるElectronベースのアプリを作った
- 6. 【TypeScript】いろいろな条件で並べ替えてみる
- 7. html-midi-playerのmidiファイル読み込み処理のソースコードを追ってみる
- 8. 変数の中の値ってどんな時に変わったりしますの？
- 9. 連番の配列をつくるのが意外と頭使った(JavaScript)
- 10. 【JavaScript】兄弟要素を追加する方法
- 11. 【JavaScriptとは？】基礎まとめ
- 12. csv-parse で TSV/CSV をパースするときに型変換を行う
- 13. CSSアニメーションでパタパタ（反転フラップ式案内表示機）を作ってみた
- 14. 東北大生向けのGPA計算拡張機能
- 15. ペインドリブンではじめるFigmaプラグイン開発
- 16. プログラマーが落ち着かなくなるコードを書いてみた 番外編
- 17. Chrome拡張を作ってみた② – 非同期処理ChromeStorage
- 18. JavaScriptの本を読んでメモ残すぞ
- 19. React + TypeScript: useContextフックでコンポーネントツリーに渡された情報を受け取る
- 20. 実は誰でも簡単にNotion のウィジェットを作れちゃう（勤怠管理ウィジェット in Notion）
React + TypeScript: コンテクストが渡すデータを更新するコード例
コンテクストのデータを更新するには、値はプロバイダが定められた親コンポーネントの状態変数にしてください。コンテクストのプロバイダに`value`値として渡すのはその状態変数です。
React公式ドキュメントの「[useContext](https://react.dev/reference/react/useContext)」には「[Updating data passed via context](https://react.dev/reference/react/useContext#updating-data-passed-via-context)」の項で、コンテクストの渡すデータを更新する5つのコードサンプルが紹介されています。もっとも、説明があまりありません(サンプルのコードを見てくださいということのようです)。そこで、本稿では解説をもう少し補ってみましょう。さらに、TypeScriptで型づけし、モジュール分けやコードについても少し工夫を加えました。
# チェックボックスによりコンポーネントのカラーを切り替える
つぎのサンプル001では、チェックボックスでコンポーネント
【初心者向け】Stripeでクレカ登録・決済・削除を実装する【Python, Go, Javascript】
こんにちは、[わいけい](https://twitter.com/yk_llm_gpt)です。
今回の記事ではStripeを使ってクレジットカード決済を実装します。## 前置き
開発規模の大小を問わず、**実装したプロダクトで収益を得るにはユーザーからお金を払ってもらう必要があります。**
しかし、決済の仕組みを自分たちで実装するのは色々な困難が伴います。キャッシュレス決済といえばクレジットカードですが、クレカ決済の実装には例えば下記のような課題があります。
– 実装ミスなどで、ユーザーのクレカ情報が流出すると大事故になる
– PCI DSSというセキュリティ要件を守り、決済ブランドの審査に通過するには莫大なコストがかかる結論として、個人や小規模な企業がクレカ決済を独自実装するのはあまり現実的ではないと私は思っています。
こういった問題のソリューションとなるのがStripeです。—
私のSNSアカウント等です。
今後もPython・LLM・Go・Web開発などのトピックについて発信していくのでフォローしていただけると喜びます。X: [わいけい](https:
データ型 プリミティブ型[JavaScript]
## 自分の感想：
プログラミング言語を学ぶときに、「型が重要だよ！」
という話はよく聞くと思います。はて？🐯🪽型とは・・・？
と疑問に思った方もたくさんいるのではないでしょうか？
例えば武道で言えば基本的な動作の構えや心構えでしょう。
それを守り、破るのが守破離であり、
型がある人間が型を破るのを型破りといい、型がない人間が型を破るのが形無しという。など日本人には古くからこの型という概念が深く根付いていると思います。
そんな型について。
これはかなり重要なのではないか・・・
と思い、僕が勉強しているJavaScriptでの型。
についてしっかりとまとめておきたいと思います。## 目次：
[・データ型とは？](#データ型とは)
[・JavaScriptにおける型とは？](#javascriptにおける型とは)
[・JavaScriptが持つ２つの型](#javascriptが持つ２つの型)[・プリミティブ型](#プリミティブ型)
[・文字列、string](#文字列string)
[・数値、number](#数値number)
[・長整数、Biging
Goでwebアプリケーションを作成してみよう！ 第3回 ~フロントエンドの実装~
この記事では5回に分けてwebアプリケーションの作り方を説明していく
第1回
[webアプリケーションの構成、仕組み](https://qiita.com/Yutosaki/items/0c6f9349b427d4aee08e “第３回”)
第2回
[サーバー立ち上げ](https://qiita.com/Yutosaki/items/fcd773a278e9b8663f36 “第２回”)
第3回
フロントエンドの実装(この記事)
第4回
[バックエンドの実装](https://qiita.com/Yutosaki/items/da564b74d6fac87aa601 “第4回”)
第5回
メニュー画像の読み取り実際に作ったアプリケーション
https://github.com/Yutosaki/WiFiRader
# やること
以下のような画面構成にするための JavaScript を書く。また、Go で作成するアプリケーションサーバーに HTTP リクエストを送る。 => a – b); // 昇順
console.log(numbers); // [1, 2, 3, 4, 5]
“`**ジュニア**：「簡単ですね！そしたら、文字列を50音順にソートするにはどうしたらいいですか？」
**シニア**：「良い質問だ。日本語の
html-midi-playerのmidiファイル読み込み処理のソースコードを追ってみる
ブラウザ上でmidiファイルを再生する手段の1つとしてhtml-midi-playerがあり、以下のページに沿ってmidiファイルのURLをsrcに指定するとmidiファイルが再生されます。
html-midi-player
https://cifkao.github.io/html-midi-player/上記ページではsrcがhttpsで始まるURLとなっていますが、これをjavascriptでメモリ上に作成した任意のmidiデータにできないか？と思ったので処理を追ってみました。
## html-midi-playerのsrcで指定したmidiファイルの取得方法を追ってみる
html-midi-playerのgithub上のソースコードを読んでみると、srcで指定したmidiファイルは以下の箇所で `urlToNoteSequence` なる関数に `this.src` として渡されています。
https://github.com/cifkao/html-midi-player/blob/master/src/player.ts#L165
“`javascript:
変数の中の値ってどんな時に変わったりしますの？
# はじめに
プログラミング言語はどれも「変数」というもので何かの値を格納して色々利用しますね。
コードを書いているうちによく考えていることがあります。「ある変数の値ってコードの中でどこからわかるの？」又は「予想外なところで変わったりしないよね？」って。
何かの変数に値を与える時に普段はこのように`=`を使うことが多いですね。（他にも`<-`を使う少数派の言語もありますが、私はまだ使ったことない） ```javascript a = 129.3; ``` この文が出たら確実に変数の値が決められるでしょう。たとえ既に定義された変数でもここで書き換えられますね。だから変数の値はこの部分を見てわかるのです。 しかし実際にそう簡単にはいかないですね。それ以外も変数が変わる場面はいくらでもあるから。 ということで今回はこれについて纏めてこの記事を書くことにしました。 概念としては色んな言語で共通のはずなので、どの言語を使っている人でも読めるような内容にしようとしていますが、ここでは例として主に私が最近関わっている5つの言語を使います。それはRuby、Python、JavaScrip
連番の配列をつくるのが意外と頭使った(JavaScript)
## 前座問題
Q. （JavaScript）20 ~ 50 までの連番からなる配列arrを作成せよ。
## 真っ先に思い浮かんだやつ
“`javascript
const arr = []for (let i = 20; i <= 50; i++) { arr.push(i) } console.log(arr) // arr=[20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50] ``` 👶「...」 👶「なんかださい」 👶「一個ずつ入れるんじゃなくて、map関数みたいにできないものか」 （うまく言語化できなかったので雰囲気掴んでください） ## 本問題 Q. （JavaScript）20 ~ 50 までの連番からなる配列arrを**スマートに**作成せよ。 ## 解答 MDNを参考に作ってみましょう https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference
【JavaScript】兄弟要素を追加する方法
以下のように記述すると兄弟要素を追加できます。
“`js
const sample = document.getElementById(‘sample’)
const div = document.createElement(‘div’)sample.parentNode.insertBefore(div, sample.nextElementSibling)
“`
または以下のように記述します。
“`js
const sample = document.getElementById(‘sample’)
const div = document.createElement(‘div’)sample.parentNode.appendChild(div)
“`
【JavaScriptとは？】基礎まとめ
こんにちは、Reikaです。
私は現在、アプレンティスの5期生として日々勉強に励んでいます。https://apprentice.jp/lp
アプレンティスの課題として**HTML/CSS/JavaScriptの学習**に取り組みました。
今回はこの経験を通じて学んだことについて、記述していきます。
※今回の記事ではHTML/CSSについては省略しています。# 簡単に自己紹介
* 2023年12月〜独学でプログラミングの勉強を始める
* 2024年4月〜内定直結型エンジニア学習プログラム「アプレンティス」に参加
* 地方在住26歳社会人4年目。マインドミニマリスト。植物、テレビドラマ、コーヒーが好きです
* 趣味でYouTube投稿をしています。現職やなぜエンジニアを目指すようになったのか？は以下の動画をぜひご覧ください！^^# 目次
1.JavaScriptとは？
2.関数について
3.DOM操作とは？今回私は[JavaScript Primer
迷わないための入門書
csv-parse で TSV/CSV をパースするときに型変換を行う
# 前提
TSV ファイルを DB に insert するとき、 [csv-parse](https://csv.js.org/parse/) というモジュール[^1]を使ってパースを行いました。
ただその際、デフォルトでは数値や真偽値もキャストされず String として読み込まれてしまいます。# 方法
`cast` オプションにキャストを行うコールバック関数を書いて渡します。
コールバック関数は value と context を引数として受け取ります。
[context が持っている様々なプロパティ](https://csv.js.org/parse/options/cast/#context)を使って列を指定し、value をキャストして値を return します。
なお、今回は TSV ファイルを扱っていますが、 CSV ファイルについても同様です。# 環境
Bun 1.1.3### ファイル構成
“`
|–index.ts
|–joyokanji.tsv
“`
“`joyokanji.tsv
id grapheme_orth grapheme_alt
CSSアニメーションでパタパタ（反転フラップ式案内表示機）を作ってみた
かつて、鉄道や飛行機の案内板として活躍したパタパタ、あるいはソラリ―こと反転フラップ式案内掲示板をイメージをCSSアニメーションとJSで作ってみた。
なお、私が公開しているお気に入りの場所をマッピングした地図を公開するサービス[Toboggar](https://toboggar.com) でパタパタ型のUIを採用した。
**サンプル**
[Toboggar – 名古屋で食べるべきハンバーガー Top 10](https://toboggar.com/m/rNNBDoLGhjiGEfZy9Kok?auto=true&style=simplem)ここで使用したソースを簡素化したものが今回の記事である。
## 完成形
まずは、出来上がりを Codepen で確認。(画面が表示されていないときは、Result をクリック)
左下の **Start** ボタンを押すとフラップが回る。
また、**Slow** ボタンでゆっくり回るので、動きをじっくり確認できる。# Tohoku Univ. GPA calculator
この拡張機能は東北大学の学生向けにGPAの計算機能を提供するものです．
学務情報システムの成績確認ページに年度，前後期，全学専門を条件として絞り込んだ履修授業一覧とその条件に当てはまる科目のGPAを表示する機能と学務情報システムで表示される科目一覧をCSV形式で保存するボタンを追加するChrome拡張機能です．
## 1.導入方法
[Tohoku Univ. GPA calculator](https://chromewebstore.google.com/detail/tohoku-univ-gpa-calculato/agbmcohifheiailbnjmcnapjdnkehajf?hl=ja&authuser=1)にアクセスし，Chromeに拡張機能をインストールしてくださ
ペインドリブンではじめるFigmaプラグイン開発
デザイナーがFigmaプラグインをつくってみた！という内容です。
選択したフレーム群を、命名規則のもと自動的にリネームする機能を開発しました。https://www.figma.com/community/plugin/1270021574725531926/name-layers
## なぜFigmaプラグイン？
自分でやってみて、デザイナーがJavaScriptに入門するならFigmaプラグイン開発はおすすめなのではと思いました。
– 自身が一番のユーザーであり、確かなペインがある
– ゴールを単一機能の実現に絞れる
– UIで触っているものをコードからも触るので、既知である## 動機
JSフレームワークを理解したく、そのためにJavaScriptを学びたい。だけど入門書を読むと、概念理解が追いつかず途中で詰まってしまう。つまり書かないと進めない、でも書けない、困った…。
という状況からなかなか抜けられませんでした。でもある時なにげなく[Figma Plugin APIの公式ドキュメント](https://www.figma.com/plugin-docs/)を眺
プログラマーが落ち着かなくなるコードを書いてみた 番外編
こんにちは Atsu1209です。
今回は プログラマーが落ち着かなくなるコードを書いてみた番外編です。第一弾
https://qiita.com/Atsu1209jp/items/d4273320d5ce5f690e9a
第二弾
https://qiita.com/Atsu1209jp/items/a1b051107bca65e87ceb
# はじめに
今回は第一弾で作った奇数偶数を判定するコードをパワーアップしてきます。:::note alert
閲覧注意です!
:::# 前回のクソコード
前回のクソコードです。
1~10で奇数偶数を判定します。
(JSのみ)
“`javascript:main.js
const textarea = document.getElementById(“textarea”);function btn(){
if(textarea.value == “1”){
alert(“奇数”);
Chrome拡張を作ってみた② – 非同期処理ChromeStorage
# はじめに
Chrome拡張を作っていると、アプリとしてデータを永続保存したいケースが出てきます。
manifest version2までであれば非推奨ながらもlocalStorageが使えていましたが、Version3からはこれが禁止され、ChromeStorageを使う必要が出てきました。本稿では、manifest Version3を用いたstorageへのデータ保存について実践します。
# localStorageとChromeStorageの差
どちらもブラウザに対して永続的にデータを保持させる仕組みです。実装する上で大きな違いは、
localstorageが同期処理による読み書きですが、
ChromeStorageは非同期処理となります。以下がそれぞれのstorageに対する読み書きのサンプルコードです。
“` javascript:localstorage
// 同期処理
// 書き込み
localStorage.setItem(“lastAccessUrl”, “URL”);
console.log(‘success’);// 読み込み
const
JavaScriptの本を読んでメモ残すぞ
# はじめに
※こちらの記事は、随時更新していくスタイルです。
最終的に読んでまとめた読書感想文になります。私は、仕事をしながらプログラミングについて学習をしています。
残念ながら本を読むのがすごく苦手！学習を続けるのも一苦労！だけど、少しでも進んでるって足跡を残したら継続の助けになるかなーなんて考えて、こちらでアウトプットしてみることにしました。
と、いうことで、
**[1冊ですべて身につくJavaScript入門講座](https://www.amazon.co.jp/%E3%80%90Amazon-co-jp-%E9%99%90%E5%AE%9A%E3%80%911%E5%86%8A%E3%81%A7%E3%81%99%E3%81%B9%E3%81%A6%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FJavaScript%E5%85%A5%E9%96%80%E8%AC%9B%E5%BA%A7-DL%E7%89%B9%E5%85%B8-JavaScript%E3%83%81%E3%83%BC%E3%83%88%E3%82%B7%E3%83%BC
React + TypeScript: useContextフックでコンポーネントツリーに渡された情報を受け取る
[コンテクスト](https://ja.react.dev/learn/passing-data-deeply-with-context)(context)は、コンポーネントツリーに情報を渡す仕組みです。直接の子でなく、深い階層にある子コンポーネントであっても、`useContext`フックによりコンテクストの値を読み取り、その更新が受け取れます(subscribe)。
本稿はReact公式サイト「[useContext](https://react.dev/reference/react/useContext)」にもとづき、`useContext`はどう使うのか、およびどのような場合に使うとよいのかを解説します。説明内容と順序は、公式ドキュメントにしたがいました。ただし、解説はわかりやすく改め、またコード例とサンプル([StackBlitz](https://stackblitz.com/))はTypeScriptを加えたうえで修正した部分が少なくありません。
# 構文
“`react
const value = useContext(SomeContext)
“`フ
実は誰でも簡単にNotion のウィジェットを作れちゃう（勤怠管理ウィジェット in Notion）
# 初めに
タイトルの通りNotionのウイジェットって誰でも作れるんです！作ってみたら意外とウケが良かった！でも作り方知られてないみたいだし、ネットにも転がってなかったので記事書く！### 背景
以前AWSの勉強も兼ねて、チームの勤怠管理を作った（[その１](https://qiita.com/waiiioss/items/6c2ca747a55d3dca9224)、[その２](https://qiita.com/waiiioss/items/f35c1729bb3d17cfbc9e)、[その３](https://qiita.com/waiiioss/items/29a51fb8b8d63bd173c3)の三段に分けて記事にしたので良かったらみてください！）### 問題点
必要システムとして作ったけど、実際に使うようになって感じた問題点を列挙すると
1. 勤怠を登録するために勤怠管理ページを開くのがめんどくさい
1. めんどくさいが故に忘れがち
2. 可視化意外と誰もみてない機能だけしっかり作っても**体験してほしいUX**を考えられていないとこうゆう問題点が出てきがちで
