プラウダ

モスクワの報道は三つのカテゴリーにわかれている。すなわち「真実」「たぶん真実」及び「真実性のないもの」の三つである。 第一のカテゴリーには時報、第二のカテゴリーには天気予報、そして第三のカテゴリーには他の全てが含まれている。

素人が選んだWebフロントエンド開発環境

はてなトップのカテゴリに開発環境について載っていて、最近ほぼイチからWebフロントエンドの開発環境を整えたぼくにとってタイムリーな話でもあり、あとで環境触った時にわけがわからないという事態を避けるためのメモとしてここに残していこうと思います。

ネットワークとか


ローカルの作業環境はこんな感じ。下のSurfaceでプレビュー見ながら上のデスクトップマシンでコード書く感じ。で、ローカルでファイルをいじっているのではなくこんな感じにリモートで編集してます。

こんなまどろっこしいやり方しなくてもローカルでサーバ立てればいいじゃーんとはぼくも思うんですが、でかい画面に繋がってるのWindowsしか無いし、WindowsUnix系のソフト使うのも使いづらいし……ってこんな感じになってます。リモートリポジトリの意味がない……。でもローカルでサーバ立てたりコンパイル走らせたりしないと重くなったりしないからいいかな。

ソフト編

1週間位でフロントエンドではやってそうなやつ全部のせって感じになりました。以下入れたもの。

  • npm
  • gulp
  • pug
  • Sass
  • babel
  • browserify
  • Vue.js
  • vueify
  • browser-sync

なんかめっちゃソフト多いけど、Webフロントエンドじゃ普通なんですかねこれ。以下ざっくりと感想とか。

pug

とてもソースが見やすくなった。Emacsにpug-mode入れておけばあとはTAB押してればよきに計らってくれるので非常に楽。特に難しいこともなく雰囲気で書ける。入れてよかった。このあと複数ページ生成する時又役に立ちそう。

Sass

ファイル分割できるだけで文明を感じる。Sass記法ならインデントだけでネストできるのに文明を感じる。この二つのおかげで雰囲気で書いててもごちゃごちゃにならないので文明を感じる。

babelとbrowserify

ファイル分割でk ES6まだそんなに書いてないけどちょいちょい良さを感じる。やっぱりファ

browser-sync

神。無神論者なのに神と言いたくなる。ファイル変更を察知して自動で更新してくれる。マルチディスプレイにしなくてもタブレットをそばにおいて似たようなことができる。とてもいい。

Vue.js + vueify

まだちょろっとしたものしか書いてないけどVueのコンポーネントの良さがわかってきたような気がする。値勝手に変わってくれるの楽。

入れたものはこんな感じで。以下は導入見送った物。

webpack

Browserify+gulpで同様のことできるし特にいらないんじゃないか……?といった感じ。これ以上ツールを増やす必要が見られず保留。

CoffeeScript

括弧も少ないしいいんじゃなーい?と思ったけど各所からオワコン扱いされてたし、ES6のこともあるしそこまでJavascript辛くない気もしてきたので見送り。

Purescript

とても色物くさくて大好きなんですが実際のところで使えるかって言うと……。あとで実験的に触ったりしたいところではありますね。

知識のインストール、バーストモードで

雑に取った有給をウェブサイトの構築に費やしてます。いや、ウェブサイトの構築というよりかはツールの使い方でしょうか。昨日から今日にかけてGit、Sass、pug、gulpの使い方をとりあえず覚えた。node.jsがJavascriptってだけで毛嫌いしてたけど、本当にすみませんと言うしか無い。アプリケーション使うだけならめっちゃ便利でした。

2日間でめっちゃ知識をインストールした感じあるけど、実際のところ負荷はそんなにない感触。せいぜいツールの使い方だけだしSassなんかはCSSに色つけた感じだしね。Sassのイディオム的なものは検索して見つかるけど、どんな感じにファイル分けするかとかどこでどう変数使うかみたいなノウハウってどうやって手に入るんだろう。というかCSS書いてた時代も雰囲気で書いてたし、そのへんの知識がまるでない。

