JavaScript関連のことを調べてみた2023年02月17日

React Qiita APIでビュー数を取得して表示する

## やりたいこと
* Qiita APIで記事ビュー数を取得する。
* 取得したビュー数を表示する。

## 参考にしたサイト
[こちらのサイト【Reactでのaxiosの使い方【外部APIの取得方法】】](https://yoheiko.com/blog/react%E3%81%A7%E3%81%AEaxios%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%80%90%E5%A4%96%E9%83%A8api%E3%81%AE%E5%8F%96%E5%BE%97%E6%96%B9%E6%B3%95%E3%80%91/)が参考になりました。

## 実践
### QiitaのAPIアクセストークンを作成
QiitaのAPIを利用するにはまずアクセストークンを作成する必要があります。
こちらの[ユーザー管理画面](https://qiita.com/settings/applications)から作成しておきましょう。
![スクリーンショット 2023-02-17 10.52.13.png](https://qiita-image-store.s3.ap

textlint

## textlint
[textlint](https://textlint.github.io/)
[textlint-ja](https://github.com/textlint-ja/)

自然言語対象のlinter

### できること
– 校正ルールの自作
– 校正ルールを組み合わせて独自のルールセット作成

### 対応するファイル形式
– テキストファイル(.txt)
– Markdownファイル(.md)

## 準備

### npmの初期化

“`:terminal
npm init -y
“`

### textlintをインストール
“`:terminal
npm install textlint
“`

## ルールの導入

### ルール「ら抜き言葉を検出」をインストール
“`:terminal
npm install textlint-rule-no-dropping-the-ra
“`

### 動作確認用ファイル作成
“`:test.txt
来れる
後悔する度に
“`

### textlintを実行
“`:terminal

ループと末尾再帰

順を追ってループを末尾再帰に書き換えます。

【注意】考え方を説明するのが目的です。JavaScript で敢えてループを末尾再帰で書く必要は特にありません。

# 階乗

階乗は 1 から指定した数までの積です。

“`math
5!=1×2×3×4×5
“`

## ループ

ループで階乗を求めます。

“`js
function fact1a(n) {
let a = 1;
for (let i = 2; i <= n; i++) { a *= i; } return a; } ``` ```text:実行結果 > fact1a(5)
120
“`

### while

`for` を `while` で書き換えます。

“`js
function fact1b(n) {
let a = 1;
let i = 2;
while (i <= n) { a *= i; i++; } return a; } ``` ※ 実行結果は同じなので省略します。 変数への代入をまとめて行うように書き換えます。処理内容は同

Reactでコンポーネントした時に使うCSS-in-JS

# CSS-in-JSとは
Reactでコンポーネント分割した時に、CSSをコンポーネント化したJavaScriptに書いて
管理することです。

# 実際に書いてみる
まずはCSSのファイルです。
“`Styles.css
.input-area {
background-color: aqua;
width: 400px;
height: 30px;
padding: 8px;
margin: 8px;
border-radius: 8px;
}
“`
これをInPut.jsxに書いていきます。

“`InPut.jsx
import React from “react”;

//書き方はJavaScript
const style = {
backgroundColor: “#00ffff”,
width: “400px”,
height: “30px”,
padding: “8px”,
margin: “8px”,
borderRadius: “8px”
};

export const InputTodo = (props

引数、戻り値について

javascriptの勉強を進めている中で私が初めてぶつかった壁である引数と、戻り値についてメモとして残します。

## まず意識したいこと３つ

* 引数は、値を渡す側と値を受け取り処理をする側があるということ。
* 戻り値は、受け取った引数を使って完了した処理を、呼び出し元へ返す値ということ。
* 処理を呼び出す際に、引数の受け取る側に値をセットすること。

“` javascript:例文
function greeting(name) {
return ‘ようこそ、’ + name + ‘さん’;
}
console.log( greeting(‘佐藤’) ); // 結果＝＞　ようこそ佐藤さん
“`

こちらのコードでは、greetingという関数があり、４行目のconsole.logで呼び出しています。

**引数の渡す側となるのは4行目の(‘佐藤’)です。**

4行目のgreeting関数呼び出しの際にセットしていますね。
この佐藤がgreetin関数の(name)に置き換わるイメージです。

**なのでgreeting(name)は値を受け取る側

JavaScript　ES2023で導入された非破壊的メソッド

# ES2023で導入される非破壊的メソッドを紹介します

* toReversedメソッド
* toSortedメソッド
* toSplicedメソッド
* withメソッド

# toReversedメソッド

* reverseメソッドは**破壊的**に配列の要素を逆順にする
* toReversedメソッドは**非破壊的**に配列の要素を逆順にする

“`sample1.js
// reverse
const a = [1, 2, 3];
const b = a.reverse();

console.log(a); // [3, 2, 1]
console.log(b); // [3, 2, 1]

// toReversed ?
const c = [1, 2, 3];
const d = c.toReversed();

console.log(c); // [1, 2, 3]
console.log(d); // [3, 2, 1]
“`

# toSortedメソッド
* sortメソッドは**破壊的**に配列の要素をソートする。
* toSortedメソッドは*

nodejsでaws-sdkを使った時にハマったこと

# はじめに

`AWS Lambda` `runtime: nodejs`を使って
`S3`にファイルをアップロードしようとした際につまづいたことをメモ。

# 環境

* aws-lambda
* runtime: nodejs 14.*

# 結論

#### `aws-sdk`にはV2とV3がある

#### そして、私の環境ではV2だと動きませんでした。

クラメソにも記事がありました。

https://dev.classmethod.jp/articles/aws-sdk-for-javascript-v2-v3-diff/

# 導入方法の違い

“`bash
// V2
$ npm install aws-sdk

// V3
$ npm install @aws-sdk/client-s3
“`

# S3へオブジェクトをuploadするときの違い

## V2の場合

“`typescript
import * as AWS from ‘aws-sdk

ESLintのdisableコメントに注釈（コメント）を付ける方法

コメントの付け方を知らないとdisableコメントの上にコメントを書き2行になってしまいます。
ですが、disableの後に続けてコメントを記載する方法があります。
方法は`disable`コメントの後に` — `（スペース、ハイフン2つ、スペース）をつけるとコメントを記述することができます。

“`javascript:
// hogeは使わない
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const hoge = ‘hoge’
“`

“`javascript:
// eslint-disable-next-line @typescript-eslint/no-unused-vars — disableする理由も書けてスマートです
const hoge = ‘hoge’

/* eslint-disable @typescript-eslint/no-unused-vars — 囲む場合も同様です */
const hoge = ‘hoge’
/* eslint-enable @typesc

paizaラーニング レベルアップ問題集 二分探索メニュー応用編 JavaScript カードゲーム (paizaランク S 相当)

カードゲーム (paizaランク S 相当)

https://paiza.jp/works/mondai/binary_search_advanced/binary_search_advanced__card_game

# 考え方

好きな順番でカードを出せるので、好きな順にソートできる。
考えやすいように、paizaの手札を小さい順にソートする。

xで二分探索をする。
仮にx=midとして、ゲームをしてみる。

自分のカードの一次関数はx=midを代入し計算して整数値にしておく。
考えやすいように、自分の手札を小さい順にソートする。

ゲームにできるだけ勝つ方法。
自分のカードを小さい順に見ていく。
相手のカードも小さい方から順に比較する。相手の見ているカードのインデックスを変数posとする。
今見ている自分のカードが、相手のカードより大きければ、勝ち。
勝ったら、相手の次に小さいカードと、自分の次に小さいカードを比較する。
負けたら、相手のカードはそのままに、自分の次に小さいカードを比較する。
これを繰り返す。
このやり方だと、posの値がそのまま自分の得点になっている。

SvelteのSPAでストアとディスパッチャを用いてデータを状態管理する

Svelteに関しては今まで[JSフレームワークSvelteでデータ処理を色々と実践してみた](https://qiita.com/drafts/605b605daabc36003876/edit)という記事を書いてみたことがあり、この記事ではルーティングに際しては、基本のキということで、かなりゴリ押しで書いていました。

ですが、Svelteにはストアというデータ管理ライブラリやディスパッチャという処理分岐制御用のメソッドが実装されており、それを活用すれば、もっとスムーズに記述でき、VuexやReactのuseReducerフック、AngularのRxJSのように状態管理もできることがわかりました。ところが、これらはかなり挙動に癖があり、ディスパッチャはコンポーネント間でイベントとデータを受け渡すことができるのはいいとして、従来の方法では伝達元のデータ同期が取れなかったり、またディスパッチャもストアもモジュール内で使用できなかったりと、かなり面倒な制約がありました。そして、試行錯誤の末、気をつけなければいけない点がいくつかありました。

そして、ストアにしてもディスパッチャにしても、

THREE.TextureにHTMLImageElementを適用する方法

# 概要
本記事では、Three.js内部のテクスチャとして[TextureLoader](https://threejs.org/docs/#api/en/loaders/TextureLoader)を使って画像や動画をテクスチャとして扱うことはよくあると思いますが、公式ドキュメントの例として言及されていない`HTMLImageElement`をテクスチャとして適用する方法を扱います。

# サンプルコード
非同期で画像から`HTMLImageElement`と`THREE.Texture`の生成をまとめて行えるようにしてみました。
“`typescript
const [imageElement, imageTexture ] = await new Promise<[HTMLImageElement, THREE.Texture]>(
(resolve) => {
const img = new Image()
img.crossOrigin = ‘anonymous’ // cors対応、これをしないとTHREE.Textureが

コピペで使える郵便番号自動入力機能をChatGPTと作った

# コピペで使える郵便番号自動入力

都道府県はセレクトボックス
他はテキストボックスというよくある郵便番号住所入力機能

実装は10分、ChatGPTくんとの合作
要素選択のID名を変更すればそのまま使えます


“`javascript
async function getAddress() {
const zip_label = document.getElementById(‘zip_label’); // 郵便番号フォームのラベル
const zipcode = document.getElementById(‘zip’).value; // 郵便番号テキストボックス

const prefOptions = document.getElementById(‘pref_id’).options; // 都道府県の選択

CSS テキストの影


### ベストをチェック 25+ 美しい [CSS テキスト シャドウ](https://frontendin.com/css-text-shadow-example/) あなたのウェブサイトのために

CSS テキスト シャドウは、Web ページのテキストに視覚効果を追加する方法であり、深さの錯覚を作成し、テキストを背景から際立たせます。テキストの影は、CSS プロパティ text-shadow を使用して作成されます。これにより、影の色、オフセット、ぼかし、広がりを指定できます。

text-shadow プロパティの構文は次のとおりです。

text-shadow: [horizontal offset] [vertical offset] [bl

元記事を表示

Google Spreadsheet から画像データを取得する

GoogleSpreadSheetから画像データを取り出したくても、
GoogleSheetAPIからは画像の加工や移動ができるのみで、取り出すことはできないようです。
が、 **base64エンコードした画像を文字列としてセルに貼り付ける** という~~裏技~~ tips があります。

例えば以下はHTMLの中に画像データが内包されています。

```







ViteとBootstrapで最速で開発しよう

[](https://asameshicode.com/vite-bootstrap/)

今日は、JavaScriptでウェブ開発するにあたり、最速でコーディングに入れる環境を作ります。

現在のフロントエンド開発ではReactやVueや欠かせないですが、これを使わずにVanilla JavaScriptで開発をしたいときに有利です。

npmを使うのでライブラリを管理したい場合に最適になります。

さらに[Bootstrapのセットアップ](https://getbootstrap.com/docs/5.3/getting-started/vite/)の仕方も紹介するのでプロジェクトをセットアップしたのちにすぐにコーディングに取り掛かることができますね。

## **今日の環境**

* npmがインストールされていること
* Ja

元記事を表示

TypeScriptを活用してのWebアプリケーションの作成（コンパイルとバンドル）

この動画はプログラミングチュートリアルさんの「本当の初心者からTypescript×Webpackの開発環境構築までをハンズオン形式で学ぼう！」をまとめたものです。

そもそもTypescriptとは、

Javascript + 型付 = Typescript

このように型付という機能を付与しただけなのがTypescript(以下、TS)である。
型付という機能を実装することで静的型付言語となる。

そして、そもそも型とは何か。

JS(Javascript)での変数宣言は以下のようになる。
```
//変数の再宣言が出来る定義
var list = []:
var suuzi = 1;

//変数の再宣言が出来ない定義
const name = "プログラミング";
```

型の宣言がないため、変数に何を入れるのか入れるまでわからない。

一方でTSでの変数宣言は以下のようになる。
```
//変数の再宣言が出来る定義
var list:String[] = [];
let suuzi:N

元記事を表示

Lappinna技術部始動！

# 初めに！
皆さん始めまして！Lapinna技術部のしゃちょ～（仮）です！
このアカウントについての説明をさせていただきます！（やるとは言っていない）


※上記イラストに深い意味はありません。よろしくお願いいたします。

## 記事概要
このアカウントは、初心者向けの記事を投稿するアカウントとなっております。
現職でIT企業に勤めているプロのエンジニアが中心となって記事を上げていく予定となっております！（頑張ってね！

# 投稿予定
## AI関係（機械学習・深層学習/ニューラルネットワーク）
・AIに必要な画像処理技術をまとめてみた（仮）

## WEB開発（PHP/Laravel・HTML・CSS・JS）
・プロのエンジニアが初心者のためのWEBページ作成指導書作ってみた（仮）

## ゲーム関係
・Unityでインベーダー

元記事を表示

Java C# JavaScript のクラスの違いを比較する

# Java C# JavaScript のクラスの違いを比較する

## はじめに

最近 Java を軽く学習したり、JavaScript の開発業務をやったりしてクラスにいろいろ触れてきたので、アウトプットを兼ねて 3 種類の言語のクラスについて比較していきます。クラスとは何か、オブジェクト指向とは何かという概念的な話は今回は触れません。

## 念のためクラスとは
とはいえ、軽くは触れておきます。
Wikipedia を参考に簡単にいうと「クラスとは、オブジェクト指向に登場する概念のこと。オブジェクトを生成するための設計図あるいはひな形に相当するもの」です。

## クラスの作り方

まずはクラスの作り方から比較していきます。

### コード

C#

```C#
class TestClass
{
//クラスの中身
}
```

Java

```java
class TestClass
{
// クラスの中身
}
```

JavaScript

```javascript
class TestClass {
// クラスの中身
}

// クラス式
let Te

元記事を表示

CSSをCSS in JSに変換しよう！(ついでに色々変換できるツールの紹介)

# CSSをCSS in JSに変換しよう！
## CSS in JSを使う時の悩み
FigmaやCSS設定ツールなど、便利なデザインツールの多くはCSSを出力します。しかし、CSS in JS(JSのオブジェクトで定義するタイプ)はCSSで多いkebab-caseではなく、camelCaseで書かれる(JavaScriptの流儀に則る)ので出力されたCSSをそのまま貼り付けることができません。

- kabab-caseをcamelCaseに直して…
- 単位付きの値をクオテーションで囲んで文字列にして…
- セレクタはネストしたり、キーを文字列にしたり…

このようになかなか面倒な作業です。vanilla-extractのように型補完の効く便利なCSS in JSがあっても、この辺りが厄介でCSSがそのまま使えるCSS Modulesや、既にコンポーネントになってるMUIやChakra UIを使う理由の一つになる時があります…

最近、筆者は会社の研修でFigmaのデザインをvanilla-extractで再現することになり、Figmaなどから貼り付けたくなったので調べてみました。

元記事を表示

エンジニアインターン15日目

今日は完成させたスクレイピング機能を自社アプリの管理画面から使えるような仕組みを作ることになった。使う言語はVue.jsで、初めての言語だったため、コードを読み解くので精一杯だった。まじで頭抱えながらやっていたが、なかなか進まない…こんな時に頼るのはやはり先輩エンジニア！一緒にコードを読み解いてくださったり、これから実装していくタスクのこともイメージしやすく説明していただいたりほんとに助かる存在だ。でも、自分一人でも読み解けるようにならないといけないとも思っている。でもできない。とにかく今はたくさんコードを観て、たくさんコード書いて、成長していくことがとても大切だと感じた。いまはほんとに頑張り時だなと改めて思った。今日は作業もあまり進まず、技術的なことは書くことがない…まあ頑張らないといけないってことだな。

元記事を表示