完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH

この記事はNuco Advent Calendar 2023の1日目の記事です。 はじめに 2023年最新のフロントエンド開発環境についての紹介記事です。 分野別に、おすすめツール群と、その特徴などを紹介していきます。 デファクトスタンダードとみなせるようなツールや、最近盛り上がりを見せているものなどをラインナップしました。 これからフロントエンド開発を始めたい人はもちろん、長くご経験のある人にもプラスになる情報がきっとあるため、ぜひ参考にしてもらえると嬉しいです。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 フロントエンド開発おすすめツール集 エディタ エディタやIDEは好みの問題も大きいので、メジャーなものを簡単

はじめに 自分は2021年に新卒でWeb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りとNode.js(Nest)やRailsを用いたバックエンド(API)の開発をしています。 その中で使っていたAPI設計について改めて学び直したのでまとめて行きます。 この記事の対象者 エンジニア初心者から中級者 APIについて学びを深めたい人 この記事の目標 APIについて学ぶ 我流ではなく正しいAPI設計について学ぶ この記事でやらないこと 具体的にコードを用いたAPI設計の書き方の説明に関しては下記の記事で解説をしています。 APIについて APIとは APIは"Application Programming Interface"の略で、直訳すると「アプリケーションを使プログラミングを使ってつなぐ」という意味

フロントエンド用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステッ

2023/03/24 エイチーム×レバレジーズ フロントエンド勉強会 の発表資料です https://ateam.connpass.com/event/276968/

TOP > 新人にもわかる！WebPのブラウザ振り分けの仕組みを図解。picture要素と.htaccessのどっちでやるべき？ 新人にもわかる！WebPのブラウザ振り分けの仕組みを図解。picture要素と.htaccessのどっちでやるべき？ WebP Web画像最適化 表示高速化 新社会人のみなさんが初出社を迎えた会社も多いでしょう。 今日はWebP対応/非対応ブラウザに向けた適切な振り分けについて、新人さん(...が今WebPなどを使うかどうかは置いといて...)にもわかりやすく解説します。 過渡期のWebPはブラウザ振り分けが必須 2019年4月現在、WebPに非対応のブラウザもまだまだ多いので、WebPを使う場合はブラウザの種類やバージョンによる振り分けが必要です。 つまり、ひとつの画像について、WebPに対応したブラウザでは軽いWebPフォーマットで、対応していないブラウザで

どうもフロントエンドエンジニアのoreoです。 今回はWebブラウザのレンダリングの仕組みについてまとめたいと思います。あまり意識していなくても開発はできますが、知っていればパフォーマンスの改善やAccessibilityの向上に役立ちそうですね。 1 レンダリングとは？ 普段私たちは、WebブラウザにURLを指定することで、そのリソースをブラウザ画面に表示できます。この時の 「指定したリソースをブラウザ画面に表示すること」を「レンダリング」と言います。 Webブラウザは、下記のように多くの機能を搭載していますが、この中でRendering engineが、レンダリングを実行します。 参考：https://web.dev/howbrowserswork/ ちなみに、ブラウザごとのRendering engineは下記になります。 Rendering engine Browser 参考：ht

フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 遅延読み込みコンテンツを修正する 重要でないコンテンツや非表示のコンテンツの読み込みを後回しにすることは、一般に「遅延読み込み」とも呼ばれ、パフォーマンスおよびユーザー エクスペリエンスに関する一般的なおすすめの方法としてよく行われます。詳しくは、「ウェブの基礎」サイトで画像や動画の遅延読み込みについての説明をご覧ください。ただし、こうした方法が正しく実装されていないと、対象のコンテンツを Google が認識できなくなるおそれがあります。ここでは、Google が遅延読み込みコンテンツをクロールしてインデックスに登録できるようにする方法について説明します。 ビューポートに表示されるときにコンテンツを読み込む Google がページのすべてのコンテンツを認識するようにするには、すべての関

2019年4月25日 LighthouseをコマンドラインツールやNodeモジュールから利用してWebサイト表示速度計測 UI開発者 古川 Webサイト表示速度最適化の第一歩は計測からということで、速度を計測する際にLighthouseを利用する方も多いのではないでしょうか。 LighthouseはGoogleが提供している拡張機能やChrome DevToolsのAuditパネルから利用することが多いですが、コマンドラインツールとしてやNodeモジュールとしても利用できます。 そこで今回はコマンドラインツールやNodeモジュールとしてLighthouseを利用する方法の例をご紹介します。 コマンドラインツールとして利用する まずは以下のコマンドでLighthouseをグローバルインストールしましょう。 yarn global add lighthouse # or npm install

React でスワイプによるスライドの操作を実装するライブラリ react-swipeable-views が非推奨になりました。この記事では、MUI (旧 Material-UI) のドキュメントに掲載されている react-swipeable-views を使ったコードを代替するライブラリ Swiper に置き換えていきます。 先行記事 【React】Swiper + MUI Tab を利用してスワイプでタブ切り替えを行う https://ramble.impl.co.jp/1959/ 本記事では以上の記事を大いに参考にしていますが、以下の2点で異なります。 TypeScript で記述 react-swipeable-views からの移行を念頭に置いて、その差分を記述 react-swipeable-views react-swipeable-views は React でスワイプ

