これは Next.js Advent Calendar 2018 の 10 日目の投稿です。 前回、next-typescript プラグインを使って Next.js で TypeScript を利用する方法について書きました。 今回は、用意されているプラグインを使うのではなく、自分で webpack の構成をカスタマイズして TypeScript を使えるようにしてみます。 webpack をカスタマイズする Next.js は、自分で webpack のバンドル構成を準備しなくても使い始めることができます。このように透過的に webpack を扱えるのは Next.js の強みの 1 つですが、場合によっては構成をカスタマイズしたい場合があります。例えば今回説明する「TypeScript のファイルの処理に任意のローダーをつかいたい」ような場合はまさにそのユースケースに当てはまると言えるでしょう。 webpack をカスタマイズする方法は Next.js が用意してくれている ので、それを使って TypeScript に ts-loader…

READ MORE >>



これは Next.js Advent Calendar 2018 の 9 日目の投稿です。 Next.js で TypeScript を利用することについての記事となります。 TypeScript が使いたいよ〜 って場合、Next.js は主に以下のいずれかの方法でやることになります。 公式の next-typescript プラグインを利用する 自分で webpack の構成をカスタマイズする 本記事では前者のみを扱います。 公式の next-typescript プラグインを利用する 公式の next-typescript プラグインを利用すると、すぐに Next.js のアプリケーションを TypeScript で書きはじめることができます。 @zeit/next-typescript 使い方は README に書いてある通りですし、 こちらの TypeScript でフロントエンド開発をはじめるのにとてもよくまとまった記事 の中でも触れられていますが、一応簡単に手順を書いておきます。 インストール 普通にインストールして Next.js…

READ MORE >>



これは Next.js Advent Calendar 2018 の 8 日目の投稿です。 Next.js 公式ドキュメントの翻訳をはじめたので、それ (↓) についての記事です。 Next.js 公式ドキュメント日本語翻訳プロジェクト https://nextjs-docs-ja.netlify.com/docs はじめに 本アドベントカレンダーの 1 日目の記事 で @tetsutaroendo も書いていますが、今僕が所属している講談社の開発チームではいくつかのプロジェクトで Next.js を採用しています。 SSR のみに留まらない Next.js の恩恵は大きく今後も積極的に利用していくつもりです。が、やはり日本語のまとまった情報というのは少なく、それが日本でイマイチ広まらない要因の 1 つになっているのでは?というような感じで公式ドキュメントを翻訳することにしました。 良いか悪いかは別として Next.js は minimalistic なフレームワークなので、公式で用意されているドキュメントを読めば大抵の基本的なところは理解できます。 Next.js…

READ MORE >>



エンジニアが出演する (音楽の) ライブイベントを企画したので、そのためのウェブサイトを作りました。 EngineerLiveTokyo これで利用したシステム構成が、短時間でそこそこ使いやすいサイトを作るのに使い回しの効きそうなものだと思うので紹介します。 エンジニアライブを支える技術 タイトルのまんまですが、技術スタック的な視点では以下の組み合わせで構築しています。 React Netlify GitHub GraphQL TypeScript React + Netlify まずサイトを手早く作るために create-react-app のテンプレートを元に SPA で画面を作っていきました。 トップページ 出演者一覧ページ 出演者詳細ページ ニュース一覧ページ ニュース詳細ページ というシンプルな画面構成なので React を使えば (デザインは置いといて) 速攻で作れました。最終的にはペライチみたいなサイトでいいかなと思って出演者/ニュース一覧ページは無くしてしまいましたが。 しかしここで特に「支える技術」として伝えたいのは Netlify のお手軽さで、Netlify…

READ MORE >>



Vapor の最新メジャーバージョンとなる 3.0 が昨日リリースされた。 Vapor 3.0.0 released 「Server Side Swift (SSS)」というのはおそらくまだほとんどの人にとって興味のない領域ではあるだろうが、そこにはいくつかの名の知れた Web Application Framework があり、どれも結構なスピードで進化を続けている。Vapor もその中の1つである。 僕は Vapor はバージョン1の頃から一応触ってみてはいるのだが、今度のバージョン3は概要をちょっと眺めただけでもかなり洗練が進んでいると感じた。 でも何より興味を引くきっかけとなったのは vapor/http の開発を眺めていたときのことで、これはバージョン3に向けての非同期化を進めていたエンジン部分なのだが、今年3月に突然 SwiftNIO というフレームワークが登場したときに、それまでの実装をものすごい勢いで SwiftNIO を利用するものへ置き換える開発が進んで圧倒されたことだ。リリース間近のプロダクトでも Swift Way…

READ MORE >>



