Next.js で開発しているときに、getInitialProps・getStaticProps・getStaticPaths・getServerSideProps について、いつ、どのように使うべきか、きちんと整理できておらず、自分なりの整理をしてみた。 今回整理する API は、どれもページコンポーネントで、プリレンダリングをしてデータを取得（フェッチ）する際に使用するものである。getInitialProps は「リクエスト時」にデータを取得する。そして、v9.3 から用途に応じて、より宣言的に書くことができるよう、以下の3つが追加された。 SSG用のAPI getStaticProps（「ビルド時」にデータを取得する） getStaticPaths（データに基づいて動的ルーティングを指定する） SSR用のAPI getServerSideProps（「リクエスト時」にデータを取得

この記事のターゲット テックブログでAdventCalendarを主催して記事を集める立場になった人。 ひいてはテックブログ編集部の人。 特にAdventCalendar参戦が3~5回目くらいのマンネリ感が漂い始めたようなところの話をしています。 なぜAdventCalendarの記事が集まらないのか。 どうして集まらなくなるのか、という点にフォーカスして書いていきます。 この記事の結論を先に書く 流行ってないブログに、人事考課で評価されもしないのに投稿するほど御社のエンジニアは暇でも物好きでもありません。 執筆コストを下げる努力はしましたか？ 執筆コストに対するリターンを用意しましたか？ 最低でもリターンが出るよう戦略を練りましたか？ 執筆者を安心させましたか？ それをせずに「AdventCalendarの記事、もっと集まらないかなー」と祈っているだけなら主催のあなたに問題があります。

VueConf US - Join the official Vue.js conference | May 15-17, 2024 - New Orleans, USARegister Now Use code VUEJSDOCS to get $100 off!

Vue.js の Composition API が登場してから 1 年少しが経過しており、すでに使いこなしている方もいらっしゃるのではないでしょう？ 私自身お仕事で Composition API を使用しており、従来の Options API と比較して UI とロジックの分解がよりやりやすくなったように思えます。リアクティブなデータをコンポーネントの外で定義できるようになったことで、1 つのコンポーネントにまとめて書かざるをえなかった論理的な関心事に分けてそれぞれ別のファイルで定義できます。 書き心地としては React のカスタムフックに近い感じとなっていますね。 個人的には React がクラスコンポーネントから関数コンポーネント + Hook へ移行したように、Vue.js においても Composition API へ移行する流れが来るのではないかと思います。 さて、そんな

2つの違い 新しい関数の作成 onClick= () => openDialog() onClick={openDialog}

