Atomic Design再考察（ButtonコンポーネントはAtom or Molecule?）

# はじめに
N番煎じですが、Atomic Designで開発していてAtomsの扱いに困ったので、再考察していこうと思います。

# Atomsで困った点
Buttonコンポーネントは他のコンポーネントが子要素として入ってくるけど、Atomsに入れて良いのか？という点で困りました。

この問題に関して、「[Atomic Designってデザイナーには難しくない！？という話](https://qiita.com/rhirayamaaan/items/7f990e146ec01f2e7e08)」の中で考察されているので、これで良いんじゃないか？と思う人もいるかもしれませんが、実際に実装していくと上手くいかない部分が出てくるので、再考察していきます。

先ほどの記事で取り扱われているButtonコンポーネントの実装はこのようになっています。

“`react:button.tsx
import React from ‘react’;

const Button = ({ onClick, children }) => (
onCli

『フリマアプリ』カテゴリー一覧・動的ページスクロール機能

#はじめに
今回実装する機能はこちら

ページ上部に表示されているカテゴリー名の親要素ボタンがクリックされるとその要素の子要素一覧のページ位置までスクロールされる機能。

記事を作るにあたってこのようなカテゴリー一覧をまだ作成できていない方もいると思うのでその方向けにもhaml,scssを用いたビューのコーディングから説明していくので機能の実装方法だけ知れればいい方はページ下部まで飛ばしてください

##カテゴリー一覧の作成
カテゴリー一覧はancestryを用いて作成しています。もしancestryが分からない方や実装できていない方はhttps://qiita.com/mugioka/items/3f2880867ca36116a895 ←こちらの記事を先に見てください

それでは早速ham

webpack超超入門(備忘)

# webpackとは
webpackはフロントエンド開発用のモジュールバンドラー、簡潔にはモジュールをまとめてくれるツール

## 用語
– モジュール
javascriptやcssなどのファイル。

– バンドル/バンドルファイル
モジュールが一つにまとめられたファイル。

– ビルド
バンドルを出力するまでの一連の処理

## 利点
– 機能ごとにファイルを分割(モジュール化することができる。)
– 可読性の向上
– 開発作業の分担やテストがし易くなる
– モジュールの再利用性を向上できる。
– 転送効率を向上させることができる。
– 最適化されたファイルを出力できる。

## install
何はともあれやってみないといまいちよくわからないので、早速nodeからwebpackをインストール。

– 適当なディレクトリを切って、package.jsonを初期化

“`shell
yarn init -y
“`

– webpackとwebpack-cliをインストール(webpack4からcliが別モジュールとして管理されるようになったため、別途インストールが必要らしい。

4² + 6² + 8² + … + 18² + 20² + 22² = 2020 になるというネタを検算するパクり記事

[7²+8²+9²+…17²+18²=2018(年)になるというネタがホントかどうかChromeで検算する](https://qiita.com/m_mitsuhide/items/c66a392fb275d2e8b7af)
というネタから派生した
[【再帰関数に挑戦】超短いワンライナーの計算結果が2018になる過程を読み解く](https://qiita.com/m_mitsuhide/items/e098a55fe33a8501f4bd)
という記事を興味深く読ませていただいたあとで、「もしかしたら2020年にもなんかそういうのあるのかな」とWikipediaを見てみたら、ありました

4² + 6² + 8² + … + 18² + 20² + 22² = 2020
[2020](https://ja.wikipedia.org/wiki/2020)

ワンライナーの再帰処理にぴったりだったので、ちょいと書き換えて試してみます

“`javascript
console.log(f=x=>x>3?x**2+f(x-2):0)(22))
“`
![result_2020

JavaScriptをすこーし勉強してみたので書き留める

最低限の知識一応あるけど、復習も兼ねて書いてみることにするの巻。

# use strict
ざっくり言うと、**モダンなモード**にする

– スクリプトの先頭に記載する
– 記載されている場合、最新の方法で動作する
– 宣言以前にコードを記載するとstrict modeにはならない
– コメントを記載することは可能である
– 関数の先頭に書くことが可能である
– その場合、その関数にのみ動作する
– 通常はsprict全体に使用する

“`
“use strict”;