これまでこのブログは Middleman を使って構築していました が、何となく思い立って Gatsby で作り直しました。 Gatsby - Blazing-fast static site generator for React 別に Middleman に何か不満があったわけじゃないのですが、単純に何年もそのままだったので気分を変えたかったのと、PWA (プログレッシブ ウェブアプリ) にしてみたかったからです。 ちなみに大体の人はこの辺までしか読まないだろうから最初に言っておきますが、Gatsby はマジで気にいったので皆さんもぜひ チュートリアル だけでもやってみてください。英語しかないけど。 Gatsby Gatsby は静的サイトジェネレーターです。そのジャンルでメジャーなものとしては新しめのもので、以下のような特徴があります。 React ベース Webpack を使っているがほとんど意識せずに利用できる 単なる静的サイトではなく 「静的 PWA」のジェネレーターである WordPress などの CMS…

READ MORE >>



こないだの Ruby25 のときに yuki3738 パイセンが BOSE QuietComfort 35 II を首にかけてて、ちょうど最近あらゆる方面から「ノイズキャンセリングヘッドホンはいいぞ」みたいな声が聞こえてきていたこともあっていきなり欲しくなった。 正直言うと今まではほとんどノイズキャンセリングに興味がなかった。それは音質を犠牲にしたり微量とはいえホワイトノイズを我慢してまでノイズをキャンセルしたい!ってことが単純になかっただけなんだけど、近ごろ、先に書いた理由以外にも、新しい家に引っ越したらなんか壁の反響の関係なのかずっと動かしてるサーバーのファンの音がめっちゃ気になるようになったのとか、前はカナル型のイヤホンならどうせ外音聞こえないでしょ派だったのに最近は全然遮音性のない AirPods ばっか使っててもう他のイヤホン使いたくないですみたいな気分になってた事情も重なった。 さて、その BOSE のノイズキャンセリングヘッドホンQC35 と双璧をなすものに Sony の 1000X があり、こっちもそのシリーズで最近でた WH-1000XM…

READ MORE >>



僕はプログラミングのことを全く知らずになんとなく流れでプログラマーになってしまった。そして会社での仕事はC/C++を主に使うものだった。ただ、仕事を便利にしたりするためのツールなどはみんなが好きなプログラミング言語で思い思いに作っており、何人かは Ruby を使っていた。僕は人と同じものを使うのが嫌だったので、何かを自分で作るときは当時誰も使っていなかった Python を使うことにした。 そんな生活を続ける中で気づいたことがあった。Ruby を好む人は、自分のコードを見せたがる。そして、自分が何を考えてこう書いたのか、それをコミュニケーションの手段としたがる。僕にはその感覚がそのときはわからなかった。できることも構文も自分の使っているものとそんなに変わらない。なぜそんなにプログラミングへの接し方が違うんだろう?でも、少なくとも Ruby を好む人がプログラミングを楽しんでいることは伝わってきたし、意地でも Python…

READ MORE >>



あー引っ越しの準備が忙しい。忙しいと、テスト前になぜか部屋を掃除したくなる的なアレで、普段気乗りがしないことをやりたくなりますね。 と、いうわけで!JavaScript!できればあまりお近づきにならず微妙な距離感で接しながら、できればいつのまにか消えててくれたらいいなあ…なんて思ってたこの人!をやっていくことにしたのでした。 で、何日か JS だけでコード書いてたんですけど…あれ?…ん…?JavaScript、なんだ、悪くないぞ…?って。 ES2015, 2016, 2017... まずですね、此度の JS をやっていきのきっかけとして、ちと今いくつかこれからの技術選定とかをやっているんですが、おそらくどれもアクセススパイクに強いものが求められるということがあって、サーバーサイドの実装言語としては Go とか Kotlin とか、まあなんかいくつか候補を考えてたんですが、その中に Node.js もあって、どうせその素振りしないといけないからなぁ、ってのもありました。 なので JS といってもブラウザでギュンギュンとかじゃなくてターミナルで Node.js…

READ MORE >>



僕が使っているモニタは LG UltraFine 5K Display と言うやつです。 これ、Apple Store でしか売ってないし、Touch Bar 付きの Macbook Pro と同時発売されたやつで一応 Mac 専用のモニタみたいな扱いになってますが、それを Windows (Bootcamp とかでもなく純粋な Windows 機で) で使おうとした話です。 ぶっちゃけほとんど情報はない。でも海外の (特に Hackintosh 系の…) フォーラムとかを見ていると、事例が全くないわけではなかったのでやってみました。 結論から言うと使えました。 構成 LG UltraFine 5K Display は Thunderbolt 3 (以下 TB3) 接続です。 まず、Windows PC では、GPU をオンボード増設できないようなごく一部のマシンやマザーボードを除いて、TB3 端子を持っているものはありません。つまり、ある程度のスペックや拡張性を持たせたまま TB3 を使いたい場合はほぼ自作するしかない状況だと思います。 「TB…

READ MORE >>


NEWER POSTS