あとVue.jsを触りたいんだけど現状前に作ったHTML・CSSをpug・Sassに変換するのがやっとという感じ。pugはともかくSassの方は単純に変換しただけではメリットないのでそのへんの共通化とかも考えないといけないので更に辛い。Sassっぽい書き方というのがつかめれば楽なんだろうけどなー。Javascriptに関してはCoffeescriptの導入も考えましたが「最近イケてない」らしいので見送り。TypeScriptは導入するメリットそんなないかなと思ったので結局素のJavascriptに戻るのであった。辛い。Purescript*1も楽しそうだけど、流石に学習コストが高い。

そうそう、gulpでAの処理終わってからBの処理するってのを書いてたんですが

gulp.task('pug-reload',['pug'],function(){
		return browserSync.reload();
});
gulp.task('sass-reload',['sass'],function(){
		return browserSync.reload();
});
gulp.task('js-reload',['js'],function(){
		return browserSync.reload();
});

って感じにボイラープレートになってしまって何かいい方法ないんかなって頭捻ってます。

gulp.task('seq-reload',[引数],function(){
		return
 		(引数に書いてあるtask実行)
		browserSync.reload();
});

みたいに引数で処理分けることができればいいんですが。「gulp 引数」でググってもコマンドライン引数についてしかでてこないし。

*1:HaskellJavascriptにするやつ

やりたいことの雑多なメモ

技術ってのは使わないと衰えるもんで。そんな理由もありまして現在有給をぶち込みつつウェブサイトを改装すべくいろいろ調べてます。調べた結果Gitのリポジトリ作り出す羽目になってるのは???ってなったけどちゃんと理由があってのことなんですよ。やりたいこと優先度高い順に書き出すとこんな感じ。

Gitによるソースコードの管理はこんなページもあったので参考にしたい。
qiita.com
VPSアカウント持ってるんでそこにオレオレリポジトリを作りいい感じで開発できたらな~という感じ。感じが多くてイメージがふわふわしてる。

Vue.jsは簡潔に書けるって噂なので試したいですね。jQueryプラグインでゴリゴリやってみたけどオリジナルのモーダルボックス出すだけでソースコードがさっぱりわけの分からない感じになったのでその辺を簡潔に書きつつリッチなUIを実現したい。Sassも素のCSS書いてるとよくわからないクラスとかでてきて混迷を極めてくるのでやはり導入したいところ。

4つ目のテンプレートエンジンの導入はちょっとむずかしいところ。作品ページに個別URL振って見せたいんですけどそうなるとテンプレートエンジン使って静的にページを生成するしか無いのかなと。.htaccess使ってサーバサイドでスクリプト動かすにしても結局サーバ側での処理が必要だろうと思うし。でもVue.jsのルーティングで解決できるのか……?リサーチ不足なのでなんとも。

最後のBrowsersyncみたいなのを作るのは完全に趣味なんだけどやりたい。構想としてはファイルの変更を察知したらWebsocket経由でHTMLに組み込んだJavascriptに命令を送り込んで自動更新する、みたいなやつを最低限やりたい。それに加えテンプレートエンジンとWebサーバも組み込んで静的ページを生成するフレームワーク的なものを作りたい……まで行くとちょっと風呂敷を広げ過ぎな感じはしますね。

そんな感じで妄想だけは続くのだ。

思考のジャンプ

Erlangで何かくだらないものを作ろうとしてたらいつの間にかnginxをDockerで動かす方法を調べてました。もともとやりたかったことからずれてくる、そんなことありませんか?

女の子の絵書こうとして狙撃銃の採用実績調べてたり、モータの制御調べてたら物理シミュレーション自前で書いてたり、島風漫画描いてたら自衛隊コールサイン調べてたり……。必然を重ねたつもりがやりたいことの全体から見ると全然別の場所にたどり着いたりすることがよくあります。必然だけどそこまでいらねえだろとかどうしてそうなった的な。本人もよく原因がわかっていなく、よく困惑することがあります。そのおかげで艦これのお話とかできたりするので悪いものではないんですけど、コントロールしたいよなとは思います。

そして冒頭の「Erlangで何かくだらないものを作ろう」の前には「サーバアプリケーションを理解しよう」があり、その前に「メールの実装を理解しよう」があったのを思い出して途方にくれているところです。

