Webサービスを作るときのテンプレートを作った - hiroppy's site
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
コードレビューをAIに手伝ってもらい楽をしてみる - hiroppy's site
GitHub Next | AI for Pull Requests GitHub Next Project: AI for Pull Requests wants to make GitHub Pull Requests seamless, low burden an... この機能の登場により、PR でのレビューのオーバヘッドを少なくすることが期待されます。この PR では何を変更したのかを説明したり、更には review の依頼を投げることもできます。 また、Issue でも AI にどうしたらよいか？を聞くこともできるそうです。詳しくは公式の動画を見てください。 How many times have you submitted a change and forgot to update the unit tests? Or the documentation? Or introd
webpack@5で入るPersistent Cachingについて - hiroppy's site
webpack/lib/config/defaults.js 実際に使うときの設定 結論ですが、webpack.config.js へ以下のように書くことが推奨されます。 module.exports = { cache: { type: "filesystem", buildDependencies: { config: [__filename], }, }, }; あとは、各コードの設定に依存するためversion等の追加が必要になる可能性があります。 ドキュメント Other Options | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, ... 仕組み ファイルキャッシュでは以下のようにデフォルトではnode_m
webpackの次のバージョンで入るassetModulesの紹介 - hiroppy's site
この機能が導入されることにより、{raw/file/url}-loader が不要となります。 webpack@4 でも使えますが、まだ実験的フェーズです。 Documentation Asset Modules | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, ... モジュールタイプと以前との対応表 asset/resource -> file-loader asset/inline -> url-loader asset/source -> raw-loader asset -> asset/resourceとasset/inlineを自動選択する(閾値: 8kb) 使い方 実験フラグをオンにする。 // webpa
アイルランドから帰ってきた - hiroppy's site
3/2 - 8/26 までアイルランドで生活していました。 長かったようであっという間に過ぎていって本当に幸せな日々でした。人生の中で一番良かったんじゃないかな。。。 アイルランド イギリスの左にある島で北部がイギリス領です。 首都はタックスヘイブンで有名なダブリンで多くの有名な IT 企業がこの都市に集まっています。 日本から直接アイルランドに行くことは出来ず、一度乗り継ぎが必要となります。 時差 タイムゾーンは GMT+0 でイギリスと同じとなりますが、サマータイムにより現在は GMT+1 となります。 サマータイムは、3 月の最終日曜日から 10 月の最終日曜日の期間となります。 つまり、日本との時差が 8, 9 時間なので日本で一番活発な時間帯がアイルランドの深夜となります。 気候 天気が不安定なのは有名な話で突然雨が降ったり突然晴れたりします。 しかしながら、夏は最高 20 度ぐ
エンジニアの自分が思う「焦燥感」 - hiroppy's site
potato4d くんのエンジニアキャリアにおける「焦燥感」を読んでこの文章を書いています。残念ながら日本にいなかったため、直では聞いていないです。 読んで思ったことは、自分より若いのに(年齢は仕事等には関係ないが人生的な話ね)将来のことを考えていてすごいなーって思っています。 エンジニアキャリアにおける焦燥感との向き合い方 2019年7月6日、株式会社サイバーエージェントが主催するイベント「Battle Conference U30」が開催されました。30歳以下のエンジニアによる30歳以下のエンジニアのための技術カンファ... さて、自分について纏めてみようと思う。 前提として、今はマネージメント的な話は考えておらず、今はコードを書くことに集中したいなって思っている。 ただ組織論的な部分はすごい興味あるから、多くの人を参考にしていきたいなとは思う。 どうエンジニアが気持ちよく働ける組織に
初めてソシャゲというものをやった - hiroppy's site
TL;DR 昨日、初めてやったソシャゲに 5 万円近く投資した結果、ガチャでは出ずに、天井だった。 事の発端は、昨日の深夜である。あまりにも何もやる気が出なかったので YouTube に行ったら、とある動画がサジェストされた。 まぁ暇やし見るかって気持ちで見たらそれはソシャゲのガチャを回している動画だった。そう、プリンセスコネクトだ。 この動画は、今期間限定のガチャを回していたのだが、そのピックアップキャラのアニメーション動画があまりにも自分に謎フィットしてしまった。そして、気付いたらアプリをダウンロードしていた。内部データー関連で 1 時間ぐらいダウンロードにかかった気がする。 最初にチュートリアルをやった。長かった。本当に長かった。多分目的がガチャを引くということしか頭になかったと思う。そして、ガチャの画面まで自由に移動できる状態になった。まずは最初に数回引けるぐらいのジュエルをもらう
OSSで報酬が支給された話 - hiroppy's site
hiroppy is creating OSS | Patreon Become a patron of hiroppy today: Get access to exclusive content and experiences on the world’s lar... 以下、編集前の記事 注意: あくまでもこれは webpack の話です 2 月分の OSS 活動費 2 月分の OSS 活動費が以下の額で支給されます。 $1674(186,620.87 円) Total: $2093(233,331.83 円) 現状の自分について 今年から webpack に復帰しました。(以前活動してた時はまだ openCollective に参加してない) そして、本業の他に個人事業主をやっていますが、今は税理士がいません。 日本では他の会社のお仕事もしているため、毎月ごとに請求書を書いて提出し
OSSの現状と今後 - hiroppy's site
Gatsby が面白い仕組みを導入していて、驚いたので書くことにしました。 Gatsby React.js の静的サイトジェネレーター GitHub - gatsbyjs/gatsby: The fastest frontend for the headless web. Build modern websites with React. The fastest frontend for the headless web. Build modern websites with React. - GitHub - gatsbyjs/gat... 最近、海外ではとても流行っています。 コミュニティ 最近、gatsby のメンテナチームに所属しました。 人数が異常ですよね、このチームに所属していると gatsbyjs/gatsby の write 権限を持ちます。 そう、個人的に画期的だと思った
webpackの仕組みを簡潔に説明する - hiroppy's site
この記事は、Node.js Advent Calendar 2018の 18 日目の記事です。 遅れてしまい本当に申し訳ありません。 この記事は、HTML5 カンファレンスで話した内容が中心となります。 Node.js とはかけ離れていますが、自分が書きたかった内容だったので、理解してくださると嬉しいです。 モジュール webpack は以下のモジュールをサポートします。 // ESM (ECMAScript Modules) import foo from "./foo"; export default foo; import("./foo.wasm"); // native support for WebAssembly import("./foo.json"); // native support for JSON // CJS (CommonJS Modules) const fo
Node.jsでのイベントループの仕組みとタイマーについて - 技術探し
libuv/core.c at v1.x · libuv/libuv Cross-platform asynchronous I/O. Contribute to libuv/libuv development by creating an account on Git... タスク タスクは、同期タスクと非同期タスクの 2 種類存在します。 setTimeout(() => console.log(1)); setImmediate(() => console.log(2)); process.nextTick(() => console.log(3)); Promise.resolve().then(() => console.log(4)); (() => console.log(5))(); 同期タスク (() => console.log(5))(); 非同期タスク setTim
Node.jsのアプリケーションデバッグ・改善方法をおさらいする - hiroppy's site
ステップ実行 --debugと--debug-brkは Node8 の時点ですでに非推奨なので、使わないでください。 デバッグ方法 コンソール Chrome devtools または、VSCode のような IDE に任せる 今回は、エディタ依存の話は特にしないです。 共通的な手順 基本的には、debugger を止めたい場所に置いていくことになります。 例として、以下のコードで説明していきます。 "use strict"; const { readFile } = require("fs"); const { promisify } = require("util"); const readFileAsync = promisify(readFile); (async () => { const data = await readFileAsync("hello.txt", "utf8"
Node.js Package Mode について - hiroppy's site
esm: Implement esm mode flag by guybedford · Pull Request #18392 · nodejs/node This provides a mode: "esm" flag for package.json files which will treat ".js" files as ES modules w... まだ、master へ入っていないので、未確定です。 今は、Core で開発するか http2 の様な感じで upstream で開発するや semver の扱い等の開発指針を決めたところです。 現在の Node.js の ECMAScript Modules に対する問題点 ESM を使用する場合、現在はファイルの拡張子を.mjsにする必要があるが可能であれば、ユーザーは.jsファイルで書きたい。 Node.js Package
Node.jsにworkerが入った - hiroppy's site
Node@10.5.0で入った worker の話です。 この記事は、Roppongi.js #4の登壇資料です。 5min で話しきれないので記事にまとめました。 実は、自分が Node.js に関わって、最初から最後(今現在)までずっと追っている珍しいモジュールです。 worker_threads とは？ worker: initial implementation by addaleax · Pull Request #20876 · nodejs/node Hi everyone! 👋 This PR adds threading support for to Node.js. I realize that this is not exactly a ... 実装著者は Anna (この PR は io.js 時代に petkaantonov が実装したのをベースに現環境へ移した
エンジニア採用のための仕組みづくり - hiroppy's site
文章化したかったので記事にしました。 技術寄りの自分が思うことです。 結論 外部から見てもその会社が技術的に何をやっているかというのをわかりやすくするべきです。 自分だったら何も情報がない会社には振り向きもしないかなと思います。 ワクワクする会社がいいなって思う。 前提 入社する前(and 応募する前)のエンジニアはその会社のコードなどを知りません。 つまり、その会社で働いている人から聞くか、外から見たその会社の印象ぐらいしか判断する材料がないわけです。 面接や面談でわかることなんてほんと一握りだと思います。 エンジニアを入れたければ、どういう技術を使ってるか、どのような開発を行っているか、どのようなことに力を入れているか等を積極的に対外的に話した方が入社した後との差が少ないと思います。 どこの会社にも必ずある負債やコードの質は入社するまで見れないわけですからそこを考えてもしょうがないけど
Node.jsの使用調査をしてみた - hiroppy's site
今年度も終わりなので Node.js がどれぐらいダウンロードされているかの調査を行いました。 2017 年版は nodesource が出している記事を読むと良さそう。 Node by Numbers 2018 — NodeSource Aside from sustained growth in Node.js adoption during 2018, analysis of the past year shows the imp... 実は、Node.js にはダウンロード数などのデータが公開されています。 https://nodejs.org/metrics リポジトリ https://github.com/hiroppy/node-metrics 3 月のデータ ダウンロード数 まだ 3 月継続中ですが、2018/03/30 の 09:30 までの合計は以下のようになりました。
Node.jsとECMAScript Modules - hiroppy's site
Node.js のバージョン 10 のリリースは 4/25 を予定しています。 また、ECMAScript Modules は Stability1(実験的)でリリースされます。 議論は以下で行われます。 GitHub - nodejs/modules: Node.js Modules Team Node.js Modules Team. Contribute to nodejs/modules development by creating an account on GitHub. 覚えておくべきこと ESM を使いたい場合は、拡張子を.mjsにする .jsファイルでimport/exportは使えません。 ブラウザではtype="module"となりますが、Node.js では拡張子で判断します。 .mjsの拡張子は省略可能である 拡張子の探査順は ESM の時、.mjsが優先されま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
