Help us understand the problem. What is going on with this article?

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

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

ちなみに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やらなんやらのツールは著作権表記は残すので、
そこからある程度予測する。例えば、こんな表記がある

/*!
 * 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をできる限りみる。

多分NuxtNextで作ってるんだろうと予想してみる。
(サクサクなパフォーマンスからもReactっぽい何かだと感じる。)

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

■※ここから先、さらにおそろしく地味な作業です。

そして開いている元ソースを書けないから、多分ワケわからんと思うんで、
あとは興味あったら読んでくだせぇ…。

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

addEventListener("mouseenter"
addEventListener("mouseleave"
addEventListener("click"

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

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

WebGLRenderer(100, 100, {

あ〜これ、上記の書き方はthree.jsですよね。。メニューはこれで表示してるのかな。。?

              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

regeneratorRuntime.mark
new Promise

これbabeles6.promiseがセットで使われてそう。。

throw new ReferenceError("this hasn't been initialised - super() hasn't been called");

このエラーコードはbabel-plugin-transform-es2015-classesの物ですね。。
ES6の拡張で、クラス構文で書いているんじゃなかろうか。。

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かな??多分。

Super expression must either be null or a function

このエラー文章は、、Reactの系統ですよね。。

(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でなんとかできそうですね〜」とか答えちゃうと、もうヤバい。
その後はもう地獄です。工数算出する時はキチッとソースまで見て答えましょう。

以上です。

DaisukeNishi
エンジニアに憧れるデザイナーです。性格診断は「INTP」思いやり・社交性に欠ける人。。→ http://xn--16-573d25rtpd1v4e.com/intp.php
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away