「frontend」カテゴリーアーカイブ

【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで – Feedforce Developer Blog

【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog

【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog

id:daido1976 です。入社してからあっという間に1年が経っていました。 直近3ヶ月ほどプライベートでフロントエンド開発の勉強をしていたのですが、ここ数年で CSS の Grid や React の Hooks が新しく導入されたことなどもあり、少し古いコンテンツだと教材として役立たない1 と感じることが多かったので、本記事では私...

はてなブックマーク - 【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog はてなブックマークに追加

Node.js徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方 – エンジニアHub|若手Webエンジニアのキャリアを考える!

Node.js徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方 - エンジニアHub|若手Webエンジニアのキャリアを考える!

Node.js徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方 - エンジニアHub|若手Webエンジニアのキャリアを考える!

Node.jsは「イベントループモデルで、ノンブロッキングI/Oを使用している」「問題発生時にHTTP/TCPやPOSIX APIなど低レイヤーの知識を求められる」といった特徴を持つ言語です。開発者が習得すべき技術領域が広いため、Node.jsらしい書き方の学習難易度は高いと言えます。 それでは、Node.jsをうまく活用できている企業...

はてなブックマーク - Node.js徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方 - エンジニアHub|若手Webエンジニアのキャリアを考える! はてなブックマークに追加

すべての新米フロントエンドに読んでほしい50の資料 – Qiita

すべての新米フロントエンドに読んでほしい50の資料 - Qiita

すべての新米フロントエンドに読んでほしい50の資料 - Qiita

はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすす...

はてなブックマーク - すべての新米フロントエンドに読んでほしい50の資料 - Qiita はてなブックマークに追加

Web標準でつくるガラケーサイト – Speaker Deck

Web標準でつくるガラケーサイト - Speaker Deck

Web標準でつくるガラケーサイト - Speaker Deck

このスライドは令和元年5 月18日に東京で開催された Inside Frontend #3で発表した資料に簡単な説明を追加したものです。 フィーチャーフォンからデスクトップまですべてのデバイスで動くマインスイーパークローン(proxx.app)を作った経緯と開発の過程を発表しました。 なにか質問があればTwitterで@kosamriまでどうぞ。...

はてなブックマーク - Web標準でつくるガラケーサイト - Speaker Deck はてなブックマークに追加

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend – Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend #insideFE slide with @tokimariri. Web App Checklist😉: 💡Rendering patterns 💡CDN 💡Perf Budget 💡a11y 💡PWA 💡WASM in Web Worker 💡Monitoring tools 💡DX (including LGTM!) and so on! 🙌

はてなブックマーク - Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck はてなブックマークに追加

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend – Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend #insideFE slide with @tokimariri. Web App Checklist😉: 💡Rendering patterns 💡CDN 💡Perf Budget 💡a11y 💡PWA 💡WASM in Web Worker 💡Monitoring tools 💡DX (including LGTM!) and so on! 🙌

はてなブックマーク - Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck はてなブックマークに追加

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend – Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck

Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend #insideFE slide with @tokimariri. Web App Checklist😉: 💡Rendering patterns 💡CDN 💡Perf Budget 💡a11y 💡PWA 💡WASM in Web Worker 💡Monitoring tools 💡DX (including LGTM!) and so on! 🙌

はてなブックマーク - Web App Checklist 〜高品質のWebアプリケーションをつくるために〜 / Web App Checklist 2019 at Inside Frontend - Speaker Deck はてなブックマークに追加

意外と知らない?HTML/CSSを書く上で便利なデベロッパーツールの機能13選|Kazutaka Shimizu|note

意外と知らない?HTML/CSSを書く上で便利なデベロッパーツールの機能13選|Kazutaka Shimizu|note

意外と知らない?HTML/CSSを書く上で便利なデベロッパーツールの機能13選|Kazutaka Shimizu|note

こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、 起業する際にエンジニアがいなかったので、独学でWeb開発を勉強してプロダクトを作りそこから3年ほど運営し、最近はその経験をこちらのツイッターで発信しています...

はてなブックマーク - 意外と知らない?HTML/CSSを書く上で便利なデベロッパーツールの機能13選|Kazutaka Shimizu|note はてなブックマークに追加

最近のDMMのフロントエンドの動向とその先について – yamaScrapbox

最近のDMMのフロントエンドの動向とその先について - yamaScrapbox

最近のDMMのフロントエンドの動向とその先について - yamaScrapbox

