Reactの気持ちになって理解するWebパフォーマンスチューニング
WebアプリケーションのUIの表現はどんどんリッチになってきています。しかしその一方でブラウザ上での描画の負荷は増大し、時としてスムーズに動かず体験を損ねることもあります。ユーザーにとって使い心地の良いUI体験はフロントエンドのパフォーマンスチューニングに大きく委ねられていると言えるでしょう。 スタートアップ開発を支援する株式会社Gaji-Laboでは、サービスの価値に直結するエンドユーザーの体験向上のため、快適なUIを提供する事をとても大切にしています。 この記事では、快適に動くUIを作るため、フロントエンドフレームワークのマジョリティであるReactとどう付き合っていくべきかを考えていきましょう。 Reactの仕事を理解するまず、Reactがどんな仕事をしているのかを理解するところからはじめましょう。Reactの主な仕事はUIを描画すること、そして必要に応じてそれを再描画することです。
JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
JavaScriptメソッドチェーン完全解説！使い方、注意点、カスタマイズ10選
※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。 (送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。) はじめにこの記事を読めば、JavaScriptのメソッドチェーンを使いこなすことができるようになります。 メソッドチェーンは、コードを簡潔で読みやすくするための便利なテクニックです。 しかし、使い方や注意点を把握していないと、思わぬエラーやバグの原因になります。 この記事では、初心者でも分かりやすいように、メソッドチェーンの基本から応用例、注意点、カスタマイズ方法までを10個のサンプルコードで徹底解説します。 ●JavaScriptのメソッドチェーンとはメソッ
あなたの開発生産性を爆上げする、エンジニア向けAIツール22個｜苦しんでプログラミングを学んだ柴犬（くるしば）
こんにちは。くるしばです。 元々コンサルタントの仕事をしていましたが、独学でプログラミングを学習し、Webサービスを作って起業しました。 その後個人で開発したサービスを売却したり、また別のIT系の会社を創業、経営したりしています。 去年の8月から下記のTwitterにてプログラミング学習に関して発信し始め、ありがたいことに13000人以上の方々にフォローして頂きました。 プログラミング初心者に絶対覚えてほしい、ググる時の効率が10倍上がるコツ pic.twitter.com/hK1ZhNavwh — くるしば | 読めば10倍効率が上がるプログラミング学習の教科書 (@shiba_program) September 13, 2022
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
JavaScript NFC入門！使い方・カスタマイズ方法10選
※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。 (送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。) はじめにこの記事を読めば、JavaScriptでNFCを使いこなせるようになります！ NFCはスマートフォンや電子決済でよく使われる技術ですが、JavaScriptを使ってNFCを操作することも可能です。 この記事では、JavaScriptでNFCを扱う基本から、実践的な使い方やカスタマイズ方法まで、初心者にも分かりやすく徹底解説しています。 各使い方にはサンプルコードも付いているので、すぐに試すことができます。 ●JavaScriptとNFCの基本○NFCの
GitHub Copilotを使いこなしてプログラミングの生産性を上げる大切なコツ｜erukiti
皆さんはGitHub Copilotを使っていますか？VSCodeやIDEに拡張を入れると、生成AIとペアプロのようなことができるという、アレです。 最近はこれがないと仕事ができない。なかった時代を思い出せないという人が増えています。プログラミングの生産性に明確に差が生まれます。僕もその口です。 ただ、GitHub Copilotを使いこなせていないという話も度々聞きます。Copilotが提案してくれるコードが微妙で役に立たないというような感じです。 その差はどこにあるのか？を知りたくて6/24に試しにCopilotを使った動画を撮ってみました。実践的なCopilot実演動画というのはすごく珍しいらしく、GitHub dockyardというコミュニティの竣工イベントに登壇してみないか？というお声がけをいただいたので、8/5にGitHub Copilotを使いこなせるとどうなるのかというライ
【TypeScript】カリー化・部分適用は便利だよ！ - Qiita
【TypeScript】カリー化・部分適用は便利だよ！ カリー化・部分適用利用してますか？ 調べたけど「関数を第一級オブジェクトとしてー」とか「関数を部分適用してー」とか説明が講義っぽくて途中で諦めた方も多いと思います。自分もそうでした。 また、知ってるけどどんな時に使うべきか迷って使ってないという方もいると思います。 具体的なコードを交えながら、カリー化・部分適用について、噛み砕いて説明していきたいと思います。 なお、すべてのTypeScriptのサンプルコードは実際に動かして確認することができますので、TypeScript Playgroundなどで是非お試しください。 カリー化と部分適用 まずはカリー化と部分適用の定義をば。 カリー化 (currying, カリー化された=curried) とは、複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引
【初心者向け】JavaScriptのbindって何？？を理解する(call, appyも一緒) | アールエフェクト
この文書を読んでいるということはJavaScriptの初心者の方でbindメソッドがどのようなものか理解しようとしている人、bindとthisとの関係がわからないという人またはthis自体の理解が曖昧な人ではないでしょうか。特にthisの理解が曖昧な人は多いと思うのでこの機会にしっかりと学んでおきましょう。 bindを学ぶ前にbindとは何かまずMDN Web Docsに記述されている内容を確認してみましょう。 bindメソッドが理解できていない時は上記の説明を読んでも何を言っているのかわからないと思います。今意味がわからなくてもbindはthisと関係していること、bindを利用することである関数から新しい関数を作成することができることの2つを頭に入れて下記の文書を読み進めていけば最終的には上記の意味が掴めるかと思います。bind、thisを説明する際に抽象的でわかりにくい単語が使われて
【JavaScript】高階関数 – 関数を引数、戻り値として扱う関数
高階関数の基本的な操作 先ほども触れましたが、「関数を引数、戻り値として扱う関数」を高階関数と呼びます。 ここでは高階関数を使った基本的なコードを扱います。 各種の計算をまとめた巨大なまとまった関数を作って結果を得ることもできますが、良いやり方とは言えません。それぞれの各種計算を行う関数を作って、それらの結果を渡して最終的に利用する関数を作ります。 ここでは配列データと用意して、それを使って計算をする関数を作ります。 次のようにコードを書いてみます。 var years = [1970, 1960, 1935, 2001, 1988]; function arrayCalc(arr, fn) { var arrRes = []; for (var i = 0; i < arr.length; i++) { arrRes.push(fn(arr[i])); } return arrRes;
Webクリエイターの為の情報サイト | Web Programming Portal
みなさまどうもおはこんばんにちは。 さて続きまして、呼びだされたタイミングのカレントオブジェクトを参照できる『this』(ディス)ってやつについて色々とやっていきたいと思います。 これ、めっちゃ便利なのでバッチリ使い方を覚えてしまいましょう。そんでもって『this』を使わないと構築できない処理も存在してたりしてなかったりするので結構必須項目のような感じになってます。 あと他の言語でも『this』のような仕組みは用意されていたりするのでございますが、JavaScriptの『this』の挙動はちょっと特殊かもしれません。なので他の言語、特にクラスベースな概念で設計がされている言語に精通している方は混乱してしまわないように要注意でございます。 というわけでやっていきましょう。とりあえずの『this』の使い方はこんな感じです。 this; 普通に『this』って記述するだけでOKです。オブジェクト
シンプルなスクロールで発火するJavaScriptライブラリを開発しました
GSAPライクな発火の位置指定ができるシンプルなスクロール発火ライブラリSimple Scroll Triggerを作りました。 ▼動作の様子 画面上のポイントと要素のポイントを指定して発火位置を制御できます。具体的には「画面下10%のところに要素の上端がきたら、発火」というような位置指定ができます。始点・終点の指定ができるので、入ったとき（onEnter）・出たとき（onLeave）のほか、戻り去ったとき（onLeaveBack）・出戻った（onEnterBack）ときの4つ発火点を設定できます。 MITライセンスなのでご自由にお使いください。 使い方 // トリガーとする領域の要素 const triggerElement = document.querySelector(".trigger"); new SimpleScrollTrigger({ // トリガー要素。必須。 trig
SSGでNext.jsをローカル開発する時の、ページ生成処理を短くする | WP-kyoto
Next.js Advent Calendar 2020の4日目記事です。 Next.jsをSSGモードで利用している場合、ローカル開発時のページ再生成に時間がとられることが時々あります。 こういう時は、ローカル開発の時 […] Next.js Advent Calendar 2020の4日目記事です。 Next.jsをSSGモードで利用している場合、ローカル開発時のページ再生成に時間がとられることが時々あります。 export const getStaticPaths = async () => { const posts = await getAllWPPost() return { paths: posts.map(post => ({ params: { id: post.id, slug: decodeURI(post.slug) } })), fallback: false }
Node.jsとSeleniumでWebアプリのUIテストを自動化（2023年版） - ICS MEDIA
Webアプリケーションを開発する際、みなさんはどのようにテストを行っていますか？ Webアプリケーションは、ユーザーごとに異なるブラウザを使用しており、ユーザー操作も必要となるため、手作業でテストをされている方も多いと思います。また、機能改修やバグフィクス後に、リグレッションテスト（改修により既存機能への影響がないかを確認する回帰テスト）が必要となりますが、時間が取れずしっかりとテストができていない方も多いのではないでしょうか。 本記事では、これらのテストを自動化することのできる「Selenium Webdriver」（セレニウム ウェブドライバー）について紹介します。 入力フォームのバリデーション機能をチェックするデモ 簡単な入力フォームのバリデーション機能をチェックするデモを動画で紹介しましょう。入力値に対して期待するエラー文言が表示されているかのテストを実施しています。Seleniu
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
【必ず確認するべし】開発・学習で役立つGitHubリポジトリ 10選
はじめに 今回の記事では、私たちプログラマーが開発や学習を進める中で必ず確認しておくべきGitHubリポジトリを20紹介する。今回の記事の対象は主に以下の通り。 開発・学習に必要な情報を収集しているプログラマー GitHubを開発・学習の参考にしたいプログラマー 情報収集の方法がわからないプログラマー freeCodeCamp 世界最大規模のプログラミングメディアであるfreeCodeCampのGitHubリポジトリ。扱う内容はWeb開発、モバイルアプリ開発やデータサイエンスなど非常に幅広い。特にPythonやReact、Node.js、Flutterを実務で扱うプログラマーは必見。 最大の特徴はGitHubリポジトリの名前にあるように完全無料で学べることだ。初心者から上級者まで毎日確認するべきGitHubリポジトリ。 free-programming-books ネット上にあるすべての無
2022年秋版 最新React/Typescript開発環境の作成 - Qiita
vite4がリリースされましたが、プロジェクト作成時に「vite@latest」を指定しているため問題ありません。 vite4は、以下を参照してください。 https://vitejs.dev/blog/announcing-vite4.html はじめに Reactの開発環境は、CRA(Create React APP)がよく使われますが、CRAは沢山のモジュールの整合性の確認などのため、アップデートがリリースされるまでの間隔が結構あります。 また、使われているモジュールをアップデートするとエラーに悩まされたりします。 ゼロからReactの開発環境を作成していたのですが、いろいろとトライを繰り返すうちに以下の方法に落ち着きました。 比較的短時間で環境が作成できますし、全て最新のモジュールが使えます。 Vite nodejsを用いたJavaSriptプロジェクトは、、Webpackなどでプ
JavaScript Patterns Workshop | JavaScript Patterns
The content is based on Patterns.dev - a free online resource on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React. The patterns covered on this website and in the workshop can guide you when facing a problem other developers have encountered many times before, but are not a blunt tool for jamming into every scenario. The goal is to raise aware
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactでMaterial UI（MUI）を使ってみよう - あさめしコード
JavaScript Array Snippets - 30 seconds of code