払ったリソースによる「たが」

今月はブログを更新していきたい。「お金払っちゃったので使っていかないともったいない」というみみっちい理由があったりするのだが。

と言っても趣味にお金払ったからと言って継続したことがあるか考えてみるとちょっと心が痛む。ギターに7万円払ったものの最近全く触っていないし、15万円のロードバイクもあまり使わず手入れが悪いので大分痛んでしまっているし。カメラは……カメラはまだ使っている方なのでまだ大丈夫と信じたい。活躍する場はたくさんある。

つまり払ったお金が対価を得られるよう努力するための「たが」として機能するかというと、ぼくの場合あんまり機能しないのではないか、と思う。単純に飽きっぽいというのもあるけど、払ったリソースにそこまで未練がない感じがある。

なのでブログあんま書いてなかったら「ああ、『たが』が機能しなかったんだな……」と憐れんどいてください。

近況おまとめ便

はてなブログをProにしました。しかも2年契約。今までほとんど書いてないのに~?無駄遣いなのでは~?う、うるさい、これから書くんだよ!さり気なく独自ドメインです。かっこいい!デザインもいじりたいですね。

漫画方面

コミケは無事かげぬい合同発行できてよかった。想定よりめっちゃ分厚い本ができて在庫の搬出に四苦八苦しました。なんも対策考えてなかったので3往復する羽目になったよね。計画が雑!

次のイベントは9月23日の砲雷撃戦です。プロット書いたら52ページとかなってアホかってなったので本ができる確率は3‱くらいだと思います。あとは11月に開催される陽炎型オンリーのカゲロウスターズに申し込みました。
kagerostars.girly.jp
舞風の本が出、たらいいなあ……。あとは冬コミ。こちらは神通さんの暗い話になると思います。これは頑張って出したい。

ひとつひとつ丁寧にこなしていきたいですね。

技術方面

最近は時間リソースを技術方面に割いてまして。PCいじったりネットワークいじったり言語いじったりしてます。やってること箇条書するとこんなん。

なんか色々つまみ食いになってる。なんとなく技術の手入れをしたいなということで色々学習してます。Haskell初心者LT会とかも行ってみたりしました。
shinjukuhs.connpass.com

技術方面で当面やりたいこと

まずウェブサイトをなんとかしたいですね。現状こんな感じなんで……。
f:id:A_kirisaki:20170829202937p:plain
これ完全にsoonにcomingしないやつですね。ずっと工事中なサイトですね。自分作ったやつとかをいい感じにポートフォリを形式で見せたい。今なら適当にテンプレート使ったいい感じの何かありそうなんですが、自分の技術のメンテナンスというところもあり探す手間もあり選定の手間もありやはり自分で作りたいですね。

あとサイト作る時に実験用サーバで動かしてそれを本番環境にコピーするって感じで作りたいんですけど、そのへんをHaskell使って自動化したい。あとは流行りのVue.js使ったりwebsocketなんか使ってみたり……。色々夢だけは広がりますね。

HaskellでNクイーンとナイトツアー

所用で行き当たりばったりなJavaScript書いてたら飽きたので前から手を付けようと思って手を付けてなかったHaskellにでも手つけてみっかという感じ。すごいH本は暇つぶしに何回も読んでるので「りろんはしってる」状態。

Nクイーン

 N \times Nのチェス盤に N個のクイーンを互いに移動先が塞がれないように配置するパズル。クイーンは上下左右と斜め方向どこまでも動ける(飛車と角を足した動き)。例えば N = 5ならこんな配置。

Q . . . .
. . . Q .
. Q . . .
. . . . Q
. . Q . .

とりあえず例とかは検索せず知ってる知識だけで書いていこー。

実践

type Pos = (Int,Int)

isPlace :: Pos -> Pos -> Bool
isPlace x y | fst x == fst y = False
            | snd x == snd y = False
            | abs(fst x - fst y) == abs(snd x - snd y) = False
            | otherwise = True

コマの位置はタプルで行と列を表し、それと置けるかどうか判定する関数。

placeble :: [Pos] -> [Pos]
placeble hist = [(x,length hist) | x <- [0..], all (isPlace (x,length hist)) hist]

