Nukindex 開発ブログ

アダルトサイトNukindexの開発ブログです

gulpを使ってES2015+で書いたReactのファイルをトランスパイルする。

日本語がよく分からなくなってきた。 「gulpを使ってES2015+で書いたReactのファイルをトランスパイルする。」 もっと分かりやすい題にならないのか。

とにかく題の通り環境構築に成功した。 失敗の積み重ねの上に成功した。

主にbrowserify周りの失敗だ。 なんとなくWebpackが流行っている理由が分かった気がする。

作成したもの

gulp build コマンド

期待する動き

JSX と ES2015+ で書かれた依存関係のあるファイルを、ブラウザで実行可能な bundle.js ファイルとして出力する。

結果

成功

手順など

ROOT_DIRECTORY/
  + node_modules/
  + build/
  + source/
  |   + index.html
  |   + renderer.js
  |
  + gulpfile.babel.js
  + .babelrc
  + package.json

React のファイルを作成する

$ npm install react --save-dev
$ npm install react-dom --save-dev

index.html

React 描画エリアになる要素を作っておく。ここでは <div id="app"></div> のとこ。

React のファイルはコンポーネントごとに分けて作成することになるので、トランスパイル時に bundle.js としてまとめて出力し、それを HTML で読み込む予定。

<!DOCTYPE html>
<html>
<head>
  <title>Nukindex</title>
</head>
<body>
  <div id="app"></div>

  <script src="./renderer/bundle.js"></script>
</body>
</html>

renderer.js

とりあえず簡単なコンポーネントを作ってレンダリングする。

今回の目的はブラウザで読み込んで描画できる形で出力することなので複雑にしない。

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Nukindex</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

gulpfile を設定する。

$ npm install browserify --save-dev
$ npm install babelify --save-dev
$ npm install vinyl-source-stream --save-dev
$ npm install vinyl-transform --save-dev

gulpfile.babel.js

返り値はストリームになるのでそれをパイプしていくとのこと(謎)

gulpデビュー - Nukindex 開発ブログ

これな。。。こうなると思ってたけどstream関係の仕様が謎過ぎてめっちゃ時間かかった。 とりあえず中身。

import gulp from "gulp";
import browserify from "browserify";
import babelify from "babelify";
import source from "vinyl-source-stream";
import transform from "vinyl-transform";

gulp.task("build", () => {
  buildHTML();
  buildRenderer();
});

function buildHTML() {
  gulp.src("source/**/*.html")
      .pipe(gulp.dest("build"));
}

function buildRenderer() {
  // ブラウザでも読み込める形にしてくれるやつ。
  // 主に require などで依存関係を持つファイルをうまいこと結合してくれる。
  browserify({
    "entries": ["source/renderer.js"],
    // 指定した拡張子を省略できる。
    // import Abc from "abc.js"; を import Abc from "abc"; と書ける。
    "extensions": ["", ".js", ".jsx"]
  }).transform(babelify).bundle()  // transform も babelify も bundle も謎
      .pipe(source("bundle.js"))  // source も謎
      .pipe(gulp.dest("build/renderer"));
}

ここらへんはググっても「これが正解!」みたいなやり方を見つけられなかった。 みんな同じところで同じように困ってるみたい。

