- 1. Typescript
- 2. Javescriptを独学で極める方法！
- 3. ライブラリはラッピングしておくと便利だよ（クラス編）
- 4. ライブラリはラッピングしておくと便利だよ（関数編）
- 5. JWT(JSON Web Token)についての考察
- 6. Markdownをhtmlで出力する方法
- 7. Node.js Test Runnerとビルトインモジュールのみでモジュールモックするヘルパーをつくった
- 8. 【環境構築】DockerでReactをyarnで起動して作成&起動する方法（JavaScript編）
- 9. textlint の実行結果を Codecov に送信する
- 10. Seleniumから呼ぶと便利なJS（増やし中）
- 11. ITエンジニアなのにまだ投資やってないの？ITエンジニアならChatGPTでクオンツシステム作って儲けようぜpart2
- 12. ライトボックスとは
- 13. 開発ツールに頼らず 様々な言語から WebAssembly（第５回）
- 14. FirebaseのAPIキーが隠せなくて困った人おりゅ？
- 15. Amazonの商品ページURLを短くするChrome Extension
- 16. クラスのパラメータでソート
- 17. ESLintのルールから考えるJavaScriptのundefined判定
- 18. Webpack?Create React App?No、Vite!! ~ ②WebpackによるReact開発環境構築[バンドラ/コンパイラ編] ~
- 19. Node.js Test Runnerでモジュールのモックをしたい
- 20. 【Node.js】LangChainを使ってChatGPTに自分のデータに対して回答させる
Typescript
## プリミティブ型とオブジェクト型
プリミティブ型には、number, string, boolean, symbolなどがあります。これらは不変の値で、直接操作することはできません。
プリミティブ型の値が不変であるというのは一度作成された値は変更できないという意味。
“`js
let str = “hello”;
str[0] = “H”;
console.log(str); // “hello”
“`
このようにプリミティブ型の値は変更しようとしても変更できない。“`js
let str = “hello”;
str = “Hello”;
console.log(str); // “Hello”
“`
このように新しい文字列をメモリ上に確保してそのメモリーに対するポインターを最大にするという形で変数を書き換えることは可能。
ここで重要なのは元の文字列自体が変更されていないということ。一方、Number, String, Boolean, Symbol, ObjectはJavaScriptのオブジェクト型です。これらはプリミティブ型の値をラップするオブジェクトで、
Javescriptを独学で極める方法！
こんにちは、まりかです。
今日は「Javascript」を独学で極める方法について書きました。
ノーコード、ローコードが主流になるなか、
まだまだ現役の「Javascript」その解説です！
初心者がマスターするJavaScript学習法：独学で成功する具体的ステップとリソース
https://maricablog.com/?p=792
JavaScript資格取得で開花！～仕事に生きる現実的なスキルとその取得法～
https://maricablog.com/?p=900
年収がアップする！JavaScriptエンジニアの現状と業界動向：日本の具体的な事例と解説
https://maricablog.com/?p=903
ライブラリはラッピングしておくと便利だよ（クラス編）
おはようございますこんにちわこんばんわ。どうもぶたです。
ライブラリをラッピングすると便利だという記事を関数メインに書きました。
https://qiita.com/rokumura7/items/f9361b255e3d21fdd188
今回はクラスを用いたラッピングに触れていこうと思います。
なお、前回に引き続きTypeScriptで書いて行きます。# ラッピングのメリット
基本的なモチベーションやメリットは変わらないので、大枠は前回の記事をご参照いただければと思いますが、下記のようなメリットがあります。
– インターフェースをよりシンプルにできる
– 影響範囲を限定的にできる
– 独自ロジックの追加が容易# クラスでライブラリをラッピングとは
関数と同様に、インストールしたライブラリを直接利用せず、クラスでラッピングすることですが、
これは**Adapterパターン（あるいはWrapperパターン）というデザインパターンの一つ**です。
ラッピングしたクラスや関数をラッパークラスとかラッパー関数と呼称したりします。# Adapterパターン（Wrapper
ライブラリはラッピングしておくと便利だよ（関数編）
おはようございますこんにちわこんばんわ。どうもぶたです。
開発を行う際に多かれ少なかれライブラリを利用しますよね。
皆様はどのようにライブラリを利用されていますか？
また、バージョン追随はどこまでされてますでしょうか？
メジャーバージョンのバージョンアップ対応とかしんどい時ありますよね。全てのケースにおいて当てはまるわけではありませんが、
**ライブラリをラッピングするととても便利**です。初学者からすると、「なんでこの処理ライブラリの処理を別関数（あるいはクラス）に記述し直してるんだ？」となったことがあるかと思います。
このあたりを書いていければと思います。今回は関数メインで。
なお、どの言語においても考え方は変わらないと思いますが、TypeScriptベースで記載させていただきます。クラスでの実装については別記事にしましたのでそちらをご参照ください。
https://qiita.com/rokumura7/items/7a48cd02832d4914739d
# ライブラリをラッピングするとは
ライブラリをラッピングするとは、インストールしたライブラリを直接
JWT(JSON Web Token)についての考察
## JWT(JSON Web Token)の定義
[RFC 7519](https://tex2e.github.io/rfc-translater/html/rfc7519.html “RFC 7519”)によると、`JWT`について以下のように定義されています。
> JSON Web Token（JWT）は、2つのパーティ間で転送されるクレームを表す、コンパクトでURLセーフな手段です。 JWTのクレームは、JSON Web Signature（JWS）構造のペイロードとして、またはJSON Web Encryption（JWE）構造のプレーンテキストとして使用されるJSONオブジェクトとしてエンコードされ、クレームをデジタル署名または整合性保護することができます。メッセージ認証コード（MAC）で暗号化されています。上記の内容が理解できることを目標に解説していきたいと思います。
:::note info
結構誤解されやすいのですが、`JWT`は定義を見ても分かるようにそれ自体が認証について規定しているわけではなく、認証が行われる際に利用される1つの手段に過ぎないことを理解し
Markdownをhtmlで出力する方法
## はじめに
Markdownをhtmlに変換するには､**レンダラー**が必要です｡
今回は`markdown-it`というレンダラーを使ってます｡## 準備
markdown-itをインストールします｡
“`bash:markdown-itをインストール
$ npm install markdown-itadded 6 packages in 2s
1 package is looking for funding
run `npm fund` for details
“`以下のようなフォルダ構造となります｡
“`bash:
$ tree -L 1
.
├── convert.js
├── input.md
├── node_modules
├── package-lock.json
└── package.json1 directory, 4 files
“`## 実行ファイル
以下を`convert.js`にコピペしてください｡“`javascript:convert.js
‘use strict’;const
{ pr
Node.js Test Runnerとビルトインモジュールのみでモジュールモックするヘルパーをつくった
## はじめに
以下の記事で、Node.js Test Runnerで、モジュールのサブセットをモックする方法を書きました。
https://qiita.com/ohakutsu/items/7145f083828df7f0e6e4
しかし、サブセットでないモジュールのモックもしたいときがあるなと思い調べたところ、モジュールモックをできる簡易的なヘルパーができたので紹介します。
なお、今回試すのはCJSです。
## ヘルパーを使ってテストする
サブセットでないモジュール（正しい名前がわからない）と言っているのは以下のようなものです。
“`js:add.js
module.exports = (a, b) => {
return a + b;
};
“`今回は、 [`node-fetch`](https://github.com/node-fetch/node-fetch) で試します。
テストしたいものは以下の`getExampleBody`関数です。
“`js:index.js
const fetch = require(“node-fetch”);
【環境構築】DockerでReactをyarnで起動して作成&起動する方法（JavaScript編）
## 背景
– [【環境構築】Reactのプロジェクト作成&起動方法について 〜npm・yarn & JavaScript・TypeScript〜](https://qiita.com/takuma-1234/items/ce8c815ae05678f5a403)で、`React`には複数のプロジェクトの起動＆作成方法があることをご紹介しました。
– この記事は、「2.1.`yarn`で`JavaScript`を使用して`React`プロジェクトを作成する方法」の解説記事になります。## 目標
– `yarn`で`JavaScript`を使用して`React`プロジェクトを作成できるようになる。## `yarn`で`JavaScript`を使用して`React`プロジェクトを作成する方法
– [docker-react-yarn-javascript](https://github.com/takuma-competition/docker-react-yarn-javascript)を`clone`し、起動に必要な`dockerfile`をローカルに準備します。https
textlint の実行結果を Codecov に送信する
## はじめに
Qiita CLI が beta release されました。
Beta release 後に textlint の結果を Codecov に記録するように設定しました。
設定に必要な情報や設定を簡単になりますが記載します。## 実行環境
今回背屮した repository の version は記載の通りです。
また、 textlint は設定済みの環境を想定しています。“`sh
> node -v
v18.14.2
> yarn -v
1.22.19
“`この記事では `yarn` を使って設定します。
`npm` を使っている方は読み替えてください。## 使用する パッケージ や action
### npm packages
https://www.npmjs.com/package/codecov.io
https://www.npmjs.com/package/textlint-formatter-codecov
### act
Seleniumから呼ぶと便利なJS（増やし中）
Seleniumからexecute_scriptを呼び出すことで、seleniumのメソッドを使わずに、DevToolsだけで動きが確認できる。タイトルはSeleniumと書いてるが、Rubyのchrome_remoteやPythonのPyChromeDevToolsでもJSは素通しで動かせる。
その際にちょっとした便利なJSを紹介。
（徐々に増やす予定）### 画面遷移せずにHTML（or JSONを取得したい）
“`js
await fetch(‘/’).then(res => res.text());
“`
今開いてる画面のHTMLならpage_sourceメソッドでいい。ただそれだと画面レンダリングしちゃう。レスポンスBODYをそのままもらいたいならそういうJSを書けばいい。### レスポンスヘッダーを知りたい
“`js
Array.from(await fetch(‘/’).then(res => res.headers.entries()));
“`レスポンスヘッダが配列の配列として帰ってくる。
ITエンジニアなのにまだ投資やってないの？ITエンジニアならChatGPTでクオンツシステム作って儲けようぜpart2
## 前回まで
ITエンジニアなのにまだ投資やってないの？ITエンジニアならChatGPTでクオンツシステム作って儲けようぜ(https://qiita.com/kazukichi/items/fa6433c3d0115c2b627b)## システムなんかで勝てるの？w
日本の投資家には批判的な意見もまだまだある（詐欺的なものも多いですから）みたいですが、エンジニアの皆さんなら分かるでしょう。出来る
ですよね。
そもそも、勝ってる投資家はいくつかの情報を判断して買いや売りのタイミングを測っていて、それは全て定量化した情報を元に判断してるわけですから。システムで勝てない！って言ってる人は結局その戦略が悪いだけでシステムが悪い分けじゃないわけです。
因みにITを駆使して、ブランド苺を生産している
**ミガキイチゴ**
というのがあるんですが、熟練職人の「感覚」で判断しているものを職人の視線を全てトラッキングして、
**どういう時に何処を見て判断しているのか**
を数値化して、成功しています。
要は、職人さんが言う「感覚でやってる」というのは実際感覚ではなく、言語化す
ライトボックスとは
## ライトボックス
:::note
**ウェブサイトやアプリケーションで画像やコンテンツをポップアップ表示するためのユーザーインタフェース要素**
:::## ライトボックスの実装方法の例
### HTMLのマークアップ
– **ライトボックスの内部に画像、テキスト、動画などのコンテンツを配置する**
+@ ボタンや閉じるアイコンなどのコントロールも追加### CSSスタイルの適用
– **ライトボックスのサイズ、位置、背景色、フォントなどの外観を設定**
+@ アニメーションやトランジションの追加も可能### JavaScriptの実装(ライトボックスの動作制御)
– **クリックやボタンのイベントリスナーを追加**
+@ クリックされた画像やボタンの情報を取得→対応するコンテンツを表示### レスポンシブ対応
– **ライトボックスをモバイルデバイスや異なる画面サイズに適応させる（レスポンシブデザインを考慮）**
+@ メディアクエリやフレキシブルなレイアウトを使用→異なるデバイスで適切に表示されるようにする### アクセシビリティの確保
– **キー
開発ツールに頼らず 様々な言語から WebAssembly（第５回）
WebAssembly は多くのプログラム言語からライブラリの様に呼び出す事が出来る。
WebAssembly のコードを書く方法は多くの記事で書かれているが、その使い方はフレームワーク等のツールに頼っている事が多い様だ。
本記事では、そのような便利ツールに出来るだけ頼らず JavaScript, Rust, Python, Ruby から WebAssembly を実行する方法を記載する。WebAssembly は新しい技術である。
目先の最先端ツールに飛びつくのもよいが、その基礎を学んで長く使える知識を身に着けないか？本記事はシリーズの第３回である。シリーズ記事の一覧は [第１回] の **#シリーズ記事一覧** に載せている。シリーズの記事を追加する時は [第１回] の一覧を更新して通知を行うので興味の有る人は [第１回] をストックして欲しい。
# 本記事の概要と過去記事の復習
[第３回] と [第４回] は WebAssembly のコードに状態を持たせる方法について記載した。
今回は WebAssembly に「クラス変数」の様な物を追加するコードを紹介する。
FirebaseのAPIキーが隠せなくて困った人おりゅ？
無題