前の行までの置いてあるコマの位置のリストを取って次の行に置ける位置を返す。Haskellらしく?無限リスト使ってみたりした。

search :: Int -> Int -> [[Pos]] -> [[Pos]]
search 1 m p = p
search n m p = search (n-1) m (concat (map (\q->(map (\r->q++[r]) (takeWhile (\s->fst s<m) (placeble q)))) p))

探す深さ(行)と深さの最大値、それから解候補を入れて解候補の次の位置に置ける位置を連結する関数。ポイントは次の位置における位置がない場合空リストが返ってくるのでバックトラッキングができてること……だと思う。リスト内包使えばもっときれいに書けたんでないか、と言うかナイトツアーの方ではそうしてる。

solve :: Int -> [[Pos]]
solve n = search n n [[(x,0)]|x<-[0..n-1]]

あとは1行目に置く位置のリスト作ってsearchに突っ込む関数作っておしまい。

Prelude> :l eightqueen.hs
[1 of 1] Compiling Main             ( eightqueen.hs, interpreted )
Ok, modules loaded: Main.
*Main> length $ solve 8
92

 N=8の時の回転合同とかも含めた時における解の数と一致、うまくいきました。あとで調べたら解候補は順列作ってやれば楽って出てきてあーってなったけどきちんとバックトラッキングしてるおかげかこっちのほうが速い気がするのでそれはそれでいいんじゃないかという事にしておいた。

ナイトツアー

別名「騎士の巡歴」。 N \times Mのチェス盤でナイトが一筆書できる手順を探すパズル。ナイト(N)はXの位置に動ける。

. X . X .
X . . . X
. . N . .
X . . . X
. X . X .

 N = 4, M = 3の解の例は以下の通り。

 1   8   3
 4  11   6
 7   2   9
10   5  12

同じく実装例自体は検索せず行ってみる。

import Data.List

type Pos = (Int,Int)

nextmove :: Pos -> [Pos]
nextmove p = [(fst p + x,snd p + y)| x<-[-2,-1,1,2], y<-[-2,-1,1,2], abs x /= abs y]

movable :: Int -> Int -> [Pos] -> [[Pos]]
movable x y hist = [hist++[q]| q<- (nextmove $ last hist), notElem q hist, crop q]
  where crop r = foldl (&&) True  [fst r>=0, snd r>=0, fst r<x, snd r<y]

あとで使うのでData.Listをimport。位置はまたタプルで行列の順。nextmoveは次動ける場所を返す。movableは盤面の縦横と今まで動いてきた位置を取って次動ける場所を連結して返す。はみ出しの処理とかはここ。

isEnd :: Int -> Int-> [Pos] -> Bool
isEnd x y p =  x*y == (length $ nub p)

search :: Int -> Int -> [[Pos]] -> [[Pos]]
search x y p = if null cand then [r | r<-p, isEnd x y r]
  else search x y cand
  where cand = concat[movable x y q | q<-p]

isEndで解候補が終了してるか判定。通ってきた位置の数が盤面の数と一致すればゴールにしてある。一応同じ位置はnubで排除してるけど無くていい。searchで次置ける場所を再帰的に探索。ここでも次動ける場所がなければ連結されないのでバックトラッキングになってる、はず。

solve :: Int -> Int -> [[Pos]]
solve x y = concat[search x y [[(a,b)]| a<-[0..x-1], b<-[0..y-1]]]
Prelude> :l knighttour.hs
[1 of 1] Compiling Main             ( knighttour.hs, interpreted )
Ok, modules loaded: Main.
*Main> length $ solve 3 4
16

一応全スタート地点から探索する関数も書いたけど、そもそも探索範囲が大きすぎてえらい遅い。でも一応正しい結果は出ているということで。

雑感

手続き型だと結構長くなっちゃうけどHaskellだとかなり簡潔に書けたなーという印象。Haskellの力と言うよりリスト内包とかの威力の気もするので他の言語(Python)でも割りと完結に書けそうな気はしますが。

あまりHaskell的?なファンクタ?とかモナド?とかに触れてなかったのでそういうのも触れていきたいですね。

その前に冬コミの原稿しなきゃ……。