gulp.src("source/renderer.js")
    .pipe(babel({
      "target": "browser",
      "presets": ["react", "es2015"]
    })
    .pipe(rename("bundle.js"))
    .pipe(gulp.dest("source/renderer"));

とか

browserify({
  "entries": ["source/renderer.js"],
  "extensions": ["", ".js", ".jsx"],
  "presets": ["react", "es2015"]
})
    .pipe(gulp.dest("build/renderer"));

みたいな感じでシンプルにできるようにしてほしい。。。

.babelrc

わすれがち

{
  "presets": [
    "react",
    "es2015"
  ]
}

ここまでで gulp build コマンドによりブラウザで読み込める bundle.js ファイルを出力することができる。

めんどくさかった上にすっきりしない。

nukindex.com

gulpデビュー

「Reactデビュー」と言う題で書き始めたが、道が遠いので「gulpデビュー」に変えた。

gulpというのはタスクランナーの一種で、現在最も主流であるらしい。 感覚的には開発の面倒なことを自動化してくれるお助けツールだ。 一部では脱gulpの動きもあるようだが、どうも便利そうなので使っておきたい。

作成したもの

gulp build コマンド

期待する動き

source ディレクトリのファイルを build ディレクトリへ移動する

結果

成功

手順など

npmの初期化

> npm init

gulp のパッケージをインストール

gulp 自体も ES2015+ で書きたいのでそのためのパッケージもインストール

> npm install babel --save-dev
> npm install babel-preset-es2015 --save-dev
> npm install gulp --save-dev
> npm install gulp-babel --save-dev

必要なディレクトリ、ファイルを作成

ROOT_DIRECTORY/
  + node_modules/
  + build/
  + source/
  |   + index.html
  |
  + gulpfile.babel.js
  + .babelrc
  + package.json

.babelrc

babel の設定ファイル。 babel は ES2015+ で書かれたJSファイルを古い環境でも実行できるように変換するツール。

{
  "presets": [
    "es2015"
  ]
}

gulpfile.babel.js

gulp コマンドの設定ファイル。

import gulp from "gulp";

// この部分が gulp build コマンドで動く
gulp.task("build", () => {
  buildHTML();
});

function buildHTML() {
  // gulp で操作する対象ファイルを指定
  // 返り値はストリームになるのでそれをパイプしていくとのこと(謎)
  gulp.src("source/**/*.html")
      // 最後は出力先を指定する
      .pipe(gulp.dest("build"));
}

返り値はストリームになるのでそれをパイプしていくとのこと(謎)

ここな。このブラックボックス感が嫌でいつもライブラリ使わずにフルスクラッチしてるんだけど。

でもそんなこと言い出したらマシン語まで理解しないといけないような気もしてきた。 どこで妥協するかの問題か。

ここまでで gulp build コマンドが通って期待どおりの動きとなった。

調べながらだと時間がかかる。

nukindex.com

Reactデビューしたい

Reactデビューしたい。いろいろ調べているとそうすることがナウいというかモダンらしい。

facebook.github.io

Nukindexは現状HTML / CSS / JavaScriptのシングルページアプリケーションとして動作している。

実際的なメリットとしては、コンポーネント毎に機能を分けると管理が楽そう、ということと、CSS命名規則から開放されそう、ということがある。

デメリットとしては学習コストが高そう、ということと環境構築がめんどくさそう、ということ、それから外部への依存度が高まる、ということかな。

欲を言えばReact + Reduxでデビューしたい。ハードルはどれほどだろう。

nukindex.com

Nukindexについて

僕が携帯電話をはじめて手にした高校1年生の時、僕はインターネットに出会った。

小さい画面の中に広がる情報の海のただ中で、僕は「掲示板検索」と検索し、そこで「エッチなワード 3gp」「エッチなワード 3g2」などと打ち込んでは新しいエッチなワードと出会い、新しく出会ったそのエッチなワードを打ち込んでは更なるエッチなワードと出会う、という冒険をしていた。

月の通信料が10万円を超えてお年玉の貯金がすべて無くなり、親に金借用書を書いたあの日。もう10年以上前の話である。

光回線WiFiなどの通信インフラの充実やスマートフォンの普及によって、10年前と比べるとインターネットへのアクセスは格段に便利になり、インターネット上のアダルトコンテンツの量は日々増大している。

僕は相変わらず毎日エッチな動画を探している。

数えてはいないが、毎日数十ページのリンクをたどり、十数個の動画を見ている。不毛な努力である。趣味はエロ動画検索です、と言っても良い。

この努力を社会貢献に役立てたいわけではない。ただ、僕自身を含めた同好の士に向けて。努力しない日があってもいいじゃないか。と、そういうメッセージを込めて。

抜けるコンテンツを抜きやすいように提供する。

これがNukindexの使命である。

nukindex.com