はじめに｜Next.jsの考え方
Remix入門【はじめからそうやって教えてくれればいいのに！】
はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ Remixとは？ Remix とは、公式サイト によると、React ベースのフルスタックの Web フレームワーク のことです。 Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. （訳）Remixはフルスタックのウェブフレームワークで、ユーザーインターフェイスに集中し、ウェブスタンダ
Next.js App Router 遷移の仕組みと実装
Next.jsのv13.4が発表され、App RouterがStableになりました。App Routerは発表以来着実に実装が進んでおり、最近もServer ActionやParallel Routesなどの新機能が次々と発表されています。 当然ながらこれらの話題はフレームワーク利用者目線の話題が多いのですが、本稿はApp Routerがどう実装されているのか、筆者の興味のままに遷移処理周りを中心に調査したまとめ記事になります。知っておくと役に立つ点もあるかと思うので、参考になれば幸いです。 Next.jsの遷移とprefetch挙動 Next.jsの遷移を理解するには、まずprefetch挙動について知る必要があります。今回は調査用のデモとして、pagesとappそれぞれで同じようなページをいくつか用意しました。 pagesで実装したページ appで実装したページ これらで従来のpag
数年間継続している「作業メモ」の話
メモを残す習慣 以前、@gorou_178さんが「1日1ファイル、「調べたこと」「やったこと」を日報として残す」という記事を公開していた。 この記事の中に以下のようなくだりがある。 そこでふと思い出したのが元同僚のメモの取り方。 毎日1ファイル作成して、そのファイルにその日にやったこと（事細かくやった作業、実行したコマンドなども）をメモしていた。メモは年単位で残っておりとても驚いたことを覚えている。 この、「元同僚」というのはきっと私のことである。 私はメモを取ることが結構と好きな方で、メモを残すことがわりと習慣化している。 例を挙げると、普段からこういったことをやっている。 Google Keepに「Podcastに出演してほしいゲスト候補」、「勉強会・カンファレンスの登壇履歴」、「来月購入予定の日用品・雑貨」、「自宅周辺の行ったことないラーメン屋」、「読みたい・気になったマンガ本」とい
全ての道はRomeへ続くのか - これからのJavascript開発を考える
Romeとは 現代のJavascript開発には多くのツールチェーンが必要とされます。Babel,webpack,Jest,ESLint,Prettier,Typescriptなどを組み合わせて開発することが多く、さらにこれらの一部代替選としてesbuild,SWC,Viteなどのツールチェーンの選択肢が存在し、選択肢の多さやその組み合わせの複雑さに苦い思いをしたことがある方も少なくないのではないと思います。 こうした中で、新たに開発が進められているツールチェーン、Romeをご存知でしょうか？ Romeは先に挙げたように複数のツールチェーンを役割ごとに組み合わせて使うのではなく、1つのツールチェーンでこれら全ての役割を担ってしまおうという壮大な計画を持つツールチェーンです。 Romeは2020/03にFacebookより発表されました。現在は法人化され、yarnやBabelの生みの親である
ElectronでのOSコマンドインジェクションの脆弱性事例
プライベートでお手伝いをしていた Electron プロジェクトで OS コマンドインジェクションの脆弱性を発見し、指摘・修正を行いました。 Electron(Node.js) のアプリケーションで別言語で作成したモジュールを動かす時には、実行ファイル形式にビルドして child_process から呼び出すことが多いと思います。 この記事では child_process.{exec|execSync} を使用した際の落とし穴について、Electron での事例を紹介しながら解説します。 要約 exec/execSync はシェルで実行されるため、外部要因に影響するコマンドを実行する場合は必ずサニタイズしなければならない クロスプラットフォームでかつユーザーの動作環境に依存する Electron の場合は使用されるシェルが変わるため、サニタイズは難しい execFile/execFileS
Webassemblyコンパイラを自作しよう
この記事はBuild your own WebAssembly Compilerを翻訳・意訳したものです。また独自の説明を加えた部分もあります。 前置き もしあなたがWebAssemblyについて聞いたことがなく、本当に詳しい紹介をしてほしいのであれば、Lin Clark氏のCartoon Guideを読むことをお勧めします。 このブログ記事ではWebAssemblyが「何か」を学ぶことができますが、「なぜ存在するのか」についても簡単に触れておきたいと思います。 私の視点では、この図が非常に簡潔にまとめられています。 上の図は、ブラウザ内での JavaScriptコードの実行を簡略化したタイムラインです。左から右に向かって、コード（一般的にはminifyされた状態で提供されます）は AST に解析され、最初はインタプリタで実行され、徐々に最適化/再最適化されて、最終的には非常に高速に実行さ
Electronで組み込み端末向けアプリケーションを開発し3年間運用してみて
組み込み端末のアプリケーションに Electron を採用し開発・運用を行っています。 継続的な機能追加やトラブルサポートを行いながら 3 年が経過したので、Electron を採用した経緯や結果を経験を交えながら共有したいと思います。 組み込み案件自体が初めてでしたのでその話も入っています。 約 700 台ほど導入されており、なかなか大きな案件での採用と思いますので参考になれば幸いです。 ※Electron の基本的な説明は割愛します。 システムについて 一般的に「受付精算機」などと呼ばれ、店頭に何台か並べて設置して自動で受付・精算を行うシステムです。 ホテルの受付端末のイメージです。ハード的にはセルフレジにも近いです。 筐体自体は他社が用意し、弊社はその上に載せる GUI アプリケーションのみを担当しました。 機能 主な機能として 来店受付・整理券発行 予約チェックイン チェックアウト
ブラウザレンダリングの仕組み
フロントエンド用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
