使用ツールはWappalyzer Google chromeの拡張機能でサイトの使用技術を抽出してくれるツールです。
今回はQiitaのサイトで使われている技術を分析してみましょう。
CMS = コンテンツマネジメントシステム Wordpressが有名
| CMS |
概要 |
| microCMS |
APIベースの日本製のヘッドレスCMS |
アナリティクス = サイト解析ツール
| アナリティクス |
概要 |
| Google Ads Conversion Tracking |
|
| Facebook Pixel |
|
| Google Analytics |
王道のアナリティクスツール |
| JavaScriptライブラリ |
概要 |
| React |
Facebook製のOSSのUIライブラリJavaScript製 |
| Redux |
状態管理のためのライブラリ JavaScript製 |
| Emotion |
CSS in JSライブラリ JavaScript製 |
| React Router |
ルーティングライブラリ React用の JavaScript製 |
| MathJax |
ウェブページにきれいな数式を表示できるようにするためのライブラリ |
| Apollo |
GraphQL クライアント |
| フォント |
概要 |
| Google Font API |
|
| Font Awesome |
|
| webフレームワーク |
概要 |
| Ruby on Rails |
日本製のプログラミング言語Ruby用のwebフレームワーク |
| その他 |
概要 |
| PWA |
プログレッシブウェブアプリ |
| Open Graph |
OGP URLをシェアするときに画像や説明文が同時に表示される技術 |
| webpack |
JavaScript 向けのモジュールバンドラー |
| クエリ言語 |
概要 |
| GraphQL |
APIクエリ言語 |
| プログラミング言語 |
概要 |
| TypeScript |
マイクロソフト社が開発したJavaScriptを拡張した言語 |
| Ruby |
日本人が開発したプログラミング言語 |
CDN = コンテンツデリバリーネットワーク
| CDN |
概要 |
| Cloudflare |
アメリカ社製CDN |
| Imgix |
|
| cdnjs |
|
| データベース |
概要 |
| Firebase |
Google社製のモバイルおよびウェブアプリ開発プラットフォーム |
| アドネットワーク |
概要 |
| Google Ads |
|
| Google Publisher Tag |
|
| DoubleClick for Publishers (DFP) |
|
| タグマネージャー |
概要 |
| Google Tag Manager |
Google社製のタグ管理ツール |
| アフィリエイト |
概要 |
| Amazon Associates |
amazon社のアフィリエイトプログラム |
ここからは推測ですが、フロントエンドはTypeScriptを利用したReactベースでスタイリングはCSS in JS の Emotion
バックエンドはRuby on Railsを利用したRubyでの開発が行われていると思います。
モダンとされている技術がてんこもりで見ていて楽しいサイトでした。
PageSpeed Insights
Webサイトの表示速度を測定・評価する分析ツールです。
今回はqiitaトップページのモバイルでのスコアとなります。
