from electron 2 web

インターネットのリソースを無駄遣いして検索におけるUXを下げてごめんなさい

圧倒的文章力のNASAでゴミみたいなチラ裏のようなメモを量産してしまい全ての"Web開発者"にごめんなさい

ここ一週間で触ったwebパッケージ

eslint

いろんなプロジェクトで.eslintrcがESlintの設定ファイルっていうのは知ってたんだけど実はeslint自体は使用したことがなかった。糞雑魚過ぎてつらい

gulp

gulpは昔使ったことあったんだけど少し使っただけでgruntとかgroovyとか使ってた。 その頃gulp v4とかなかったしね。 というわけで勉強してみた。

sassするにもgulpプラグイン入れないといけないところが糞だと思いました。 まあwatchできるのは利点かな。

スクランナーだけあってやっぱほかのweb技術との絡みが深い。特にbrowerifyやwebpack等の依存解決モジュールとの連携。 ということなのでナウいweb技術の勉強をするならここから始めるのがいい。

mocha

テストツール。この分野ではmochaとpower-assertが2大巨頭だな。 java触っていたころJUnit使ってたのでわりとすんなりいけたな。

ていうかnode.js(server)もテストできる。もしかしたら内部のいわゆるモデル部分のみかも?get("/",(req,res)=>)の部分も自動テストできたらいいんだけどなあ。。。

まあsupertest moduleとかrequest moduleとかいろいろ選べそうなのであったものを選べばいいっぽい。個人的にはmochaで全部やりたかった。

seleniumとかできないかなあ。ちょうどnode.jsからselenium driver動かせるし。

passportstabっての使えば認証回避できるのか。たぶん使う。

mid0111.hatenablog.com

bower

flontend系package manager.

すべてはbowerから始まった。。。と言っても割と過言ではない。

個人的にはflontendはflontend、backendはbackendで分けるべきだと思っているのでどうしてもbowerとnpmを分けたかった。 だってなんかnpm install -g jqueryっていやじゃん?localのnode_moduleならまだしも。

書いてて思ったけどlocalのnode_moduleなら割とアリだな。npmをflontendで汚したくないというだけなので別にlocalがけがれる分にはいい。

設定ファイルは.bowerrc。こっちは主にpath等を指定する。

project fileはbower.jsonbower initで自動作成できるので間違っても手作りなんてしないこと。(その割には聞かれる項目多いけどな)

このbower.jsonは本来npmでライブラリを公開するときのpackage.jsonみたいな感じで使う。

つまりnpmと同様にbowerもパッケージ管理ツールであり同じように自分でライブラリを作成して公開することができるのだ。

ただ本来の使い方はbower.initして、その中に依存関係にあるライブラリを記述してそっから一気にbower initで持ってくることが多い。つまりフロントエンドで使う用にライブラリを持ってくるってこと。

boerはプロジェクト単位。つまりbower install -gみたいなことはできない

browserify

依存性解決ツール。browserifyの公式のロゴのフォントがめちゃくちゃかっこいい。

かっこいいくせにtransformするためのプラグインはglobalインストールできないという制限がある。

transformは読み込む前に例えばTSで書かれたコードを返還する代物。

deboerify

browserifyのツール。pluginであってtoolではない。

なんかnodev6で使用したらエラーでたのでissue建てた

github.com

webpack

依存性解決ツール。AMDとかいろいろできる。 こちらのtransformに対応するものはpluginという名前になっている。もちろんbower奴もある。 mizchiさんによると少し不安定だとか。

cliのuiがカッコいい

JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。

js以外のものをjsに埋め込むには*-loaderというプラグインを使う。(つかうというか記述するだけ)

htmlloaderとかよさそう。

loaderはpluginじゃない(pluginスコープとloaderスコープの2つがある)

thujikun.github.io

これすき

  • webpack.config.js

普通にnode.js形式で書く。

module.exportとかの形式で書く。

{
entry:入力ファイル,
output:出力ファイル,
plugin:plugin,
//いろいろある
module:main
}

とおおまかにはこんな感じ。

  • module

moduleの中には大きくloader,devtoolsの2つがある。

loaderにはさっきのhtml-loaderやscc-loader等を書く。

んでdevtoolsというのがfirefoxとかのdevtoolsの中のソースマップを書く場所。ソースマップの機能は意味不だったので使えるようになったのは感慨深い。またそのうち試してみたい。

angular2

言わずと知れたmvcフレームワーク。angular1とはだいぶ違うし互換性もない。しかし学習コストそんなに高くないといわれたのでやってみた(そうでもなかった。1時代を知らないけど)

vue.jsより書くことたくさんある・・・


設計

設計もいろいろ見ていた。MVCとかMVVCとかMMVCとかあとDDDとかTDDとか

こっちのほうもそのうち書きたい

感想

旧石器時代の頭の中を少しアップデートできた感ある。

卒研

この辺の技術を調べている理由の一つとして、卒研がある。

自分はリーダーなのだがなるべくモダンな手法を使ってみたいのでこうやって予習しているわけだ。

大雑把に言うとcordova+nodejsって感じ

いまDB設計とかやってる。まあこれもそのうち書くよ