こちらの記事は、『Learn to become a modern Frontend Developer in 2019』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 はじめに 新年になって以前書いた記事を少し簡潔にして理解しやすいように書き直してみました。この文章に以前私が書いた文章と違ったことが書いてあったり、少し矛盾する内容が見つかってもあまり気にする必要はありません。 昨年私が書いた記事はGitHubで公開しています。 Web開発は絶えず変化する分野です - 今日私たちがWebサイトを構築する方法は、2～3年前のやり方とは全く違ってきています。利用できるツールが沢山あり、新しいツールも毎日出てくるので、ウェブ開発者はいつもどのツールを使えばよいのか迷ってしまいます。 私は、ウェブ開発に係るフロントエンド、バックエンド、または運用を学びたいと思う人を対象にしたツ
フロントエンド開発環境・言語・フレームワークの選定基準どうしてる？──進化し続けるUXとDX - TECH PLAY Magazine
「モダンフロントエンド勉強会～進化し続けるUXとDX～」が7月23日に開催。本イベントにはフロントエンド開発で豊富な経験を誇る、現役エンジニアやプロダクトマネージャー3名が登壇した。フロントエンド開発環境の変遷ならびに、言語やフレームワークの選定基準。さらにはフロントエンドエンジニアの働きやすい環境構築といったテーマなどについて、パネルディスカッションを通じて意見交換やQ＆Aが行われた。 言語やフレームワーク、何を使ってる？ オープニングで参加者によく使う言語やアプリケーションフレームワーク、ライブラリなどについて訊ねたところ、Vue.jsが73名と約半数近く。次いでJavaScript、Reactが28名ずつ、jQueryが25名、AngularJSがとTypeScriptが10名ずつ、その他であった。 イベント冒頭では、ラクスル水島壮太氏、freee加藤慧氏、サイボウズ小林徹氏が、各人
EC事業部でエンジニアをしているがっちゃんといいます。より良いショップ運営体験を提供するために、これまでモダンなフロントエンド開発環境の整備が遅れていた「管理画面」に薄くVue.jsを導入している話をします。 管理画面の現状と解決したいこと カラーミーショップでは、ショップの運営や管理をサポートするための「管理画面」を提供しています。商品を追加したり、ショップのデザインをしたり、カラーミーショップの契約を管理したり…と、多岐にわたる機能があります。 ショップオーナーさまに快適にショップ運営を行っていただくために日々改善を行っている、カラーミーショップの中では歴史の長いプロダクトの一つです。 管理画面の開発の様子は概ね以下のとおりです。 コードのベースはPHPで、画面の主なレンダリングはPHPのテンプレートエンジンによって行われている 開発に関係するチームが多く、様々なエンジニア・デザイナー
この記事は Enigmo Advent Calendar 2022 の 5日目の記事です。 こんにちは。フロントエンドエンジニアのWooです。 エニグモへ入社して3年目、主にBUYMAの購入者側のページをReactで構築しています。 BUYMAではReactのグローバルステート管理のために主にReduxを使用していますが、今回は新しい取組としてRecoilを導入し、開発を行なってみましたので、その経験を共有しようと思います。 まず、軽くRecoilについて理解し、Recoilを導入するようになった理由、Recoilで開発する時に良かった点や困ったこと、他にリリースする際に失敗した話、最後にはこれからRecoilのより良い開発経験のための整理などをこの記事でお話ししたいと思います。 Recoilを軽く理解する RecoilはReactプロジェクトのための数多いグローバルステート管理ライブラリ
Material Designベースの 「頑張らないデザインシステム」で爆速フロントエンド開発 | HiCustomer Lab - HiCustomer Developer's Blog
はじめに こんにちは、フロントエンドエンジニアの尾島です。 2 年ほど前から副業という形で HiCustomer の開発にちょこちょこと関わっていましたが、今年の 7 月からはフルタイムで開発をしています。 入社以来、新機能の開発と並行してデザイナーと共に進めている HiCustomer のデザインシステムの作成、アプリケーションへの適用、また運用についてご紹介します! この記事で話すこと: デザインシステム、デザインガイドラインとは なぜデザインシステムが必要だったか どのようにデザインガイドラインをスモールスタートしたか 具体的な Tips など デザインシステム、デザインガイドラインとは デザインガイドラインやデザインシステムという言葉は、人や組織によって定義や解釈が微妙に異なりますが、 一般的に以下のような構成要素(一例)のフルセットとして認識されているのではないでしょうか。 デザ
ReactやVue.js、Angularなどフロントエンド開発フレームワークが注目を集めています。SPA(Single Page Application)なんて呼ばれていますね。Next.jsやNuxt.jsなど、必要となる機能を統合したライブラリも充実してきました。 こうしたフロントエンド開発について調べていると、ググって最初のほうで見つかったチュートリアルや実現例に引っ張られて、他の実現方法に目がいかないことが多々あります(私の場合)。 とくにバックエンドの構成です。 そこで、いろいろ調べる中で見つかったフロントエンド開発で利用できそうなバックエンドを整理しています。個人で利用できるものからエンタープライズ領域まで、ざっくり5つのカテゴリに整理してみました。 Hexabase企業サイトに記事を移行しました。こちらをご覧ください。 React・Vueのフロントエンドで利用できるバックエン
2021 HackDay Yahoo 主催のハッカソン HackDay 2021 に参加しました。 https://hackday.jp/ 開催日: 2021年03月20日 12:00 - 2021年03月21日 12:00 場所: オンライン 結果: 27日なのでまだ。 作ったモノ 「ぎょうれつや」 オンラインで行列に並んだり、自分で行列を作ることができるサービス。 Twitter でログインすると行列にならんだり作れたりする 並ぶ時にコメントできて、みんなのコメントを眺めることができる レコメンド機能でツイートや並んだ行列からおすすめの行列を提案してくれる gyoretsuya.mocchiri.club メンバーと担当 リーダー/インフラエンジニア 機械学習エンジニア/バックエンドエンジニア APP エンジニア/プレゼン/全体PM デザイナー/フロントエンドエンジニア フロントエンド
マナリンクのフロントエンド開発環境【基礎編/TypeScript,ESLint,Jest,Sentry】 | 株式会社NoSchool
CTOの名人です。 ちょっとした要望がありまして、弊社のフロントエンド開発環境についてざっくばらんにまとめてみようと思います！今回は基礎編と題しまして、フレームワークやライブラリについてまとめてみます。 フレームワークNuxt.jsオンライン家庭教師マナリンクのフロントエンドをSSRで実装しています。 Next.jsマナリンクforTeachersという、先生向けのメディアサイトをISRにて実装しています。 ソースコード品質担保 「このままのソースコードでも動くけど、（諸々の事情で）こう書いたほうがよりよいですよ」という注意をしてくれるライブラリです。 JavaScriptに限らず各言語に類似の目的を達成するライブラリはあり、一般に「Lintツール」「Linter」などと呼ばれます。 ESlintは、基本的にはnpm install -D eslintして、ルートディレクトリに.eslin
こちらの記事は、『Learn to become a modern Frontend Developer in 2019』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 はじめに 新年になって以前書いた記事を少し簡潔にして理解しやすいように書き直してみました。この文章に以前私が書いた文章と違ったことが書いてあったり、少し矛盾する内容が見つかってもあまり気にする必要はありません。 昨年私が書いた記事はGitHubで公開しています。 Web開発は絶えず変化する分野です - 今日私たちがWebサイトを構築する方法は、2～3年前のやり方とは全く違ってきています。利用できるツールが沢山あり、新しいツールも毎日出てくるので、ウェブ開発者はいつもどのツールを使えばよいのか迷ってしまいます。 私は、ウェブ開発に係るフロントエンド、バックエンド、または運用を学びたいと思う人を対象にしたツ
はじめに 前日もくもく会で一緒になったエンジニア初学者の方を見て、ポートフォリオとしてフロントエンド開発はちゃんとできてはいるものの、実務において必要な保守性や堅牢性の高いコードについての意識がどうしても不足しているなという印象を受けました。 もちろん初学者の方にそのようなことを求めるのは酷な話なので知らないからダメ、ということを言うつもりは毛頭ありません。 が、職業としてエンジニアを目指すためにフロントエンド開発をやっている場合、保守性や堅牢性を意識すると企業からの評価が段違いなのではないかと思うのです。 そこで今回の記事では単にフロントエンドが開発できるというスキルだけではなく、実務における保守性や堅牢性を意識したフロントエンドを開発するために有効になるであろう技術について説明してみたいと思います。 対象者 プログラミング初学者の方で、モダンなJavaScriptフレームワークを使って
大学在学中＆休学中に複数のIT系スタートアップでのインターンやベンチャーキャピタルでのリサーチバイトを経験後、フリーランスとして独立。現在は「TechCrunch Japan」などでスタートアップ企業のプロダクトや資金調達を中心としたインタビュー・執筆活動を行っている。 From DIAMOND SIGNAL スタートアップやDX（デジタルトランスフォーメーション）を進める大企業など、テクノロジーを武器に新たな産業を生み出さんとする「挑戦者」。彼ら・彼女にフォーカスして情報を届ける媒体「DIAMOND SIGNAL」から、オススメの記事を転載します。※DIAMOND SIGNALは2024年1月をもって、ダイヤモンド・オンラインと統合いたしました。すべての記事は本連載からお読みいただけます。 バックナンバー一覧 Tsunagu.AI が展開する「FRONT-END.AI（フロントエンドエー
Gaudiyがフロントエンド開発でフィーチャーフラグをどう使っているか - Gaudiy Tech Blog
こんにちは。エンタメ領域のDXを推進するブロックチェーンスタートアップ、Gaudiyでエンジニアをしている高島（@takashima_katsu）です。 弊社では最近、フロントエンド開発で「フィーチャーフラグ」の運用を開始しました。 フィーチャーフラグは「信頼性を保ちつつ開発スピードを高める手法」として知られていますが、その運用はプロダクトの特徴や開発のレイヤー、チームの特性などによって様々だと思います。 そこで今回は、Gaudiyでのフィーチャーフラグ導入の背景や、実際の運用の仕方、1ヶ月ほど運用する中で感じた気づきや学びについてブログにまとめてみようと思います。 ※フィーチャーフラグはフィーチャートグルとも呼ばれますが、この記事ではフィーチャーフラグの名称を使用しています。 なぜ導入したのか 導入の背景としては、Gitフローからトランクベース開発へと開発手法を変更したことがありました。
はじめに こんにちは、ジャンヌチームです。 前回のVue3 移行記事に引き続き、フロントエンド周辺の改善をおこなっています。 今回は開発体験の向上を目的とした、 VRT の導入の記録となる記事になります。 VRT について VRT とは Visual Regression Testing のことで、画像による回帰テスト、つまり画像の変更をテストするものです。 クラウドワークスでは Vue3 移行に伴い、ほぼ全ての Vue.js コンポーネントで Storybook を定義しています。 この Storybook 定義を用いて、Storyshot による DOM レベルの自動回帰テストを行っています。 しかし CSS の変更におけるビジュアルテストは担保できていなかったため、VRT を導入することにしました。 VRT 調査対象 VRT を導入するにあたり、どのツールを用いるとよいか調査をしてみ
0. はじめに Storybookはiframeによる閉じた環境でComponentを実装できるツールです。主な用途として次の３つがあります。 エンジニアとデザイナーが協働する環境として使う エンジニアがサンドボックス環境として使う 再利用できるComponentのカタログとして使う いずれも強力な利点ですが、エンジニアリングの観点で最も重要なのは３番目の用途です。フロントエンド開発は自由度が高く、不用意に複数のエンジニアで開発を進めると、コードベースは簡単に秩序を失い技術的負債が蓄積されていきます。 Storybookを導入する主たる理由は、Storybookでカタログ化することにより、Componentの凝集度を高める動機づけになるからです。その結果、再利用できるComponentが量産されていきます。 この記事では、フロントエンド開発において容易に凝集度が低下する理由と、なぜStor
フロントエンド開発者的週刊アスキーへの道（ならず）
あらかじめおことわり 🙇割と週刊アスキーを持ち上げるような内容となっていますが私は週刊アスキーとの関係は一切ございません。 週刊アスキー、唯一のプログラマー向け連載 「週刊アスキー」と言えば、自作PCを始め、どちらかというとハードウェアについての話題が多いイメージがある、かも知れません。私自身そう思っていたのですが、実は何年間も「JavaScriptの部屋」という連載が続いています（リンク先の記事一覧は最新の日付が2017年になっていますが、本誌ではずっと続いています。かつてはウェブサイトと本誌両方で掲載していたのでしょうか）。「JavaScriptの部屋」では、HTMLファイル一つに収まる程度の大きさの、それでもなかなか面白くて役に立ちそうなプログラムを、毎週紹介してくれます。 「昔のベーマガかよ！」なんてツッコミを待っているかのごとく、ソースコード全体をそのまま紙面に載せてくれている
フロントエンドエンジニアの仕事内容や業務事例、働く環境などについて紹介する「LINEフロントエンドエンジニア採用説明会」。そこでフロントエンド開発センターUIT1室の折原氏が、「LINE NEWS」の開発とメンバーについて共有しました。 LINE NEWSについて 折原レオナルド賢氏：では、自分からは「LINE NEWSの開発メンバーの働き方」という題で、「LINE NEWS」の紹介をします。 自分は折原レオナルド賢と言います。フロントエンジニアをやっています。たまにチーム内でUXアドバイザー的な立ち回りをすることもありますが、主にはフロントエンジニアです。LINE入社は3年目で、主な開発プロダクトとしてLINE NEWSをやっています。 最初に、LINE NEWSがどういうものなのかを紹介します。LINE NEWSは一言で言えば、ニュースを提供するプロダクトになっています。 ニュースを提
はじめに 主にフロントエンドの領域でお仕事をさせていただく中で、どのようなことを意識して開発を行っているのかを自己理解を含めて記事として残しておきたいと思います。 これからフロントエンド開発に従事する方々の多少なりとも参考になりますと幸いです。 なお、最近の業務ではVue.js（Nuxt.js）を使った開発に携わることが多いのですが、個人的な趣向としてはReact.js、TypeScriptを好みますので記事に出るコードはこちらを用いて表現したいと思います。 UIに対して意識したこと 前提としてUI/UXはデザイナーだけで考えるものでなく、エンジニアでも考えてコーディングをする必要がある箇所だと思っています。 なお私がUIについて調べ、認識をしている定義はユーザーが触れるweb上のパーツ等の当たり前に考慮がされてあり、考慮が出来ていないとユーザーを困らせるものであるという認識を心がけていま
Tonamelのフロントエンド開発で、パフォーマンス改善に向けてやったこと - KAYAC engineers' blog
こんにちは！GC事業部の熊谷です。 この記事はTech KAYAC Advent Calendar 2022 17日目の記事です。 TonamelのWebフロントエンド開発において、パフォーマンスについて考える機会が最近あったため、振り返りつつ書いていきます。 サービスの紹介 Tonamelをかんたんに説明すると「トーナメントプラットフォーム」です。 具体的に言うと、大会の作成から運営、トーナメント表の管理を行うWebサービスです。 こちらの機能説明画像が、どういうサービスかを分かりやすく示しています。 Tonamelの機能説明 パフォーマンスに向き合う機会 Tonamelには様々な機能・ページがありますが、ここではメインとなる「トーナメント表」に限って説明します。 トーナメント表は、大会の参加者が増えるほど大きくなります。 大会の最大人数は256人、限定機能も含めると1024人までのトー
2023年9月22日紙版発売 2023年9月22日電子版発売 WINGSプロジェクト 齊藤新三 著，山田祥寛 監修 B5変形判／368ページ 定価3,520円（本体3,200円＋税10%） ISBN 978-4-297-13685-7 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto この本の概要 本書は，最近需要が急増しているSSR（Server Side Rendering）によるSPA開発に適したWebアプリケーションフレームワーク「Nuxt 3」の解説書です。Nuxtは，最新のバージョン3でVue 3に完全対応したことで，Composition APIやTypeScriptを活用した効率的な開発が可能になりました。さらに，CSR／SSR
ASP.NET Core Blazor WebAssembly - 学ぶべきポイントまとめ【フロントエンド開発入門者向け】 - Qiita
ASP.NET Core Blazor WebAssembly - 学ぶべきポイントまとめ【フロントエンド開発入門者向け】Blazor こんにちは！ テクニカルコンサルティングチームの古堅です。 ASP.NET Core Blazor (以下 Blazor) の入門者向けに、学ぶべきポイントのまとめ、および、参考になるページを紹介します！ 本記事では、詳細の解説はしていませんが、気になる方はお気軽にお問い合せください！ Blazor 概要 ASP.NET Core Blazor の概要 Blazor プロジェクトの構成 Blazor プロジェクトの構成を、Blazor WebAssembly と Blazor Server を比較しながら確認する - ASP.NET Core Blazor で始めるフロントエンド 開発（入門編）- ① レイアウト ASP.NET Core Blazor レ
ユーザーの求める業務機能をWeb経由で提供することが、いまやアプリケーションの基本的なスタイルとなっている。そこでは、必要な機能要件を満たすだけではなく、業務生産性や利用にまつわる快適性をいかに高めるか、すなわちUX（ユーザー体験）をいかに向上させるかが重要なテーマとなる。そして、その重要なカギを握っているのが、JavaScriptを活用したフロントエンド開発だ。2022年9月29日にオンライン上で開催された「Web TECH FORUM 2022」（グレープシティ主催）では、JavaScriptフレームワークや関連ライブラリ製品にまつわる最新動向が紹介された。ここでは、当日のセッションの模様をレポートしたい。 言語仕様も継続的に進化を遂げ、Web UI開発に欠かせない存在に 前後半で2つのセッションが実施された、今回の「Web TECH FORUM 2022」。最初の講演には、カサレアル
HTML／JavaScript／CSSでできる面白いコツ Photo by FLOUFFY on Unsplash はじめに 多くのフロントエンド開発者が知らない、HTML／CSS／JavaScriptの秘訣を紹介します。 あなたが知らなかったことが、このリストの中に少なくともいくつかあることを願います！ 1. データリスト要素 なぜかあまり使われていないHTML要素です！ <datalist>タグは、<input>要素に「オートコンプリート」機能を追加するために使われます。入力すると、<option>で予め定義したドロップダウンリストが表示されます。 <input list="animals" name="animal" id="animal"> <datalist id="animals"> <option value="Cat"> <option value="Dog"> <opti
【基礎から学ぶ JavaScript 入門 #1】フロントエンド開発でJavaScriptが必要な理由を解説！【ヤフー出身エンジニアが教える初心者向けプログラミング講座】
文系プログラミング未経験 → Yahoo! JAPANエンジニア → 起業家 📙 もくじ 0:00 JavaScriptのオススメの学び方について 1:41 クライアントサイド, サーバーサイドについて解説 2:59 JavaScript未使用時のWebサイト閲覧の仕組み 7:27 ToDoリストを例に AJAX について紹介 10:10 AJAXの最たる例である Google Maps を紹介 12:29 JavaScriptを使った場合のWebサイト閲覧の仕組み 14:56 AJAXを用いた場合のWebサイトの遷移について 16:16 まとめ 🚀 今日のひとこと JavaScript講座の第1回目になります。 Webフロントエンドエンジニアにおいては JavaScriptは必須のプログラミング言語ですが、 「なぜアプリ開発において必要とされるのか」を解説。 Webの仕組み・AJ
Kotlinでフロントエンドを書きたい！ Kotlinには、Kotlin/JSという KotlinをJavaScriptにトランスパイル出来る機能 があります。 これによりKotlinのモダンな文法でフロントエンドやサーバーサイドJSの開発を行うことができます。 フロントエンドでは、公式から React用のKotlinラッパー が提供されており、Kotlinを使ったReactの開発が出来るようになっています。 また、create-react-appのように、create-react-kotlin-app というものも用意されており、これを使えば面倒な設定無しですぐに開発ができます。 今回は、create-react-kotlin-appを使って Reactの公式チュートリアル をやってみたので、それを見ながらKotlinを使ったReact開発についてお話したいと思います。 環境構築などは公
｜DMM inside
こんにちは。FASTCODINGデザイナーの七転び八重子です。 2021年は、フロントエンド開発の需要はますます高くなる見込みです。 フロントエンドのデベロッパーは、一昔前は、HTMLとCSSとjQueryをある程度知っていれば十分でしたが、昨今は、開発のスキルはもちろん、ツール、ライブラリ、フレームワークなど、常に進化し続けているシステムに対応しなければなりません。。。今回はその中で注目すべき「静的サイトジェネレータ」をまとめてみました。 静的サイトジェネレータとは？ 静的サイトジェネレーターとは、英語名でStatic Site Generator（SSG）と書き、静的なサイトをビルド処理(※)によって生成することができるソフトウェアの事です。Webページのパフォーマンスを向上させ、高速にクライアントへ提供できます。 ビルドとは？ 簡単に言うと「ソースコードにバクがないか解析を行い、問題
フロントエンドで利用できる技術が多様化しており、それらの使い方を効率的に学ぶ手段が欲しくなっているはずです。大事なのはその場で実行したりして確認できることで、それによって敷居が大幅に下がるはずです。 今回紹介するStorybookは各種フロントエンドフレームワークに対応した、UIコンポーネントエクスプローラーです。 Storybookの使い方 例えばボタンです。Vueでの記載例が出ています。 ログを確認することもできます。 クリックする度に表示が更新される例。 アクセシビリティに関する情報を学ぶこともできます。 StorybookではReact/Vue/Angular/React Native/Ember/Webコンポーネントなど、様々なフロントエンドについて学ぶことができます。コードを変更して動作の違いを知ることも可能です。ぜひ新しいフレームワークを試す際に使ってみてください。 Stor
「みんなでテイクアウトMAP」を例に説明 「テイクアウト」とあるけど、別に「トイレ」でも「酒屋」でもOK データソースはOpenStreetMap。オープンデータで登録不要のAPIがあるので便利 自前でデータベースと中に入れるデータを整備するよりも遥かに効率的 不足したデータはみんなで登録することで、他プロジェクトの役にも立つ OpenStreetMapは、プロジェクト間のデータ共有プラットフォームが本質 WebサーバーはGitHubをお借りする（Pages利用）ので無料 OpenStreetMapのデータはOverPass APIを利用するので登録不要＆無料 後はHTMLとJavaScriptでコードを書くだけでテイクアウトマップが作れる OverPass APIについて 大雑把に書くと、JavaScriptからOpenStreetMapの「データ」を取得するAPIのこと 「データ」とは
フロントエンド開発にちょっと慣れてきた方におすすめしたいPatterns.dev - 電通総研 テックブログ
みなさんこんにちは、X イノベーション本部ソフトウェアデザインセンターの徳山です。 本記事は電通国際情報サービス Advent Calendar 2022 12月9日の記事です。 ISID に入社して1 ヶ月ばかりですが、今まで携わってこなかった技術領域に触れる機会が増えそうなため刺激的な日々を送っております。 さて、これまでユーザーに近い領域の開発、いわゆるフロントエンドを中心とした開発に携わり4年目となります。 保守性や再利用性が高いコードをどのようにしたら書くことができるのかを模索する日々ですが、意外とフロントエンドに関しては手頃にまとまっている文献が少ないと感じます。 そこで今回は、ウェブフロントにおけるコード改善に役立ちそうな書籍を見つけたのでそちらをご紹介したいと思います。 Patterns.dev とは 全体を通した大きな特徴 個別のパターンの紹介 デザインパターン レンダリ
フロントエンド開発環境のアップデート：Next.js 13、 React 18、 TypeScript 4.9 の導入 - asoview! Tech Blog
みなさんこんにちは。 アソビュー株式会社でフロントエンドエンジニアをしている櫻井と申します。 今回は、Next.js 12、React 17、TypeScript 4.7 で開発していたプロジェクトをNext.js 13、React 18 および TypeScript 4.9 にバージョンアップした際の対応について書きたいと思います。 目的と背景 やったこと 環境関連の変更 Next.js や React のバージョンの変更 lint 関連のバージョンの変更 next-transpile-modules の削除 React 18 へのアップデートに伴う対応 TypeScript 4.9 へのアップデートに伴う対応 satisfies operator まとめ 目的と背景 昨年のアドベントカレンダーでご紹介した通り、現在、下記の記事にあるような大規模なシステム刷新プロジェクトが進行中です。そ
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
目次 1.この記事を書くきっかけ 2.自己紹介 3.この記事を見てほしい人 4.Reactについて 5.Next.js + Tailwind cssの導入方法 6.Tailwind css 7.スクロールアニメーション 8.Next.jsのImageについて 9.おわり 10.おまけ 1. この記事を書くきっかけ fwywdという会社の１次試験でQiitaに記事を投稿するという試験があり、書くことになりました。 初めて記事を書くので、ご不明な点等があるかもしれませんが、できるだけ詳しく書いていくので、どうぞよろしくお願いいたします。 2. 自己紹介 私はhtml css を３カ月前に勉強し始めたばかりの学生です。 Tailwind css歴は２カ月程度ですが、こんな私でもfwywdの一次試験のサイト制作が合格したので、ぜひ参考にしていただければ幸いです。 3. この記事を見てほしい人 Re
アクセシブルなフロントエンド開発のこれまでとこれから
アクセシブルなフロントエンド開発のこれまでとこれから 2021年11月27日に開催された JS ConfJP 2021 にて登壇してきました。このページはそこで登壇した内容をもとに書き起こした記事です。 アクセシビリティとは何か フロントエンド開発をしている人であれば「アクセシビリティ」という言葉は耳にしたことがあると思います。 では、アクセシビリティとは一体何を意味する言葉なのでしょう。 アクセシビリティはあらゆる人がアクセスできるようになることを指します。 アクセスする、というと想像しづらいのですが、なんらかの情報を得られるようになる、とある機器やサービスを利用できるようになると言い換えるとイメージしやすいかもしれません。 では「ウェブアクセシビリティ」とは何でしょうか。 外務省の定義として 「ホームページを利用している全ての人が、心身の条件や利用する環境に関係なく、ホームペー
GitHub Pagesでフロントエンド開発のステージング環境を手軽に構築する（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Super GitHub Pages: budget frontend staging, with Storybook and more—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/08/04 原著者: Ekaterina Shibakova（フロントエンドエンジニア）、Travis Turner（技術編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 はじめに ステージング（staging）環境のセット
「Next.js 10.1」では、既存のコードを変更することなく、従来バージョンと比較して3倍高速な高速リフレッシュを実現したほか、依存関係グラフの最適化によって、インストール時間と依存関係のサイズを削減している。 また、next/imageにおいては、Apple M1チップ（いわゆるApple Silicon）のサポートや、フィードバックに基づく新たなレイアウトを追加するとともに、画像最適化機能において組み込みイメージローダを拡張し、カスタムローダの追加を可能にした。 ほかにも、Next.js Commerce Shopifyが統合され、エラーページに独自のロゴとブランドを追加する機能、大規模なTypeScriptアプリによる拡張可能な構成を実現するためのtsconfig.jsonにおけるextendsのサポート、プレビューモードが有効になっているかを検出できる機能、ルータメソッドでの先
Atomic Design × Typescript × React × Muiの実践的なフロントエンド開発
こんにちは！BrunchMadeの@はせがわです。 この度、株式会社BrunchMadeに創業メンバーとしてジョインしました🙌 今回はそのBrunchMadeのホームページ制作にあたって、学んできたことを共有していきます。 設計：Atomic Design 言語：Typescript フレームワーク：Next.js UIライブラリ：Mui（Material-UI） はじめに フロントエンド開発している方はほとんど聞いたことあるであろう「Atomic Design」。 そもそもAtomic Designはデザインシステムを作成するための方法論ということもあり、UI設計の答えではありません。そのため、実際のフロントエンド開発に取り入れようとすると意外と手こずることが多いのではないのでしょうか？ また、記事・サイトなどを検索しても説明は載っているが、具体的なコードが少ない。Organismsの
2009年ごろからWebアプリケーションはSPAを代表に、複雑な要件を求められる傾向にあり、フロントエンド開発のパラダイムシフトが起きていました。jQueryは次第に影をひそめ、MVC/MVVMを活用したBackbone.js、AngularJSなどの新たなWebアプリケーションフレームワーク、ライブラリが次々と出現しました。 この時期フロントエンド開発でJavaScriptが担う役割は飛躍的に大きくなりました。この状況でフレームワークなどが提供する設計指針なしに実装を進めると、非常に複雑でレガシー化を引き起こしやすいコードになってしまう。 そこでMVC設計という従来サーバーサイドで普及していた概念がフロントエンドに導入されました。 MVCフレームワークとして人気の高かったのがBackbone.jsでした。 MVCモデルを導入することでビューとモデルが直接関連することがなくなり、フロントエ
React とか Vue とか Webpack とかで混乱している人のための現代フロントエンド開発入門 - Qiita
序論 本稿は 元市役所職員がWEBプログラマに転職するまでのロードマップ の連載記事の一部です。 本稿は、Node.js ベースの現代的フロントエンド開発についてまとめた入門記事です。 主に以下のような方を対象としています。 HTML, CSS, JavaScript を使った基本的なWebフロントエンド開発ができる方 Node.js ベースの最近のフロントエンド開発について、情報が多すぎてよく分からなくなっている方 React や Vue といった最近のフロントエンドライブラリを使った開発に興味のある方 Webフロントエンド開発の歴史 1991年に Web (World Wide Web) がインターネット上に誕生した当初、Web は文書閲覧のためのものでした。 そのため、現在我々が利用するような SNS や Google Maps のようなインタラクティブコンテンツ（ユーザと Web
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2019年版 最先端のフロントエンド開発者になるために学ぶべきこと - Qiita
ショップ運営を支えるプロダクトにフロントエンド開発環境を薄く導入している - Pepabo Tech Portal
BUYMAフロントエンド開発にRecoilを導入してみた話 - エニグモ開発者ブログ
ざっくり、フロントエンド開発のためのバックエンドサービスを整理する - Qiita
2021 HackDay フロントエンド開発振り返り - とろろこんぶろぐ
2019年版 最先端のフロントエンド開発者になるために学ぶべきこと - Qiita
保守性や堅牢性を高める！モダンフロントエンド開発に必要な周辺技術をまとめてみました - Qiita
“デザインを理解するAI”でフロントエンド開発の自動化へ、Webサイト制作の変革目指すスタートアップ
フロントエンド開発体験向上のために VRT を導入してみた - クラウドワークス エンジニアブログ
なぜフロントエンド開発にStorybookを導入するのか - Qiita
月間154億PVを誇るプロダクトのフロントを12人で開発する 「LINE NEWS」のフロントエンド開発の特徴と魅力
2021年のフロントエンド開発の中で意識をしたこと - Qiita
Nuxt 3 フロントエンド開発の教科書
JavaScriptを活用したフロントエンド開発の最新動向――「Web TECH FORUM 2022」開催！
フロントエンド開発者が知らない11の秘訣 - Qiita
create-react-kotlin-appでイケてるフロントエンド開発 - Qiita
DMM プラットフォームのフロントエンド開発を支えるエコシステム - DMM inside
【2021注目】フロントエンド開発「静的サイトジェネレータ」 | FASTCODING BLOG
Storybook - フロントエンド開発者向けUIコンポーネント学習サイト MOONGIFT
フロントエンド開発で好きなマップを作る - Qiita
フロントエンド開発のためのテスト入門
Amazon.co.jp: フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識: 吉井健文: 本
【Next.js + Tailwind】これを押さえればOK 最新のフロントエンド開発 - Qiita
Reactフロントエンド開発Webフレームワーク「Next.js 10.1」がリリース
Amazon.co.jp: フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識: 吉井健文: Digital Ebook Purchas
フロントエンド開発の変遷④ JavaScriptライブラリ乱立時代 - Qiita