ほーむぺーじのソースをこまかくみて判別

ネット上にあるサイトを開いて「これと同じで良い」みたいな
ムチャブリをされた時に、できるだけ効率的に、このサイトが
何で作られているのか？を判別して、似たようなサイトを作るための方法です。

ちなみにChrome拡張のVue/ReactのDevToolを入れておくと、
もろにVueやReactの場合は反応する。一番早い判別はコレ。

###■sitesucker
https://nuconeco.net/sitesucker/
まず構造とかちゃんと見る。CSSとJSは最近はほぼ圧縮されてると思うので、
コレだけで何かを特定するのは難しいですが、
JSで書かれてるヤツは、バーチャルなルーティングなので
実物のディレクトリとかDOMが書かれたhtmlは落ちて来ないです。
DOMが落ちてくるという事は静的サイトジェネレーターか、SSRかな〜と推測。

###■Prepros
https://prepros.io/
とりあえずローカル立ちあげて、ブラウザのデベロッパーツールで見る。（一番速い）
細かいパーツのCSSはコレで見たほうが速いかもですが、
全部のパーツをデベロッパーツールで拾うのは地獄なのでやらない。

###■Sourcetree
https://www.sourcetreeapp.com/
弄くり回す場合は、ローカルに初期状態を保存する。（一番ラク）

###■Snappy Snippet
https://github.com/kdzwinel/SnappySnippet
htmlとcssを逆展開する拡張を入れる。入れ方は下記とほぼ同じ。
でもクラス名が本物と違うようになる。
https://naokixtechnology.net/javascript/2851
HTMLとCSSだけをちゃんとマネしたい場合は「ウェブページ、完全」でダウンロードした方が
安定しそうですな。

###■codePen
https://codepen.io/pen/
ココに貼ってhtmlとCSSを見る。昔のサイトならコレで大概理解できるが
最近のはJSで制御されてるので、ほぼ動かない。
※ほぼ動かないって事はJSフレームワークっぽい何かを使ってる。

このやり方は、HTMLとCSSは独自のクラスに置き換わるが、圧縮されてない感じに見える。
表面のスタイルだけをマネしたい、という場合はコレで一旦やる。

###■chromeの「デベロッパーツール」から「ソース」を見る
https://ascii.jp/elem/000/000/999/999122/
Webpackやらなんやらのツールは著作権表記は残すので、
そこからある程度予測する。例えば、こんな表記がある

```js
/*!
 * VERSION: 2.1.3 //←ココ
 * DATE: 2019-05-17
 * UPDATES AND DOCS AT: http://greensock.com //←ココ
 *
 * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
 * This work is subject to the terms at http://greensock.com/standard-license or for
 * Club GreenSock members, the software agreement that was issued with your membership.
 *
 * @author: Jack Doyle, jack@greensock.com
 */
```
サイト名を指定してバージョン番号で検索します。

```
site:http://greensock.com VERSION: 2.1.3
```

大概の場合、これで何を使っているのか分かる。上の場合は`gsap`ですよね。
https://greensock.com/gsap-plugins/

```
/*!
 * UAParser.js v0.7.19
 * Lightweight JavaScript-based User-Agent string parser
 * https://github.com/faisalman/ua-parser-js
 *
 * Copyright © 2012-2016 Faisal Salman <fyzlman@gmail.com>
 * Dual licensed under GPLv2 or MIT
```
こちらは、ちゃんとURLが載ってました。モバイルなどの判別ですね。
https://github.com/faisalman/ua-parser-js

```
/*
object-assign
(c) Sindre Sorhus
@license MIT
```
なんかのポリフィルですね。あとコレnpmのパッケージ以外配布してないので、
このサイト、やっぱり何かの「jsフレームワーク」を使ってるっぽい。
https://www.npmjs.com/package/object.assign

###■圧縮されたmain.jsをできる限りみる。
多分`Nuxt`か`Next`で作ってるんだろうと予想してみる。
（サクサクなパフォーマンスからも`React`っぽい何かだと感じる。）