// このコードはモダンな方法で動作します。
…
“`

# 変数

– 情報を保存するために使用される
– データのための “名前付けされた格納場所”

JavaScriptで変数宣言する際は`let`キーワードを使用する

“`ruby:宣言
let {変数名};
“`

“`ruby:代入
{変数名} = ‘Hello’;
“`

“`ruby:初期化
let {変数名} = ‘Hello’;
“`

`var`キーワードも存在する

– ちょっと古い
– 違い

Let’s Encryptを使用しているウェブページをブロックするプロキシサーバー

**Let’s Encrypt**はドメイン認証証明書を無料で発行してくれるたいへん素晴らしいサービスです。ウェブサイトをHTTPSで提供するためには証明書が必要ですが、Let’s Encryptの登場以前は認証局から有料で証明書を発行してもらうのが主流でした。それを無料で発行してもらえるのは大変ありがたいことです。また、発行プロセスは自動化されておりとても簡単です。筆者も個人のウェブサイトは全てLet’s Encryptで証明書を取得しています。

ところが、**Let’s Encryptが発行する無料の証明書なんて信頼できない**という教義を信奉するタイプの人々も存在するようです。筆者は最近Twitterで見かけました。ということで、そのような思想を持つ方も安心してインターネットを利用できるように、**Let’s Encryptによって発行された証明書を使用しているウェブサイトのみブロックするプロキシサーバー**を作りました。

完成品はこちらです。→ https://github.com/uhyo/proxy-for-mammonists

ソースコードをクローンし、`npm i

【2020年版】v-modelをカスタムコンポーネントで実装しよう

# カスタムコンポーネントでv-model使いたいのに難しくない？

公式のドキュメントをみてもパッと見つからないし、いろんなゴリ押し代替案があってコードが煩雑になる…
と思いきやカスタムコンポーネントでもきちんとv-modelを利用する綺麗な手法がありました。

ほぼ備忘録的な記事ですが、お役に立てれば幸いです。

#手順
### すっ飛ばして見たい方は“childComponent.vue“のコードを参照してください。

“model“プロパティという物が公式の機能にありました…いつ実装されたんだろうか。
ともかくこれをコンポーネント内で使います。

parentComponent.vue内でchildComponent.vueを使う構成です。

“`vue:parentComponent.vue

```

h1の文字にアニメーションを加えるので、getElementById()を用いてID属性の要素を取得します。

```index.html

この文字が大きくなります

```

CSSのmargin、fontSizeなどの値を変化させていけば動いているように見えます。

```in

【JavaScript】forEach,mapメソッドの違い、使いどころ

#【JavaScript】forEach,mapメソッドの違い、使いどころ
forEach(),map()の違い、使いどころを整理しました。

##forEach
引数それぞれ(=each)に同じ処理を実行する。
使いどころ：for文よりも短く書きたい場合。

const a=[0,1,2,3];

a.forEach((tempA)=>{　　　　 //aの要素を受けとるtempAという入れ物を作る
return tempA += 1;　　　 //tempAに対して1ずつ加算
})

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

##map
配列に同じ処理を関連付けして（=map）、新しい配列を作る。
使いどころ：元の配列を残したまま、新しい配列を作るとき（比較、行列的な処理？）

const a = [0,1,2,3];
const b = a.map((tempA)=>{　//配列aを基に配列bを作成。forEach同様、循環処理を一時的に受け取るtempAを作る

Kinx アルゴリズム - マージソート

# アルゴリズム - マージソート

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。「プログラム＝アルゴリズム＋データ構造」。アルゴリズムの実装例をご紹介。

元ネタは「C言語による（30年経っても）最新アルゴリズム事典」。今回はソート（マージソート）です。

* 参考
* 最初の動機 ... [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ ... [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。

アルゴリズムと言えばソート。今回はマージソートです。

## マ

LIFF新機能の「liff.id」を試してみた

# LIFF新機能の「liff.id」を試してみた

この記事は[すごくなりたいがくせいぐるーぷ](https://qiita.com/organizations/sgg)#GWアドベントカレンダー3日目の記事です。
[すごくなりたいがくせいぐるーぷ | GWアドベントカレンダー](https://gw-advent.9wick.com/calendars/2020/87)

## はじめに

LIFFに`liff.id`というプロパティが追加されたので仕様などを調べてみました。

## 機能

>liff.init()に渡したLIFFアプリID（String型）を保持するプロパティです。
liff.init()を実行するまでは、nullです。

と公式リファレンスにおる通り、どうやらliff.in

ことばを学ぶ　LEARN GATSBY 週間 #5日目

こんばんは！

今回はページネーション機能を使ってみたいと思います.
ページネーション機能を利用するためのプラグインは何個かあるのですが、そのなかで一番便利な (悪く言うとプラグイン任せな) `awesome-pagination` を使います.
まずはプラグインをインストールします.

```
npm i gatsby-awesome-pagination
```
`gatsby-node.js` に以下を追加します.

```gatsby-node.js
const { paginate }= require('gatsby-awesome-pagination')

