rxon's miniminimal tech blog

Web技術の現状と感情

Webアプリケーションに関するお気持ち

はい皆さんこんにちは。それではやっていこうと思います。


インターネットではrxonという名前で活動している者です。グラフィックデザインからウェブデザインを経てフロントエンドに至りました。バックエンドを書いてくれる彼女が見つかってないのでバックエンドも自分で書いたりしています。vim派です。よろしくお願いします。


今日は競プロのプロしかいないと聞いたのでいろいろ話す前にざっとweb技術を俯瞰してみます。web技術、つまりhtml,css,javascriptはweb以外のプラットフォームでも使われていて、例えばモバイルのReact Nativeはインスタやfacebookのスマホアプリ、デスクトップのelectronはslackなどいろんなappに使用されています。electronはChromiumとNode.jsをくっつけたものなんですけど、nodeを使えるのでaddonっていうnodeのnative moduleが使えて、これでC++が使えたりもします。今年の未踏事業に選ばれてたパケットアナライザもelectronでC++を動かしていました


ところでwebといっても、WebサイトとWebアプリケーションの二つに分けられます…..


Webアプリケーションもフロントとバックエンドに分けられて、フロントエンドはクライアントサイド、バックエンドはサーバーサイドを指します バックエンドは他の言語でもできるんですけどjavascriptの実行環境であるNode.jsでもかけます


Webアプリケーションの現状を見ていきます


ここ数年はSingle Page Applicationという1ページ上に気合でクライアントサイドアプリケーションを構築するやり方が広まっているんですけど、状態遷移の管理やデータの取得とかですね、今まではブラウザに丸投げしていたことを自分で頑張って実装するというもので結構なつらみがあります。


で実際に実装しようと思うとこんな感じになります。上半分はSPAによるつらみなんですけど下の方はブラウザ対応によるつらみだったりします


ここからはWebアプリケーションの現状に対する個人的な感情を話していこうと思います


これは上坂すみれさんです


これは涼風青葉


これはキズナアイさんです。


このように自己流で攻めなければという感情が芽生えてきたんですけど、僕は技術においてはミニマリストなので


超ミニマムな構成でなんか作りたくなってきました


そういや技術ブログ欲しかったんですけどwordpress…..


なので自分で作ることにしました。理想の要件は、textlintっていう日本語を校正できるコマンド tool が使いたかったので編集はlocalのmdで、buildとかはなく、deployのone commendで完結するとにかくミニマムなものです


この時期にたまたま見つけたディレクトリをlsしてserveするアプリを見てこれでCMSが作れるのではないかと思い


作りました。超絶ミニマムでフロントエンドがmustache(htmlのテンプレートエンジンですね)が163行でそのうちCSSが68行です。CSSは基本何も指定せず、browserのdefault cssにまかせる感じにしました。バックエンドもnode.jsの133行で全てです


仕組みは単純で、mdがあるディレクトリをさっきのfs.readdirでlsして、返ってきた配列を基に個々のmdファイルから正規表現でメタデータを取り出し、日付でソートし、indexページに流し込んでいます。記事ページはただmdをhtmlにしてそのまま流し込みました。


動かすとこんな感じぃで


記事ページはこんな感じです。browserのdefault cssに丸投げしたんですけど結構いい感じになりました


ところで、この、mdそのままのファイルストレージをlsしていく仕組みのCMSは多分世界初なので新規性があります


ついでに、行数的に多分世界最小のCMSです


これはぞいポーズの滝本ひふみさんです


そうは言っても


“アプリケーション”を作るときはSPAにしたいので


今作ってるものでは妥協しつつもSPA stackを選定してみましたフロントはmithrilっていう小さいけどroutingとかfetchとかは最初から入っていてパフォーマンスもいいフレームワークで、バックエンドは今デファクトのexpressを作ったtjが推しているkoaを選びました。


ちょっと変わった認証にしようと思っていて、普通はemailとパスなど入力してもらってsign upという流れだと思うんですけど、UXが悪いのでpasswordなしのmagic linkをやってみたいと思い、emailを打ち込んでもらったらJSON Web TokenっていうJSONに署名ができるもののtokenを埋め込んだリンクを送り、そのままブラウザのクッキーに保存してそれを元に認証してリクエストという仕組みにしてみようと思っています。メアド打ってリンクをクリックするだけなので手数がめっちゃ少なくてUXになる予定です。


最後に言っておきたいことを言います


フロントエンドの楽しみ方なんですけど、フロントエンドは三ヶ月ごとにトレンドが変わるので、自分がいいと思った技術を自信を持って使う強い意志が必要ということを心に留めておいてください


Web開発はどうしてもレイヤーが高く、車輪がいっぱいあるのでそこはいい感じのlibraryでサクッと片付け、新規性のある部分に時間をさいてもらえればより一層楽しめるのではないかということで終わりの言葉とさせて頂きます。


ご静聴ありがとうございました


Share on Twitter