JavaScript関連のことを調べてみた2021年08月23日

コンポーネント設計の基礎

ソフトウェアコンポーネントについて、Wikipediaでは以下のように記載されています。
[Wikipedia:ソフトウェアコンポーネント](https://ja.wikipedia.org/wiki/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88)
>事前に製作されたコンポーネント群を組み合わせて、電気製品や機械製品を作るようにソフトウェアを作れることを強調する。

このようにコンポーネント指向の開発ではいくつかのコンポーネントを組み合わせてサービスを開発します。
そのため、ひとつ一つのコンポーネントは様々な組み合わせに耐えうる設計をしなければいけません。
そのようなコンポーネントの設計を行う上での基礎的な考え方を紹介します。

## コンポーネントにマージンやポジションなどの外側のレイアウトを設定しない
コンポーネントが持つ情報はコンポーネントの内側の情報だけにとどめることで、外側がどんな状況でも

【JavaScript】画像投稿時のプレビュー機能

画像複数投稿機能以上に詰まっていたプレビュー機能。
ようやく解決できたので備忘録のために投稿します。
jsの記述のルールや基礎的なところ抑えていかなければと思いました。

下記解決後コード
2,14,15,30行目の記述に変更を加えています。

“`js
document.addEventListener(‘DOMContentLoaded’, function() {
if (document.getElementById(‘store-image’)){
const ImageList = document.getElementById(‘image-list’)

const createImageHTML = (blob) => {
const imageElement = document.createElement(‘div’)
imageElement.setAttribute(‘class’, “image-element”)
let imageElementNum = document.querySel

JSONについて　HTML やXMLとの違い

#JSONとは
JavaScript Object Notationの略で、ブラウザに表示するものです。
他にもブラウザに表示するものといえばHTMLやXMLなどがあります。
これらと比べて何が違うのでしょうか。

#HTML XML JSONの違い
ざっくりですが3つの違いをみていきましょう。

***⚫︎HTML***
***・マークアップ言語(文章に意味がある言語　）***
・タグ付けをしてわかりやすくしてある。
・webページ作成などで使う

*補足　　プログラミング言語はコンピューターに指示を出す言語

“`

Taro

taro@example.com

programmer

“`

⚫︎XML
・マークアップ言語(文章に意味がある言語　）
・

React + GraphQL + Apolloで無限スクロール(Offset-based)

React+Apolloで無限スクロールを実装した時の備忘録を残しておこう。
無限スクロールそのものより、GraphQLのページネーションの実装で考えることが多い気がする。
↓実装イメージ
# 1.前提知識・条件
## 1-1.実装環境やライブラリ
クライアントはReact(Javascript)、サーバー側はHasuraでpostgreSQLと繋げるようにし、クライアント側のGraphQLの取り回しはApolloを使用。
“`”@apollo/client”: “^3.3.19
“react”: “^17.0.2
Hasura v1.3.3
“`
無限スクロールのコンポーネントはreact-infinite-scroll-componentを使用
“`”react-infinite-scroll-component”: “^6.

chart.jsでレーダーチャートを作成

##■背景
レーダーチャートを作成する機会があり、実装したので参考にしていただけると幸いです。

##■レーダーチャートとは
レーダーチャートは、複数の項目がある変量を構成比に直すことなく正多角形上に表現したグラフ。中心を0とし各項目ごとに値が大きいほど外側になるよう表現する。


##■レーダーチャート実装
レーダーチャートを0から実装しようとすると、膨大な時間と労力がかかるので、今回は、chart.jsという JavaScript でグラフ(チャート)を描画するためのライブラリを使用しました。
chart.jsではレーダーチャートの他、折れ線グラフ、棒グラフ、円グラフ,散布図なども簡単に作成できます。

実装は至ってシンプル・・
①Chart.js読み込み
→CDNに公開されているjsファイルを読み込むことで、Chart.jsが使用可能とな

駆け出しプログラマ向け、実務で使える「変更容易性」ってなに？

# 前置き
こちらの記事は筆者が備忘録的にまとめたものです。
せっかく来てくれた読者の皆様にとっても役に立つように意識して書いてみましたので、
是非最後まで読んでみてください。では、Let us begin!

# 変更容易性(EoC: Ease of Changing | Modifiability)
へんこうよういせい とは

これは特に辞書など引っ張ってくる必要もなさそうですね。
意味は、変更のしやすさ になります。変更のしやすさと一口に言っても、

– 変更を加える際に必要な変更箇所の数
– 変更を加える際の他の実装への影響度
– 変更に要する時間

等々いろいろあるかと思います。

# 変更容易性をコードに適用した例

## 適用前（変更容易性 改善前のコード）
まずは変更容易性があまりないコードを見てみましょう。（下の問題点から見ると早いです）
タスクの進捗ステータスに応じた処理を実行する関数があるとしましょう。

“`javascript:javascript
// task は以下ステータス(status) のどれかを持つことにします。（以下 3つのみ です）
//

date-fnsで日時をフォーマットしたり、パースする

Javascriptで日付操作をするライブラリとして、[date-fns](https://date-fns.org/)を重用しています。
これまでは[moment.js](https://momentjs.com/)や[dayjs](https://day.js.org/)などが使われていたみたいですが
momentは開発が止まっていたり、date-fnsの方が関数型で個人的に読みやすいので
今関わっている案件でもmoment => date-fnsに書き換える作業などを行なっています。

という事で今回は、date-fnsでよく使っている操作を紹介したいと思います。

### フォーマット

“`javascript
import { format } from ‘date-fns’
import ja from ‘date-fns/locale/ja’

console.log(new Date())

// Dateオブジェクト => yyyy/MM/dd
format(new Date(), ‘yyyy/MM/dd’)

// Dateオブジェクト => yyyy/MM/

内容の異なる複数のモーダルを設置する

##やりたいこと
>内容の異なる複数のモーダルを設置する

##【方法】　data属性によって紐付けする
>data属性とは↓

https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes#attr-data-*

##HTML
>
モーダルのボタン：data-modal-open=”紐付ける値”
モーダル：data-modal=”紐付ける値”
modal-2,modal-3などと追加していけばそれと紐付けられたモーダルが出現する

>“`html:index.html

モーダル①

>

✖️

DirectCloud-BOXにファイルをアップロードするGitHub Actionを作ってみた

## はじめに

この記事は「[Qiita エンジニアフェスタ 2021](https://qiita.com/official-campaigns/engineer-festa/2021)」の参加記事です。

https://qiita.com/official-events/64ff6ba4e653a822fce9#%E6%A6%82%E8%A6%81

[DirectCloud-BOX](https://directcloud.jp/freeplan) は、[DropBox](https://www.dropbox.com/?landing=dbv2) や [Box](https://www.box.com/home) などのような、いわゆるクラウドストレージです (全部ﾅﾝﾄｶ Box ですね…)
上記ページの概要を見ればどのようなものかが掴めるかなと思います。

## 概要

DirectCloud-BOX の API を利用し、GitHub Actions のワークフロー内からファイルをアップロードする JavaScript Action を作ってみました。

https:

モダンなJSフレームワークは宣言型プログラミングを選ぶ

モダンなJSフレームワークである`Vue.js`や`React`などは宣言的という特性を取り柄としている。

Reactの公式サイトによると、宣言的なViewを

> アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。

> 宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしやすいものになります。

と解釈している。

この記事では、宣言的方式なとそうではない方式との違いを理解した上で、なぜモダンなJSフレームワークは皆宣言的方式を選ぶのかについて考える。

## 宣言的プログラミングと命令的プログラミング

Wikipediaにあるわかりやすい定義によると、宣言的プログラミング（Declarative programming）は「何を得たい」というWhatの部分を記述し、命令的プログラミングは（Imperative programming）　は「どうやって得るか」つまりHowの部分を記述する。

具体例を挙げる。

jQueryチートシート

# はじめに
最近jQuery関連について学習したので**チートシート**を作成しました！
よく使うものを中心に、使い方や記述のポイントを簡単にまとめたのでご活用ください。

## 目次
[1.予約状態](#1-予約状態)
[2.セレクタの指定方法](#2-セレクタの指定方法)
[3.Family Treeの探索](#3-Family Treeの探索)
[4.よく使うメソッド一覧](#4-よく使うメソッド一覧)
[5.その他のメソッド](#5-その他のメソッド)
[６.each()](#5-each())
[６.イベント処理](#5-イベント処理)
[６.非同期通信: $.ajax()](#5-非同期通信: $.ajax())

## 予約状態（HTMLを先に読み込む処理）

“`php:index.html
!DOCTYPE