const bloglistTemplate = path.resolve('./src/templates/blog-list-template.js')
paginate({
createPage,
items: res.data.allMarkdownRemark.edges,
itemsPerPage: 3,
pathPrefix:

【JavaScript】spliceメソッドの使い方

#JavaScript
spliceメソッドの使い方について整理しました。

使いどころ：要素の位置が判明している状態で、連続した要素を削除or削除+追加する場合
shift,unshiftのようなこともできるが、ソレを使った方が早い。

##splice
配列に対して位置指定で削除、追加を行うメソッド

削除する場合の記法
splice(変化が開始する位置,削除する要素の数)

const a=[0,1,2,3];

a.splice(0,1);//先頭1要素を削除。shiftと同じ
console.log(a);//[1,2,3]

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

削除して追加する場合の記法
・splice(変化が開始する位置,削除する要素の数,追加する要素1,追加する要素2……)

const a=[0,1,2,3];

a.splice(0,0,-1);
console.log(a);//[-1,0,1,2,3]。unshiftと同じ

a.splice(1,2

TypeScriptで学ぶデザインパターン〜Decorator編〜

# 対象読者

- デザインパターンを学習あるいは復習したい方
- TypeScriptが既に読めるあるいは気合いで読める方
- いずれかのオブジェクト指向言語を知っている方は気合いで読めると思います
- UMLが既に読めるあるいは気合いで読める方

# 環境

- OS: macOS Mojave
- Node.js: v12.7.0
- npm: 6.14.3
- TypeScript: Version 3.8.3

# 本シリーズ記事一覧(随時更新)

- [TypeScriptで学ぶデザインパターン〜Iterator編〜](https://qiita.com/junkimatsuda/items/c5b016b9762f29ef6f50)
- [TypeScriptで学ぶデザインパターン〜Adapter編〜](https://qiita.com/junkimatsuda/items/e8523185d14e53279fb8)
- [TypeScriptで学ぶデザインパターン〜Template Method編〜](https://qiita.com/junkimatsud

【JavaScript】unshift,shift,push,popの違い

#【JavaScript】unshift,shift,push,popの違い

JavaScript初学者の視点で、備忘録兼ねて書きます。

配列を操作するunshift,shift,push,popの機能を整理してみました。

個人的に一番使うのはpush。
pushの反対はpop,shiftの反対はunshiftと覚えることで2つの暗記でまとめられます。

##unshift
配列の先頭に追加する

let a = [1,2,3];
let b = a.unshift(0);

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

##shift
配列の先頭から除外する

let a = [1,2,3];
let b = a.shift();

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

##push
配列末尾に追加する

let a = [1,2,3];
let b = a.push(4);

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

##p

JavaScript 連想配列のキーが「全部一致している」や「一部含まれてる」を判定したいとき

##こんな感じの連想配列があって、「全部フルーツ？」とか「ドリンクが含まれてる？」とか調べたいとき

```javascript
const foods = [
{
id: 1,
name: 'Apple',
category: 'fluits'
},
{
id: 2,
name: 'Banana',
category: 'fluits'
},
{
id: 3,
name: 'Grape',
category: 'fluits'
},
{
id: 4,
name: 'Carot',
category: 'vegetables'
},
{
id: 5,
name: 'Tea',
category: 'drink'
}
]
```

##everyとかsomeを使う?

```javascript

// foodsが全部フルーツか？
const matchFluits = foods.every(item => item.cate