はじめに React Nativeアニメーションの再入門ということで、スワイプするごとに重なったカードが続々と表示されていく機能を実装してみました。Classコンポーネントを使った古い書き方で実装している個人記事がほとんどだったので、これからReact Nativeのアニメーションを勉強する方の参考になればと思い、functionalコンポーネント縛りで実装しました。 以下が完成品のGIFです。 今回はReact Native + Expo + TypeScriptの構成で実装しています。Expoの導入手順については公式Docsを参照いただければと思います。 また、説明の都合上、importやstyleの部分をほとんど省略して記載しています。ソースコードの詳細を知りたい方や説明なんていらんという方は、GitHubをご確認ください。 1. 1つのデータを表示する 今回はアニメーションの動作を

TOPブログ【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。 デモページを見る まずはこちらのデモページをご覧ください。 片方だけはみ出しているスライダー、サムネイルと連動するスライダー、SPだけスライダーにする方法などなど、実際によく必要になる機能を網羅できるようなデモを厳選してご用意しました。 初心者さん向けのかなり初歩的な内容から、いろいろカスタマイズを加えた応用編まで解説していきます。 メインビジュアルの作例5つ（#11 ～ #15）については、Swiperのカスタマイズ方法だけでなく、アニメーションやデザインの参考になればと思い様

池田 泰延 @clockmaker ウェブ制作会社ICS代表。筑波大学非常勤講師。HTML/CSSのフロントエンド技術が専門、TypeScript/WebGLによる3D表現やクリエイティブコーディングが得意。著書『JavaScriptコードレシピ集』など解説書12冊を執筆。ウェブ業界の最新情報と、現場で役立つ技を発信します。趣味でタイムラプス撮影。 ics.media/entry/staff/ik…

Burikaigi 2023 https://burikaigi.dev/ Twitter https://twitter.com/__sakito__

JavaScriptに興味を持つ世界中のIT技術者3万9472人が回答したアンケートの結果をまとめた「State of JavaScript 2022」が公開されました（日本語訳版が同時公開されています）。 回答者の国別分布を上位5位までを見ると米国が11.9％、ドイツが5.2％、フランスが3.7％、イギリス（UK）が3.6％、そしてインドが3.2％。 言語別の回答者は、英語が69.6％、フランス語が3.4％、ドイツ語が3.1％、スペイン語が3％などとなっており、日本語での回答者は0.4％でした。 アンケートの結果は、ProxyやPromiseなどに関するJavaScriptの新機能がどのくらい使われているか、Service WorkerやWebGLなど新しいブラウザAPIがどのくらい使われているかや、人気のJavaScriptライブラリ、JavaScriptは正しい方向に進化していると思

Webフロントエンド界隈の文献などにあたっていると、「コロケーション (co-location)」という考え方が時々登場します。 コロケーションを簡単に説明すると、関連するリソース同士を近くに置いておく、という考え方です。 FooComponent.tsx と同じディレクトリに FooComponent.test.tsx を置く GraphQL fragment は、クエリを発行するコンポーネントファイル (pages/user.tsx) ではなく、fragment を利用するコンポーネントファイル (components/UserInfo.tsx) の中で定義する pages/user.tsx からはサブコンポーネントのファイルで定義されている fragment を import してきて、クエリを組み立てて発行する API ドキュメントは API.md に書くのではなく、コードの中にド

はじめに こんにちは！ソウゾウのSoftware engineerの@yosanです。 「メルカリShops [フライング] アドベントカレンダー2022」5日目を担当します。 今回はメルカリShopsで行っている、フロントエンドのパフォーマンスの可視化について説明したいと思います。 メルカリShopsにおけるフロントエンドのパフォーマンス可視化 メルカリShopsはWebベースのアプリケーションであり、大まかに次のような構成で運用されています。 iOSやAndroidのネイティブアプリケーションに中おいても、メルカリShopsの部分はWebViewによって提供されています。 この記事における「フロントエンドのパフォーマンス」とは、いわゆるWeb Vitalsになります。例えば、ユーザがサイトにアクセスしてからコンテンツが表示されるまでに何秒かかっているか、あるいは意図せず画面レイアウトが

はじめに 今回はFlyCode氏が紹介していた、Reactを学ぶ上で知っておくべきJavaScriptの基本概念を紹介します。 具体的なJavaScriptでのコード解説と、Reactではそれがどのように使われるのかを紹介します。 この記事の対象者 JavaScriptのよく使う基本文法を学びたい人 Reactの初心者から中級者 この記事の目標 React開発でよく使われるJavaScriptの文法や処理を理解する JavaScriptの基礎文法 本記事では下記の7つをピックアップして紹介します 三項演算子 分割代入 スプレッド構文 配列操作 アロー関数 非同期処理(Async/Await/Promise) APIコール 三項演算子 三項演算子はMDNでは下記のように解説されています。 条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算子です。 三項演