https://dmm.connpass.com/event/125120/ 最近のDMMのフロントエンドの動向とその先について Twitter.icon https://twitter.com/ur_uha CTO室 千葉弘太郎 デザイナ => エンジニア 1. 体制とフロントエンドの関わり 去年より変化してきた 事業部制 CTO室は何をしているか? 事業部支援 制度支援 啓蒙活動 炎上対応など SR...

はてなブックマーク - 最近のDMMのフロントエンドの動向とその先について - yamaScrapbox はてなブックマークに追加

フロントエンドのお仕事図鑑 | Studio Andy

フロントエンドのお仕事図鑑 | Studio Andy

フロントエンドのお仕事図鑑 | Studio Andy

Webフロントエンドエンジニア2年生になりました。 この1年で本当に多種多様なフロントエンドエンジニアの方たちとお話する機会をいただき、その度に「フロントエンドの領域って様々な役割があるなー」と思わされる毎日です。 一方で、「フロントエンド開発」という単語が形骸化してきている感覚も抱いており、具体的には...

はてなブックマーク - フロントエンドのお仕事図鑑 | Studio Andy はてなブックマークに追加

SPA が、ウェブ開発のベストプラクティスになる時代 – mizchi’s blog

SPA が、ウェブ開発のベストプラクティスになる時代 - mizchi's blog

SPA が、ウェブ開発のベストプラクティスになる時代 - mizchi's blog

最近のフロントエンドに関するお気持ち。正直まとまってはない。 最近、こんな感じのツイートや記事が増えた。 https://medium.com/@t2y1979/web-技術をキャリアの中心にしない-cf9feb373053 シングルページアプリケーション (以下SPA) の台頭により、私の観測範囲ではモダンな Web サイトは SPA で作られるようになった...

はてなブックマーク - SPA が、ウェブ開発のベストプラクティスになる時代 - mizchi's blog はてなブックマークに追加

webpackとBabelの基本を理解する(1) ―webpack編― – Qiita

webpackとBabelの基本を理解する(1) ―webpack編― - Qiita

webpackとBabelの基本を理解する(1) ―webpack編― - Qiita

独学の内容をまとめたものです。誤りがございましたら、ご連絡いただけると幸いです。 リンク 1. webpackとBabelの基本を理解する(1) ―webpack編―(本記事) 2. webpackとBabelの基本を理解する(2) ―Babel編― 3. webpackとBabelの基本を理解する(3) ―webpackとBabel編― 4. webpackとBabelの基本を理解する(4) ―React編― ...

はてなブックマーク - webpackとBabelの基本を理解する(1) ―webpack編― - Qiita はてなブックマークに追加

一休.comホテルリストの表示速度を従来比2倍にしました – 一休.com Developers Blog

一休.comホテルリストの表示速度を従来比2倍にしました - 一休.com Developers Blog

一休.comホテルリストの表示速度を従来比2倍にしました - 一休.com Developers Blog

宿泊事業本部フロントエンドエンジニアの宇都宮です。 2018年度下期は、一休.comホテルリストページ スマホ版の速度改善に取り組んできました。その結果、ページのデザインはそのまま、機能面はリッチにしつつ、プロジェクト開始前の約2倍のスピードでページが表示されるようになりました。 本記事では、高速化のために...

はてなブックマーク - 一休.comホテルリストの表示速度を従来比2倍にしました - 一休.com Developers Blog はてなブックマークに追加

正真正銘のReactだけの不純物なしでReact入門

正真正銘のReactだけの不純物なしでReact入門

正真正銘のReactだけの不純物なしでReact入門

Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと...

はてなブックマーク - 正真正銘のReactだけの不純物なしでReact入門 はてなブックマークに追加

JavaScript が読み込まれる前でもWeb Applicationを動かす – from scratch

JavaScript が読み込まれる前でもWeb Applicationを動かす - from scratch

JavaScript が読み込まれる前でもWeb Applicationを動かす - from scratch

今回は最近取り組んでいる、 JavaScript が読み込まれる前であっても「ちゃんと」 Web Application が動作するように作る話をします。 Server Side Rendering における注意点と対策 BFFを使ってServer Side Rendering をすることに数年前から取り組んでいます。 まずはSSRをやる上での注意点と対策について紹介します。 ...

はてなブックマーク - JavaScript が読み込まれる前でもWeb Applicationを動かす - from scratch はてなブックマークに追加

JavaScript フレームワークを巡った話 – ジンジャー研究室

JavaScript フレームワークを巡った話 - ジンジャー研究室

JavaScript フレームワークを巡った話 - ジンジャー研究室

