フロントエンド カテゴリページ

ビジュアルリグレッションテストについてまとめ、ネットで調べると数多くのライブラリがありどれがどんな立ち位置なのか全体像がわかりずらかったのでどんな種類があるのか入門の入門としてまとめます、またPlaywrightを使って実際に触ってみました

vue-pdfを使ってNuxt.jsで作成しているアプリケーションに pdfスライドを表示させるサンプルを作成しました README.md通りに実装してもうまくいかないところがあったのでそのあたり含めてまとめます

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

TypeScriptの入門の入門チートシート 型の種類や使い方についてまとめていくだけでなく、 TypeScriptについてや必要性などについてもまとめることでこのページでTypeScriptをざっくり理解できる程度の内容を目指す

StorybookとはUI開発環境を提供するツール React、React Native、Angular、Vueなどをサポートしている ユーザーは独立した開発環境でコンポーネントを個別に作成して挙動の確認をテストできたり、コンポーネントを一覧にしてカタログ化できるので他の人に紹介する時に使えたりする

フロントエンド開発における状態管理、データフローについて忘備録的にまとめることとする 状態とはアプリケーションが保持するデータのことで データフローとは状態を含むアプリケーションが持つデータの流れのことで 具体的にはどこにデータを保存して、データの読み書きを行う際にどこからどのように行うのかという点を指す

Trashy.cssを使うとHTMLの構造が可視化されるのでheader,nav,main,article,selction,footerなどの要素が正しく実装されているかを確認することができる 使い方 ブックマークレットが用意されているのでそちらを使って試してみる

Flexbox(CSS Flexible Box Layout)についてまとめる Flexboxとはボックスの横並びや縦並びが手軽に実装できるレイアウトモジュール 今までだとfloatなどがあったが、cleafixでの解除が必要だったり縦方向の中央揃えが面倒な部分があったが Flexboxだと簡潔に記述ができて、柔軟なレイアウトが実装可能とのこと

Vue.jsやNuxt.jsで開発をすることになったが 改めて「なんでVue.jsにしたの？」「仮想DOMって？」「SSRって何がいいの？」 など聞かれた時にサラサラと答えられなかったので自分なりにまとめる Vue.jsのトレンドをチェック/Vue.jsのメリット/仮想DOMについて/Nuxt.jsのメリット

SassはCSSを効率的に書くための記法 Sassには2つの記法がある SASS(拡張子は.sass)とSCSS(拡張子は.scss) SASSの方が最初に作られたが、デザイナーに不評だったこともありCSSっぽいSCSSが現在の主流となっているので本記事はSCSSの記法をまとめることとする

Vue.jsのサンプルを作成したので忘れないようにブログにまとめていく Hello Worldぐらいなら作れるけどその次は何をしよう...という人向けに以下の内容を簡潔にまとめていく

React コンポーネントにはライフサイクルメソッドというものが存在する コンポーネントが作成されようとしたり削除されようとした時にそれを検知することができるので 初期化処理やリソースの解放処理などを記述することができる