この圧縮されたjsは目で見ることは不可能ですので整頓する。
https://beautifier.io/
とりあえず圧縮されたJSを引き伸ばしてみて、「雰囲気」を感じ取ります。
雰囲気から元のソースを想像して何を使ってるんだろな〜を予測します。

####■※ここから先、さらにおそろしく地味な作業です。
そして開いている元ソースを書けないから、多分ワケわからんと思うんで、
あとは興味あったら読んでくだせぇ…。

`$("#`で検索して、なんとなく`jQuery`使って動かしてるっぽいDOMを特定する。
jQueryをminifyしただけの場合はコレで簡単にコピーできるんですが、
...あ、あんまりjQueryを使ってないかも。シンタックスシュガー的な使い方に。

```javascript
addEventListener("mouseenter"
addEventListener("mouseleave"
addEventListener("click"
```
`click`で検索してイベント系の周りを見渡していると、
`addEventLister`に変換されているので、元は`onClick`的な感じだったのかも。

で、その下のほうに何かの残骸が見えてきます。

```javascript
WebGLRenderer(100, 100, {
```
あ〜これ、上記の書き方は`three.js`ですよね。。メニューはこれで表示してるのかな。。？

```javascript
              key: "show",
              value: function() {
                  this.container.dataset.state = "show", s.b.fromTo(this.logo, .8, {
                      opacity: 0,
                      x: -40
                  }, {
                      opacity: 1,
                      x: 0,
                      ease: u
                  })
              }
          }, {
              key: "hide",
              value: function() {
                  T.hide(), this.container.dataset.state = "hide", s.b.to(this.logo, .8, {
                      opacity: 0,
                      x: 40,
                      ease: u
                  })
              }
```
変数は圧縮されちゃってますが、上記は`gsap`の設定ですね。
アニメーションは、ほぼこのツールで設定されてるっぽいですね。

gsapなのかcssなのか見極めが難しいですが、
CSSのtransitionの設定が分かれば、パラメーターを入れてみるとこれで再現できそうです。
　↓
http://ds-overdesign.com/transform/matrix.html

```javascript
regeneratorRuntime.mark
new Promise
```
これ`babel`と`es6.promise`がセットで使われてそう。。

```javascript
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
```
このエラーコードは`babel-plugin-transform-es2015-classes`の物ですね。。
ES6の拡張で、クラス構文で書いているんじゃなかろうか。。

```javascript
TypeError("Cannot call a class as a function")
this.btnNext = $("#PageTop .section-news .arrow-next"),
this.btnPrev = $("#PageTop .section-news .arrow-prev"),
this.btnNext.addEventListener("click", this.change.bind(this, 1))
```
あ、これは`react-slick`かな？？多分。


```Javascript
Super expression must either be null or a function
```
このエラー文章は、、Reactの系統ですよね。。

```javascript
(n.parallax = new Q("[data-parallax]"))
```
react-parallax的な感じのものも必要そう？

後はDOMをコメントアウトしながら、対応するJSを割り出していく。
例えば、「更新情報」を差し込んでるコンテナを消してみる。

```
Error: Barba.js: no container found
```
なるほど、ココはBarba.jsで差し込んでいるのか。。

あと、お問い合わせフォームに文字打ち込んでみて、リロードしてみる。
リロードしたら消えてるっぽいので`redux`みたいなのは使ってないと思う。


スクロールにも、なめらかになる工夫がされているような気がする。
これかな？？
https://min30327.github.io/luxy.js/
いや、多分tweenmax（GSAP）っぽいな。
https://inertia-momentum-scroll.webflow.io/tweenmax-js

##React系の何か＋ES6（Babel）で、gsapとthree.jsとslick
この場合だとNext.jsかGatsby.jsか分からないけど、Reactっぽいどっちか。
Reactから派生してる技術を使っていけば、似たようなものが作れます。

…と、いうわけで、

依頼主「これと同じで良い」
→「Next.jsを使うので、その日数で工数を算出します」または
→「ウチはReactのエンジニア居ないんで無理です」

と回答ができる。
「jQueryでなんとかできそうですね〜」とか答えちゃうと、もうヤバい。
その後はもう地獄です。工数算出する時はキチッとソースまで見て答えましょう。

以上です。