ポエムです。 自分の今の立場としては「Elm の人」ということになってるんだけど、どういう変遷でここまできて今どういうスタンスなのかっていうのはあんまり話す機会がない。だから整理のために考えてることを書いていくよ、というのがこの記事の趣旨。 非 Web の立場から そもそも自分は「Web 系」の出身ではない。新...

はてなブックマーク - JavaScript フレームワークを巡った話 - ジンジャー研究室 はてなブックマークに追加

ニコニコ生放送がwebサービスを大人数で開発する際に辿ってきたフロントエンド アーキテクチャ – Qiita

ニコニコ生放送がwebサービスを大人数で開発する際に辿ってきたフロントエンド アーキテクチャ - Qiita

ニコニコ生放送がwebサービスを大人数で開発する際に辿ってきたフロントエンド アーキテクチャ - Qiita

この記事はドワンゴ Advent Calendar 2018 25日目の記事です。 ドワンゴでニコニコ生放送のPC Webフロントエンジニアをやっています、 @kondei です。 いつまでも新人気分だったのに、いつの間にか入社5年目になり、この前ナチュラルに新卒に歴史的経緯を語る立場になっていて勝手にショックを受けました。いにしえの時...

はてなブックマーク - ニコニコ生放送がwebサービスを大人数で開発する際に辿ってきたフロントエンド アーキテクチャ - Qiita はてなブックマークに追加

webpackのbundle後のJavaScriptのサイズを減らしている話 | リクルートテクノロジーズ メンバーズブログ

webpackのbundle後のJavaScriptのサイズを減らしている話 | リクルートテクノロジーズ メンバーズブログ

webpackのbundle後のJavaScriptのサイズを減らしている話 | リクルートテクノロジーズ メンバーズブログ

はじめに リクルートテクノロジーズに4月に新卒入社した 辻 健人です.GitHubではmaxmellonで活動しています. 7月より,やりとりも作成もラクになるシフト管理サービス「Airシフト」 のエンハンス開発を担当しています. 以前は,React製SPAのパフォーマンスチューニング実例という内容で記事を書きました. 今回は同じ...

はてなブックマーク - webpackのbundle後のJavaScriptのサイズを減らしている話 | リクルートテクノロジーズ メンバーズブログ はてなブックマークに追加

今年、JavaScriptでの仕事の幅を広げた技術6選 – Qiita

今年、JavaScriptでの仕事の幅を広げた技術6選 - Qiita

今年、JavaScriptでの仕事の幅を広げた技術6選 - Qiita

こんにちは。久しぶりのQiita投稿です。 今回は「ex-KAYAC Advent Calendar」の13日目の記事として寄稿させていただきます。 さて、改めて私の今やっていることを紹介させていただきますと、独立してから株式会社Lucky Brothers & co.という会社を設立し、主にWebの受託制作を行っています。 かれこれ3期目に突入致しま...

はてなブックマーク - 今年、JavaScriptでの仕事の幅を広げた技術6選 - Qiita はてなブックマークに追加

フロントエンドエンジニアは Micro Frontends の夢を見るか – Mercari Engineering Blog

フロントエンドエンジニアは Micro Frontends の夢を見るか - Mercari Engineering Blog

フロントエンドエンジニアは Micro Frontends の夢を見るか - Mercari Engineering Blog

Mercari Advent Calendar 2018 の6日目はフロントエンドチームの @vwxyutarooo がお送りします。 このタイトルが言いたくて Micro Frontends の記事を書きました。皆さんは Micro Frontends という言葉を聞いたことがあるでしょうか? 私は数ヶ月前まで全く知りませんでした。メルカリのフロントエンドチームにて Micro F...

はてなブックマーク - フロントエンドエンジニアは Micro Frontends の夢を見るか - Mercari Engineering Blog はてなブックマークに追加

ヤフー株式会社におけるWebフロントエンドの技術選定 – Yahoo! JAPAN Tech Blog

ヤフー株式会社におけるWebフロントエンドの技術選定 - Yahoo! JAPAN Tech Blog

ヤフー株式会社におけるWebフロントエンドの技術選定 - Yahoo! JAPAN Tech Blog

Yahoo! JAPAN Tech Advent Calendar 2018の6日目の記事です。一覧はこちら Yahoo! JAPAN Tech Advent Calendar 2018の6日目を担当します、Webフロントエンドエンジニアをやっている向井(@sakito)です! 今回はヤフー株式会社でWebフロントエンドエンジニアがどのような取り組みを行なっているのかをお伝えします。 ヤフ...

はてなブックマーク - ヤフー株式会社におけるWebフロントエンドの技術選定 - Yahoo! JAPAN Tech Blog はてなブックマークに追加