基本的な例 ​テンプレート内に式を書けるのはとても便利ですが、非常に簡単な操作しかできません。テンプレート内に多くのロジックを詰め込むと、コードが肥大化し、メンテナンスが難しくなります。例えば、配列が入れ子になっているオブジェクトがあった場合: jsexport default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } } } jsconst author = reactive({ name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Myste

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookなど内部品質面についてあまり深く書くことを避けています ほぼ自分の知識だけで書いており私見も多いですし、そもそも自分自身がトップクラスの知識や視座を有しているわけでもないので、まずは以下の話を理解はした上で、踏襲するかどうかは別途他記事やGitHub、公式ドキュメントなどを漁って判断することを推奨 App RouterかPages Routerか 2023年末現在まだApp Routerは技術記事が足りてきている印象ではないため、社内でノウハウを積極的に貯めていく

このドキュメントはインシデント発生前に予防として読んでおくことを想定しています。 緊急時は Incident Response (internal) 及び #war_room (internal) を確認してください。 インシデント対応について Incident Response (internal) がより網羅的かつ真とするドキュメントです。 このドキュメントでは上記のドキュメントの内容を補足する内容として特に new joiner が認識しておくべき情報を抽出/加筆したものです。 もし上のドキュメントとこの章に食い違いが生じる場合は上のドキュメントを真としてこの章を編集してください。 各チームで new joiner を受け入れるときにこのドキュメントを一律に共有することで共通認識を得ることを目的にします。 このため主に障害対応経験が少ない人に向けた最低限の心構えを共有するものであり障

お知らせ connpassではさらなる価値のあるデータを提供するため、2024年5月23日(木)を以ちましてイベントサーチAPIの無料での提供の廃止を決定いたしました。 2024年5月23日(木)以降より開始予定の「connpass 有料API」の料金プランにつきましてはこちらをご覧ください。 お知らせ connpassをご利用いただく全ユーザーにおいて健全で円滑なイベントの開催や参加いただけるよう、イベント参加者向け・イベント管理者向けのガイドラインページを公開しました。内容をご理解の上、イベント内での違反行為に対応する参考としていただきますようお願いいたします。

お知らせ connpassではさらなる価値のあるデータを提供するため、2024年5月23日(木)を以ちましてイベントサーチAPIの無料での提供の廃止を決定いたしました。 2024年5月23日(木)以降より開始予定の「connpass 有料API」の料金プランにつきましてはこちらをご覧ください。 お知らせ connpassをご利用いただく全ユーザーにおいて健全で円滑なイベントの開催や参加いただけるよう、イベント参加者向け・イベント管理者向けのガイドラインページを公開しました。内容をご理解の上、イベント内での違反行為に対応する参考としていただきますようお願いいたします。

App Router への移行は「改善」となり得るのか？/ Can migration to App Router be an improvement

こんにちは、リファクタリングが大好きなミノ駆動です。 この記事は READYFORアドベントカレンダー2021 、初日の記事です。 なにこれ？ 苦労して執筆した技術記事は、伝えたい人にしっかり伝えたいですよね。 また、最後まで読んでもらいたいですよね。 一方で、構成などに課題があって、伝えたい人になかなか伝わらないことがあります。 この記事は、伝わる記事の書き方について、私の個人的なノウハウを書き記したものです。 これからアドベントカレンダーの記事を執筆される皆さんにとって、少しでもお役に立てられれば幸いです。 この記事のゴール 以下の理解を得ることをゴールとします。 以下2つの要件を踏まえた記事構成を心がけること。 構成要件①：技術を紹介する上で最低限説明の必要な内容を網羅すること。 特に課題をしっかり伝えること。 構成要件②：読み手が段階的に理解しやすい順番になっていること。 告知の仕

📢イベント概要 フロントエンド開発において、コンポーネント設計における考え方は日々進化し続けています。ライブラリのバージョンアップや新しい方法論が登場し、最適な設計手法もそれに応じて目まぐるしく変わっています。しかし、常に最新のコンポーネント設計手法をキャッチアップし取り入れていくことは難しくどこまで追いつけば良いのか、と感じたり、現在の設計方法が最適なのか不安に感じている方も多いのではないでしょうか。 そこで本イベントでは、フロントエンドの第一線で活躍するよしこ氏（@yoshiko_pg）、うひょ氏（@uhyo_）をお招きし、お二人が考える今のReactコンポーネント設計について深掘ります。ディスカッションの中では、「分割粒度」「構造」「スタイリング」「テスト」「パフォーマンス」の5つのテーマに分け、それぞれのテーマに対してお二人がどう考えているのか、実際の取組みや効果的だったアプロー

Vue.jsでCSSを利用する際にScoped CSSやCSS Modules、CSS-in-JSなどの手法があります。とくにScoped CSSは気軽に利用できるため、利用する機会も多くなって来るかと思います。 Scoped CSSがあればCSS設計を使わなくてもよいという意見もありますがはたして本当なのでしょうか？ ICSではScoped CSSにおけるCSS設計に関する議論が活発におこなわれており、本記事では私たちが考えた方式を紹介します。本記事はVue.jsのSFC（シングル・ファイル・コンポーネント）でScoped CSSを利用しているものを想定しています。 CSS設計とは 基本的にCSSは常にすべてのページで読み込まれ、増えれば増えるほど相互に上書きし合う状態が起きやすく、他の言語に比べてかなり壊れやすい言語と言えます。 そこで登場するのがCSS設計です。BEMやSMACSS、

MVVMパターンでは、ViewModelとViewはデータのやりとりを行なっているのではなく、データバインディングが行われている。 そのため、ViewModelで値が変更されると、自動的にViewでの表示も変わる。 (出典) Vue.jsで実現するMVVMパターン Fluxアーキテクチャとの距離 さて、抽象概念の次は具体的なコードを考えてみよう。 vue.jsのコードとMVVMの対応 サンプルアプリの解説 The Movie Database(TMDB)のapiにアクセスし、タイトルから映画を検索し、気に入った映画をお気に入り登録することができるSPA。 フォルダ階層 ちなみに、実際にはviewが複数存在しているため、各ViewModelから別のViewModelに紐づくModelへアクセスしたりするVMとMの配線問題が発生してしまう。 そのため、全てのModelをまとめて、一つの巨大なS

野中やすお フリーランスのWebエンジニアです。IT系雑記を中心に、自分の活動のことや趣味のことを書いていきます。 【技術スタック】Python / TypeScript(Next.js・Nuxt.Js) / PHP(Laravel) / AWS / Dockerなど 【関心事】環境問題 / デジタル化など 【関わっている団体】国際環境NGO350 Japan / ヤンググリーンズジャパン 【趣味】 将棋 / 読書 / 旅行 【GitHubはこちら】

SFC CSS 機能 ​スコープ付き CSS ​<style> タグに scoped 属性が指定されている場合、その CSS は現在のコンポーネントの要素のみに適用されます。これは、Shadow DOM に見られるスタイルのカプセル化に似ています。これはいくつかの注意点がありますが、ポリフィルは必要ありません。これは、PostCSS を使って変換することで実現されます。次のコードは: vue<style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template>

はじめに 今回の記事では、類似しているWeb技術であるReactとNext.jsをコードベースで比較する。 対象とする読者 ReactとNext.jsの違いがわからない人 技術選定で、ReactとNext.jsのどちらにしようか悩んでいる人 Reactとは React（リアクト）は、Meta(旧Facebook)が開発しオープンソースとして公開しているJavaScriptライブラリで、ユーザインターフェースの構築に特化している。 Reactの特徴は以下の通りだ。 コンポーネントベース：Reactの中核となる考え方は、UIを再利用可能なコンポーネントに分割することにある。これにより、大規模なアプリケーションでも管理を簡単にできる。 仮想DOM：Reactは仮想DOMを使ってページの更新やレンダリングを行う。 宣言的UI：Reactは宣言的UIを採用しており、アプリケーションの各状態に対してU

きっかけ State of CSSの CSS フレームワークで Tailwind を抑えて今年から「Open Props」が一位になっていて、気になったので調べてみました。 Open Props とは カスタムプロパティベース CSS フレームワークとのことですが、簡単に言っちゃうと CSS 変数の寄せ集めです。 ぶっちゃけこれだけ笑 color, gradients, shadows, aspect ratios, typography, easings, animations, sizes, borders, z-indexes, media-queries などが用意されていて、あとは CSS でのスタイリング時に使うだけです。 例えばボタンだったらこんな感じでスタイルできます。 button.blue { color: var(--blue-6); background-color