Next.jsで多言語対応のサイトを作るのが簡単すぎた件
Next.jsで多言語対応を試みた経緯 以前趣味でブログのRSSを登録するとブログの投稿率をGitHubの草のようなヒートマップ形式で表示でき他のユーザーと継続率を競えるサービス、Blog Friendsを開発しました。 今回のこのサービスをProductHunt（海外の自分が作ったWebサービスやアプリを投稿できるサイト）に提出しようと思い英語対応をしました。 日本語サイトがこちらで、 英語サイトはこちらです。 ProductHuntに提出してみた結果は以下のように12Upvotedでなんとも言えない結果でしたが、多言語サイトを作る上で勉強になったので後悔はしていません。 Next.jsで多言語サイトを作る方法 ルーティングを理解する 公式サイトにもあるのですが、Next.jsで多言語サイトを作る方法として以下の二つのルーティング方法があります。 Domain Routing Sub-p
CoffeeScript 辞めました - クラウドワークス エンジニアブログ
CoffeeScript 辞めました はじめに こんにちは、CrowdWorks のジャンヌチームのエンジニア bugfire です。 CrowdWorks は歴史のあるサービスで CoffeeScript が利用されている箇所が大量にあります。 具体的には411ファイルありました。1 いまとなっては CoffeeScript を利用したコードを新たに書くことも少なくなり、改善するときに TypeScript で書き直されることも多くなってきました。しかし、個別に変換すると時間が掛かってしまうため、まとめて機械的に変換することにしました！ 3行まとめ CoffeeScript より TypeScript の方に記述を移していきたい。 利用している Sprockets の CoffeeScript 変換コードを借用して全ファイルを変換しました。 確認は変換前後の出力 JavaScript コ
Next.jsはどうやってスクロール位置を復元するのか
Next.jsにはexperimental(実験的機能)でscrollRestorationというフラグが存在します。 // next.config.js const nextConfig = { // ... experimental: { scrollRestoration: true, }, } module.exports = nextConfig デフォルトでもブラウザ側でスクロール位置を復元してくれることもありますが、Safariでは復元されなかったり、ChromeでもgetServerSideProps利用時にはこのフラグを有効にしないとスクロール位置が復元されないなど不安定な状態です。最近この辺りについて識者の方々から色々ご教示いただき、自分では気付けないような部分の知見も多く得られたので、備忘録兼ねてscrollRestorationが何を解決しようとして、どう実装されて
eslint-plugin-import-accessではじめるディレクトリ単位カプセル化
こんにちは。この記事は筆者が製作した ESLint 向けプラグイン eslint-plugin-import-accessを紹介する記事です。 このプラグインにより TypeScript プログラムに擬似的なpackage-private exportの概念が生まれます。JSDoc で@packageとアノテートされたexport宣言は、そのファイルが属するディレクトリの外からインポートすることができなくなります。 従来、TypeScript で可能なカプセル化の最大の単位は「ファイル」であり、ファイルからエクスポートしない変数はそのファイル（モジュール）の中に閉じている一方で、一旦エクスポートしたものはプロジェクトのどこからでもインポート可能になります。これでは不都合な場合がありました。 最近の具体的な例としてはRecoilが挙げられます。筆者の以前の記事では、Atom や Select
Rust Is The Future of JavaScript Infrastructure
Rust is a fast, reliable, and memory-efficient programming language. It's been voted the most loved programming language six years in a row (survey). Created by Mozilla, it's now used at Facebook, Apple, Amazon, Microsoft, and Google for systems infrastructure, encryption, virtualization, and more low-level programming. Why is Rust now being used to replace parts of the JavaScript web ecosystem li
TypeScriptのJSDocサポートでできること、できないこと
TypeScriptの主要な入力ファイルは .ts, .tsx, .mts, .cts ですが、JavaScriptファイル (.js, .jsx, .mjs, .cjs) も読み込んで処理することができます。JSDocによる型アノテーションを認識するため、生のJavaScriptでもそれなりに型をつけることができます。 本稿ではタイトル通り、TypeScriptのJSDocサポートでできることとできないこと (.ts でしかできないこと) をまとめます。 おことわり 本記事はTypeScript 4.4時点での実装状況に基づいています。なるべくソースコード中の関係する箇所を参照するようにしたので、今後の変更はご自分で検証してください。 (TypeScript Playgroundで試すだけでも有用です JavaScriptモードで開始できるリンク) JSDocの機能一覧・TypeScri
TypeScript 4.5でますます便利に！ better-typescript-lib v2
今日リリースされた TypeScript 4.5 Beta の新機能として、標準ライブラリの差し替えが従来よりも簡単になるというものがあります。 筆者は TypeScript の標準ライブラリからanyを排除してより安全にしたbetter-typescript-libを開発していましたが、このたび TypeScript 4.5 に対応した v2.0.0 のベータ版を用意しました（2.0.0-beta）。 この記事では better-typescript-lib の簡単な紹介に加えて、TypeScript 4.5 の機能の解説やそれによって better-typescript-lib に起こった変化を紹介します。 better-typescript-lib について better-typescript-lib は、TypeScript の標準ライブラリをより型安全にしたものです。better
React TypeScript Cheatsheets | React TypeScript Cheatsheets
React TypeScript CheatsheetsCheatsheets for experienced React developers getting started with TypeScript
移行のメリットはコストを上回るか？ JavaScriptのTypeScript化で気をつけるべき5つのポイント
技術とノウハウを武器に、膨大かつ複雑なデータの「検索」「分析」「可視化」といった課題を解決するフォルシア株式会社が「FORCIA Meetup #2」を開催しました。2回目の今回のテーマは「2020年度にエンジニアが取り組んだこと」。東川翔氏は、マイクロサービスをJavaScriptからTypeScriptに移行したときの気づきについて発表をしました。 JavaScriptからTypeScriptへの移行プロジェクトが始動 東川翔氏（以下、東川）：「JavaScriptからTypeScriptの移行のプロジェクトに関して気を付けた点」について話していきます。 まず自己紹介です。東川と申します。新卒の2年目で新規旅行アプリの開発をしています。興味のある言語はTypeScriptやPostgreSQLです。最近はクライアントアプリケーションの構築にも興味があって、Next.jsに関してアドベン
Trusted Typesを利用してJavaScriptからのDOM操作をセキュアに行う
ウェブアプリケーションの高度化に伴い、セキュリティに対する関心も年々高まりつつあります。特にXSS（クロスサイトスクリプティング）と呼ばれる脆弱性は簡単ながらも大きな被害をもたらします。アプリケーションの開発者は当然セキュリティを意識した開発を行うべきですが、人間の注意は万能ではなく、時に不注意から脆弱なアプリケーションを作成してしまいます。 こういった状況を改善するために、Trusted Typesという提案がなされています。Trusted Typesはよりセキュアなウェブアプリケーションを作る手段を提供し、安全性を高める補助をしてくれます。 Trusted Types HTMLやJavaScriptは非常に柔軟な仕組みを有しており、要素を動的に組み立てることが可能です。例えば以下の例を見てみましょう： const { username, email } = await api.getU
最近の ESLint とかの構成2021
みんな好きな構成を好きなように入れれば良いと思ってるけど、自分が最近やってるやつを雑に紹介する。 シンプルなTypeScriptのプロジェクトを想定している。 npm install --save-dev eslint prettier typescript eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin npm-run-all
設定0行でNext.jsとNuxt.jsの内部リンクを型安全に取得できる最強ライブラリ「pathpida」
Qiita TypeScript Advent Calendar 2020 最終日の記事です。 TypeScript製の内部リンク取得ライブラリ「pathpida」 最近ちょっと話題になった frourio と aspida を開発したSolufaです。 Zenn初投稿を記念して、新作ライブラリ「pathpida」を紹介します。 と言っても完全な新作ではなく、初回リリースからもうすぐ1年が経ち月間DL数は1,000を超えています。自分が関わる案件だけで静かに検証を続け、ようやっと今週全面リニューアルして一般告知が出来るようになりました！ pathpidaはNext.jsとNuxt.jsそれぞれのルーティング規約に最適化しているので設定不要で型安全に使うことが出来ます。 どんな問題を解決するのか 以下のように/post/1 に遷移するLinkがあるとします。 import Link from
React17におけるJSXの新しい変換を理解する
今日発表された公式ブログの記事によれば、React17では新しいJSXの変換がサポートされます。これはどういうことなのか、我々にどういう影響があるのかをまとめました。 JSXの変換とは ほとんどの人は、Reactを使う際に以下のようなJSX記法を使っているはずです。具体的には次のようなもので、<div>のようなHTMLに近い記法がJSXです。 const Foo = () => { return <div> <p id="a">I am foo</p> <p key="b">I am foo2</p>> </div>; } これらは純粋なJavaScriptではないため、そのままでは実行できません。そのため、何らかの方法でただのJavaScriptに変換する必要があります。現代では、それを担うのはBabelやTypeScriptです。これらによって、上記のJSXを含むコードは次のように変換
ArmにあるというJavaScript専用命令とは何か、あるいは浮動小数点数を整数に変換する方法について - Qiita
元の値の絶対値が大きすぎる場合や、無限大、NaNの場合は、 6.3.1.4: 表現できない場合はundefined behavior。 Annex F.4: 表現できない場合はinvalid例外が発生して、値はunspecified。 とされています。 これ以外の浮動小数点数→整数型の変換方法には (l)lrint や (l)lround 関数などがあります。 Java 基本的に0方向への丸め（切り捨て）で計算されますが、コーナーケースについても言語仕様で定めています。 NaN：0を返す 結果が表現できないもしくは無限大の場合：符号に応じて最大値または最小値が返る。 参照： 5.1.3. Narrowing Primitive Conversion - Chapter 5. Conversions and Contexts JavaScript JavaScriptではビット演算やいくつか
WebCodecs と WebTransport でビデオチャット | blog.jxck.io
Intro ブラウザの持つ Video/Audio コーデック実装へアクセスする API として WebCodecs の仕様策定と実装が進んでいる。 これにより、映像や音声の変換などといったユースケースへの応用も可能だ。 本来なら WebCodecs 単体の API について解説するところだが、筆者がこの API を待っていた理由であるところの「WebRTC の代替」としての WebCodecs/WebTransport の応用に注目し、背景も踏まえて解説する。 WebRTC WebRTC は UDP 上に DTLS で交換した鍵を用いて、RTP を SRTP で流し、そのシグナリングに SDP を、ホールパンチに ICE(STUN/TURN) を用いることで、P2P ビデオチャットといったユースケースを可能にした API だ。 しかし、最初から「P2P ビデオチャット」というユースケース
useEffect完全ガイド
あなたは Hooks を使って複数のコンポーネントを書きました。ちょっとしたアプリも作ったことがあるでしょう。満足もしている。API にも慣れて、その過程でコツも掴んできました。しかも重複したロジックを転用できるよう Custom Hooks を作り、同僚に自慢して見たり。 でも useEffect を使う度、いまいちピンときません。class のライフサイクルとは似ているけど、何かが違う。そしていろんな疑問を抱き始めます。 🤔 componentDidMount を useEffect で再現する方法は？ 🤔 useEffect 内で正確に非同期処理を行う方法とは？ []ってなに？ 🤔 関数をエフェクトの依存関係として記すべき？ 🤔 非同期処理の無限ループがたまに起こるのはなぜ？ 🤔 古い state か props がエフェクト内にたまに入るのはなぜ？ 私も Hooks を使
JavaScript での時刻操作に Moment.js ではなく Day.js を利用し続けている理由
JavaScript での時刻操作に Moment.js ではなく Day.js を利用し続けている理由2020/09/21 昨日、拙作の Nuxt.js プラグインである @nuxtjs/dayjs の v1.2.0 をリリースしました。 このプラグイン自体は2019年3月に開発をはじめて、おおよそ一年半ほど管理してるのですが、それ以前から JavaScript での時刻操作では Day.js を使ってきました。 Moment.js のプロジェクト終了が告知され、時刻操作ライブラリに注目が集まっていることなので、今一度 Day.js の採用理由についてまとめてみます。 Day.js について iamkun によって開発されている時刻操作のライブラリです。Moment や date-fns などは Organization によって管理されていますが、時刻操作ライブラリとしては珍しく個人に
Reactのコンポーネント周りの用語を整理する
React のコンポーネント周りの用語ってごっちゃごちゃになった経験はありませんか? 友人と話すときなどはなんとなくのニュアンスで伝わるので気にしていなかったのですが、型注釈つけるときやコードリーディングするときに言葉の定義がわからなくなって何回も調べるといったことをよくやるのでこれを機に整理しようと思います。 本記事では JSX 以外にも createElement 記法の知識も要するので、自信がない方は公式やどうして JSX を使ってもエラーにならないのか？をご覧ください。 ここでは React のドキュメント JSX Elements Components TypeScript の型定義 JSX.Element ReactElement DetailedReactHTMLElement DOMElement FunctionComponent Component ReactNode
Pug を HTML に移行して .vue ファイル の template タグ内に ESLint を効かせた話 - SMARTCAMP Engineer Blog
こんにちは！スマートキャンプでインサイドセールスに特化した SaaSを作っているエンジニアの中川です。 上記プロダクトのフロントエンドは Vue.js を用いて開発しているのですが、 その中で SFC 内のtemplateタグで使用していた Pug をやめて HTML に移行した件をこの記事ではお話しようと思います。 また、実際にtemplateタグに ESLint を効かせてみて発覚したエラーや警告のなかで数が多かったものや、これから Vue 3 に移行していく上で対応する必要があったルールを紹介します。 背景 eslint-plugin-vue が効かない チームに Pug 推進派がいない Pug を HTML に移行するには Vue 3 に準拠した Lint ルールを導入する Lint を実行してみる 対応した目ぼしいルール vue-require-v-for-key vue/val
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
guijs