モダンなWebフロントエンドの技術とAMP
モダンなWebフロントエンドの技術とAMP モダンなWebフロントエンドのフワームワークやツールとAMPについて紹介します。 リクルートテクノロジーズ兼リクルートライフスタイルのASGチームに所属しているフロントエンドエンジニアの可児です。本記事は、リクルートライフスタイルアドベントカレンダー４日目の記事です。 本記事では、リクルートライフスタイルで取り組んでいる新規Webサービスのモダンなフロントエンド開発に関することとして、Next.jsやAMPについて紹介します。 目次 はじめに モダンなWebフレームワーク React/Next.js TypeScript styled-components AMP AMPとは AMPの開発パターン Next.jsとAMP AMPキャッシュ AMP と 非AMP の共存 検索結果カルーセルとSEO AMPの開発における注意点 まとめ はじめに リク
Service Workerがもつ圧倒的な力。SEO担当者は変化に適応が必要 | Moz - SEOとインバウンドマーケティングの実践情報
PWA、SPA、Service Workerとは？（前編で解説）SPAを可能にするApp Shellアーキテクチャ（中編で解説）Service Workerがもつ圧倒的な力まとめ3. Service Workerがもつ圧倒的な力最初にはっきりさせておきたいことがある。それは、ここまでで解説してきた「SPA」と、ここから取り上げる「Service Worker（サービス・ワーカー）」は、互いに排他的なものではないということだ。 つまりこの2つは共存するものだということだ。どちらもPWAと呼ばれるものの基盤となっているが、SPAではないPWAをつくることも可能だし、従来の静的なウェブサイト（クライアントサイドでレンダリングする処理がないサイト）にService Workerを統合することもできる（近い将来、そのようなサイトが増える僕は思っている）。 さらに、Service Workerはウェブ
任意のJavaScriptをAMPで動かせる！amp-scriptが一般公開される
[レベル: 上級] 試験的に公開されていた <amp-script> が一般公開されました。 AMP では原則的に、AMP で定義された以外の JavaScript を動かすことが許されていません。 しかし、<amp-script> を利用すれば任意の JavaScript を AMP ドキュメントで実行することが可能になります。 好きな JavaScript を AMP で実行 <amp-script> を使うと、自分で書いた JavaScript はもちろんのこと、React や Angular、Vue.js といった JavaScript フレームワークを構成することも可能です。 ユーザーのアクションに応じてインタラクティブなコンテンツや機能を <amp-script> は提供できます。 ※Chrome Tech Talk Night #14 で Paul Bakaus 氏が紹介して
AMP（Accelerated Mobile Pages）入門 - Qiita
概要 こんにちは、都内でフロントエンドエンジニアをしているかめぽんです。最近、Next.jsのバージョンアップにて対応したことで一層話題になっているAMPですが、僕自身AMPのことをそこまで注目していなくてたまたま調べてみたら割とおもしろうそうだったので、インプットした内容をまとめてみました。サンプルコードなども載せていますので、AMPの基礎的な情報の参考にしていただければと思います。 本題 AMPとは、メリット AMPとはAccelerated Mobile Pagesの略で、GoogleとTwitterが発足したモバイルページを高速に表示させるためのプロジェクト、またはAMP HTMLというフレームワークのことを指します。 AMP自体は以下の構成要素で成り立っています。 AMP HTML Custom Styling(CSS) AMP js AMP Cache(CDN) 静的なHTML
この DOM がすごい2018: worker-dom - mizchi's blog
おもしろライブラリを見つけて興奮しているので紹介します。 UIスレッド(メインスレッド)からユーザー操作をブロックしてしまうような重い処理を逃がす off-the-main-thread を実践しようとなると、実際に問題になるのは、ほとんどの処理は何らかの形で DOM を参照し、それに連なるものが処理時間の殆どを占めている、ということです。 off-the-main-thread の時代 - mizchi's blog DOM に触れない WebWorker でビジネスロジックを処理するのは、ある種の健全性(Universal/Isomorphic)を手に入れるための「縛りプレイ」として有用ですが、現状は実用上のメリットが殆どありません。 例えば react / redux の reducer で、ビジネスロジックを worker 側に移して処理できるぐらいアイソモーフィックに(DOMに触
Vue.js SEO-Friendly SPAs: Tips, Tools & Prerender Example
Do you know about Hulu's JavaScript fail story? Back in 2016, the online video streaming service experienced a 56% visibility drop due to bad JS handling. A nightmare no business wants to go through. To avoid such disasters, you have to know what you're doing when working with modern JavaScript frameworks. Here at Snipcart we are expert of JavaScript for e-commerce, and we love Vue.js. However, we
テクニカルSEOの上級者になりたいならJavaScriptに精通すべし
[レベル: 上級] SEO に一生懸命に取り組んで精通したいのであれば、今後は JavaScript に詳しくなることを、Google の John Mueller（ジョン・ミューラー）氏は推奨しました。 SEO に強くなりたいなら JS を学ぶ reddit の SEO 掲示板に次のような相談が投稿されました。 SEO には JavaScript の知識はどのくらい重要か？ ミューラー氏はこのようなコメントを返しました。 今後数年にわたって、これまでの SEO の20年よりももっと多くの JavaScript に出くわすことになるだろう。テクニカル SEO に懸命になりたいなら、HTML は終わりにして JS をもっともっと学ぶ必要があるだろう。 しゃれた静的な HTML のサイトには利点があるから、なくなることはなさそうだ。しかしながら、実際のところは、 JS のフレームワークはいたる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
イマドキのSEOでJavaScriptに関して最低限知っておきたい調査テクニック（前編） | Moz - SEOとインバウンドマーケティングの実践情報