修正履歴 (2021.9.18)開発環境をつくる > React(Next.js)の場合 (2021.5.5)開発環境をつくる > Vue(Nuxt.js)の場合 > 4.(オプション)Sass(SCSS)が使えるようにする はじめに この記事はWordPressをCMSとして使用し、WordPress本体でのWebサイト構築、SSG(静的サイトジェネレータ)と呼ばれるVue(Nuxt.js)、React(Next.js)を使って構築してみて、構築方法や運用周りの違いのメリットやデメリットを書いてみます。 目的 開発者視点で、表示速度の早く快適なパフォーマンスを得られるwebサイトが構築できる技術選定ができるように。 閲覧者視点で、実際上記が体感ができるようにプロトを用意。 運営者視点で、新規ページ追加や、更新など柔軟にできるのかとか。 私の知識整理 私の知識整理 なぜWordPressか
概要 仕事でNuxtとLaravelでSPAを構築する機会があったため環境構築方法を備忘録として残しておく。 バージョン Nuxt: 2.14.x PHP: 8.0.x Laravel: 8.x PostgreSQL: 12.x 前提 Laravelの公式では認証でSanctumを利用することを勧めていますが、 Multi認証方法が調べてもでてこなかったためSession認証を使って実装する。 Sanctumを利用する場合はこちらの記事を参考にしてください また、各種Dockerfileの説明は記事の長さの関係上省略してあります。 コードはこちらからご確認ください。 構成図 Nuxt側設定 完成品 docker-compose 構成図の左のようにNuxtコンテナだけの構成にしてあります。 Backendとの通信を可能にするためにNetworkをBackendで定義しているsample-sp
本文書ではVue.jsのフルスタックフレームワークであるNuxt 3を使ってアプリケーションの開発を効率的に行いたいという人を対象に Nuxt 3についての解説をできるかぎり簡単なコードを利用しながら行っています。Vue.jsのComposition APIのコードが理解できることを前提に記述しているのでVue.jsを使って記述したコードの詳細について解説は行なっていませんが、本文書を読み終えるとNuxt 3の全体像と基礎的な理解を深めることができます。 Nuxtを利用したファイルのアップロードについては別の記事で公開しています。 Nuxt 3とは NuxtはVue.jsをベースに開発されたフルスタックのWEBフレームワークです。 Vue.jsはUI(User Interface)を担当しますがNuxtではVue.jsが持つUIに関わる部分だけではなくSSR(サーバサイドレンダリング)を含
2022年11月16日 Nuxt 3.0.0 (stable) がリリースされました（日本時間11/17） Announcing 3.0 • Nuxt この記事はベータリリース時に初稿を公開しましたが、本リリース版に対応するため加筆修正しています。 ユーザー待望の Nuxt 3 が公開されました。 （Vue 2 対応だった Nuxt 2 の Vue.js 3 対応版です） Nuxt 3 は、TypeScript のネイティブサポートをはじめとした開発体験の向上など、多数の改善がなされています。 もっとも注目したいのは Nitro によるデータ取得やレンダリング周りの機能向上があります。 Nitro により、いわゆる ISG （Incremental Static Generation インクリメンタル静的ページ生成）も可能です。Nuxt 3 は、とてもシンプルに（意識することなく）活用する
この記事では、マッピングする方法について述べるだけで、それに伴う仕様や実装方法などについては言及しません。 TL;DR import util from '~/util'; のように ~/ から始まるパスにしたとき、 src ディレクトリからの相対パスとしてマッピングするには、2020 年 12 月現在、次の方法があります。 Parcel もしくは Nuxt.js を使う場合、設定しなくても自動でマッピングされます webpack を使う場合、webpack.config.js の resolve.alias を設定します Babel だけを使う場合、 babel-plugin-module-resolver を使って設定します tsc で型チェックする場合、もしくは Next.js を使う場合、tsconfig.json の paths を設定します 「~/ を任意のディレクトリにマッピ
はじめに こんにちは、からころです。 今回は、Vue.js でよく利用される v-model の記事について保守性などの観点から書いていこうと思います。想定している読者としては、Vue.js を触ったこと、見たことがある方全般です。v-model は利用方法を誤ると痛手を負いがちですが、非常に強力な味方だよということをお伝えできればと思います。また、Vue.js のバージョンは、記事執筆時点で最新の 3.5.8 を想定しています。 v-model とは さて、v-model とはなんでしょうか？公式ドキュメントには、 コンポーネント上で v-model を使用すると双方向バインディングを実装できます。 https://ja.vuejs.org/guide/components/v-model と記載されています。もう少し詳しく書くと、props/emit のショートハンド構文です。 例えば
💎 ハイブリッド Vue フレームワーク Vue 3 で次のアプリケーションを構築し、ハイブリッドレンダリング、パワフルなデータフェッチなどの新機能を体験してください。Nuxt 3 は、Web 開発をシンプルかつパワフルにするオープンソースのフレームワークです。 GitHub で ❤️ する 新機能を搭載 Nuxt 3 は、より小さなコアで再設計され、より速いパフォーマンスとより優れた開発者経験のために最適化されています。 🪶 より軽く 最新のブラウザで最大 75 倍、サーバーデプロイとクライアントバンドルサイズを小さくしました。 🐇 より速く nitro（ナイトロと呼ぶらしい）による動的なサーバーのコード分割でコールドスタート（ハードウェアが初期化された状態から再起動すること）を最適化しました。 ❎ ハイブリッド soon ISG（Incremental Static Genera
PHP Conference 2020 Track4
Nuxt JSのコンテンツを多言語化する方法Nuxt JSで作成されたプロジェクトをi18nというプラグインを使って多言語化に対応する方法を紹介します。あまり実装する機会はないかと思いますが、自分用に備忘録として。自動的に翻訳してくれるわけではなく、言語ファイルを用意して切り替えるという仕様です。 すでにNuxt JS でプロジェクトを作成していることを前提に書いていきます。 i18n をインストールするi18n 公式サイトを参考に、yarn または npm でインストールします。 Yarn yarn add nuxt-i18n NPM npm i nuxt-i18n 言語ファイルを作成今回は英語と日本語の Web サイトを作成していく手順を紹介します。プロジェクトの第一階層に「lang」フォルダーを作成し、その中に英語版を「en.js」、日本語版を「ja.js」として作成します。 各言語
The Intuitive Vue Framework Nuxt を使って信頼ある次世代の Vue.js アプリケーションを構築する Web 開発をシンプルにかつパワフルにするオープンソースフレームワーク
はじめに こんにちは、がんがんです。 2024.02.29 に関西で行われたReboot v-kansai Meetup #15で LT 登壇をしてきました。 登壇内容が GitHub の実装を掘っていくものだったため、本記事で改めて整理できたらと思います。 スライド資料はこちらです Auto-imports の使い方はこちらです Auto-imports 機能とは Auto-imports 機能とはcomponents、composablesを import 文不要で利用できる Nuxt の機能です。components の Auto-imports 機能はNuxt2時代からあったものです。 Nuxt3 の Auto-imports は以下の 2 機能を有しています。 機能 1. Built-in Auto-imports Vue, Nuxt composable が import 不要
本連載では、Webページのユーザーインタフェース（UI）構築に「Vue 3」を利用したフレームワーク「Nuxt 3」の活用方法を紹介します。前回は、Nuxt 3の概要、Nuxt 3プロジェクトの生成・実行、Nuxt 2のプロジェクトでNuxt 3の機能を利用するNuxt Bridgeを紹介しました。今回は、Vue.jsの基本記法を簡単に確認した後、Nuxt 3で利用できる「useAsyncData」「useFetch」機能を紹介します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）を構築できるVue.jsとともに、様々な追加機能をまとめて提供するフレームワークです。現在次期バージョン「Nuxt 3」が開発中で、2022年4月にリリース候補（RC）版がリリースされました。 前回は導入編として、Nuxt 3の概要を説明するとともに、Nuxt 3プロジェクトを生成・実
ja.nuxtjs.org composition-api.nuxtjs.org Vue3.0 がリリースされてからしばらく立ちましたが、Nuxt において Vue3.0 がサポートされた v3.0 がリリースされるのはもうちょっとかかりそうです。 とはいえ、v3.0 がリリースされるのを待って、無理やりバージョンをあげようとしてもおそらく、かなりの痛みを伴うことが、他の皆様のVue3.0移行記事からも読み取れます。 そこで、Vue 3.0 リリースより少し前から、既存の Nuxt Project に composition-API を導入した所感と、導入方法を記録しておきます。 というか、この過渡期においてNuxtへの Composition-API 導入についての日本語記事があまり見当たらなかったので、少しでも参考になれば幸いです。 なお、バージョンは記事公開時点の最新とします。 Nu
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
はじめに こんにちは、がんがんです。 2024 年 4 月、Nuxt から Nuxt ESLint というモジュールが公開されました。Nuxt ユーザー待望の All-in-one ESLint モジュールです。 本モジュールの登場により Nuxt におけるリンターの設定方法が大きく変わりました。 本記事では Nuxt ESLint を用いたマイグレーションを中心に新しい Nuxt ESLint をセットアップしていきます。 Nuxt ESLint とは Nuxt ESLint はAll-in-one ESLint integration for Nuxtと公式ドキュメントに記載がある通り、Nuxt ユーザーのための All-in-one モジュールです。 今までの Nuxt ユーザーは Nuxt3 で ESLint を使う場合、どれが Nuxt 公式のルールだろう Nuxt で ESLi
はじめに こんにちは、メルペイフロントエンドチームの @tokuda109 です。 この記事は、メルペイフロントエンドチームで取り組んでいるパフォーマンス改善について紹介するシリーズ記事の第3弾の記事で、ブラウザ上の Nuxt.js アプリケーションの初期化処理について紹介します。 前回の記事のおさらい 前回の記事で JavaScript がブラウザ上でどのように処理されるのかを紹介しました。 マイクロタスクは、Promise の then 等のハンドラに実装されたコールバック関数を指します。 JavaScript のランタイムの振る舞いとして、マイクロタスクキューに積まれたマイクロタスクは1サイクル内で空になるまで JavaScript エンジンで優先して実行されます。 図1の Run Microtasks という処理ブロックは、Promise の処理が行われていて、他の処理をブロックし
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Nuxtのライフサイクル記事はたくさんありますが、コンポーネント別にまとめてくれている記事がなかったため、自分用に作成しました。よく使うんですが、よく忘れるんですよね、、、。 前提 バージョン Nuxt.js 2.14.4 補足事項 nuxtServerInit store/index.jsに記述しています。 beforeEach/afterEach pluginsにファイルを作成して、nuxt.config.jsで読み込んでいます。 fetch fetchは、公式推奨のcontextなし(引数なし)と非推奨のcontextあ
ushironokoのブログです。技術・ゲーム・趣味・仕事など。
2022年11月16日 Nuxt 3.0.0 (stable) がリリースされました（日本時間11/17） Announcing 3.0 • Nuxt この記事はベータリリース時に初稿を公開しましたが、本リリース版に対応するため加筆修正しています。 Nuxt 3 の useState を使った State 管理（状態管理）の記事です。 Nuxt 3 では Vuex がサポートされていません。 Vue 3 に対応した Vuex 5.x がリリースされるのを待たずとも Nuxt 3 にもいち早く対応した Pinia を使って State 管理をすることは可能です。 しかし、それほど大規模なアプリケーションでなければ useState と Composables (Composition Function) を組み合わせることで非常に簡単に State 管理をすることが可能になります。 Pini
yarn add nuxt-edge@latest yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge typescript npx nuxi prepare npx nuxi prepare で型定義生成後、プロジェクトに応じて nuxt.d.ts と nuxt-shims.d.ts を作る https://zenn.dev/link/comments/196aa7b7a89dca nuxt.config.js(ts) で defineNuxtConfig import { defineNuxtConfig } from '@nuxt/bridge'; export default defineNuxtConfig({...}) 型周りが変わっているものがあるので注意 buildModules から @nuxtjs/composition-
Vue Fes Japan 2024
こんにちは！のせっちです。 Web制作エンジニアとして普段はHTML/CSS, WordPressを中心に書いています。 僕のようなWebエンジニアがNuxt.jsでLPを書くために必要な知識をご紹介します。 なぜLPをNuxtで書くのか？ 僕がNuxtでLPを書こうと思ったきっかけは下記です。 コンポーネント化して使いたい（header, footerなど）for文を使いたい。metaタグを別で管理したい。一緒に入ってくるビルドツールを活用したい。 ということで、要は見通しよく、効率よく書きたいということです。 LPコーディングですので、データベースとの連携等は行いません。 これだけでグッと難易度は下がります。 コラム： これはとても個人的な理由ですが、ejsがどうにも好きになれなくて、勉強を兼ねてNuxtでLPを書いてみたら便利だった！という感じです。 LPをNuxtで書くために必要な
はじめに composition-apiがリリースされて時間が経ちました｡ Nuxt.jsで使う場合はpluginsで Vue.use(VueCompositionApi) を読み込むやり方が主流だったのではと思います｡ そんな中､ @nuxtjs/composition-api がリリースされていました｡ @vue/composition-apiと比べてNuxt特有の機能(UseAsync)などをサポートしているのが特色で､@vue/composition-apiをラップしているのでcomposition-apiの機能はもちろんNuxt特有の機能が揃っている｡というものです｡ なのですが個人的には以下の1点のみが気に入ってます｡
せっかくREST APIの情報を元にページを作るならgenerateするファイルは自動で出力したいですよね。 公式ドキュメントのところでいう「動的ルーティング」を使って実現してみましょう。 うまくいけばREST APIを元に自動でディレクトリ構造やhtmlファイルが生成されます。 考え方 nuxt.config.jsにgenerateプロパティを記述、そこに使用するAPI情報を読み込む記述をします。 ここでは読み込んだjsonの配列の中にある、ディレクトリ構造を示す値をrouteに設定していきます。 次に自動生成されるページ用のテンプレートファイルを作成します。 ディレクトリに対して細かく設定することも出来ますがWPのパーマリンクを元にする事を考えると「pages/_.vue」というファイルを作ってしまうのが手っ取り早いかなと思います。 テンプレートファイルは頭文字にアンダースコアを付ける
フロントエンドのエラーを検知するのは、バグの早期発見、場合によってはリリースバージョンを切り戻しの判断をしたりする上で非常に重要です。 Sentryを使えば、かなり簡単にフロントエンドのログ収集の仕組みを実現出来ます。また、他の同様のツール(Rollbarなど)に比べてモダンなUIかつ、ドキュメントやTipsが豊富な気がします。また、nuxt-community にて sentry-module が提供されてる点もgood。 SentryにはReleaseという機能があり、運用環境へのデプロイとログを紐付けることが出来ます。また、SourceMapを一緒にアップロードしておくことで、本番環境でも stack trace を追えるようになります。 しかし、今回@nuxtjs/sentryを使ってReleaseしようとした際、公式の記述がさらっとしていてちょっと困ったので備忘録として残しておき
はじめに 公式ドキュメントをしっかり読もう。 なんとなくで始めても良いけど、結局、公式ドキュメントに戻ることが多かった・・・。 理解度によるんだろうけど。 ハイドレーション サーバーサイドレンダリング(SSR)などで事前にサーバー側で作られたHTMLを、JavaScriptで動的にしていくプロセスのこと。 ①サーバーサイドで作られたHTMLをブラウザが受け取る。 ②javascriptがサーバーサイドで作られたHTMLと期待しているHTML（ブラウザに表示されているHTML)をチェックする。 違っていれば、javascriptが再度レンダリングする。 ③期待するHTMLに対してjavascriptのイベントを登録していく。 個人的に詳細まで理解できていないので、SEOが心配なときはcurlでhtmlを確認するのが良さそうな気がする。（心配性） インストール node.jsのバージョンは、1
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 これからNuxt.jsで開発を始める方向けに、最初に抑えておきたいポイントを個人的にまとめます。私自身としてはAngularアプリの初期構築業務の経験があるのですが（数万行単位で書いてました）、自分が新チームの技術選定をするタイミングでNuxt.jsを選定しました。ある程度SPA開発の知識はありましたが、最初は各フレームワーク毎に結構抑えどころというか癖見たいのを感じました。そんな、親切で日本語な公式読んでもすぐには手の動かない並エンジニアの自分の様な方向けにまとまったチートシート的な感じになればいいなと思っています。 // 20
![[Nuxt.js入門] 全体像をざっくり掴むためのポイントまとめ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/32c017e39f5d631049b617fa11742c11d187cd4e/height=288;version=1;width=512/https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttps%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMTk0OTc4JTJGcHJvZmlsZS1pbWFnZXMlMkYxNjExMzkwMzUxP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz05YTc4OWFlZTk4MDdkYmVjN2QzZTdiMjhkNWNkMWJjNA%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D8187e1219124ecade02e2b9d933392d2%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCTnV4dC5qcyVFNSU4NSVBNSVFOSU5NiU4MCU1RCUyMCVFNSU4NSVBOCVFNCVCRCU5MyVFNSU4MyU4RiVFMyU4MiU5MiVFMyU4MSU5NiVFMyU4MSVBMyVFMyU4MSU4RiVFMyU4MiU4QSVFNiU4RSVCNCVFMyU4MiU4MCVFMyU4MSU5RiVFMyU4MiU4MSVFMyU4MSVBRSVFMyU4MyU5RCVFMyU4MiVBNCVFMyU4MyVCMyVFMyU4MyU4OCVFMyU4MSVCRSVFMyU4MSVBOCVFMyU4MiU4MSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPThhODYwZGY2NzkwZTg0N2E2MDQwMmFmOTYyYzkyZDYw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBoZWRyYWxsJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9MjM3NmVkMDY1MTM2YzE4MmM3ZGZmMWMzYmMwMjM0YmM%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dba00284a8e368cedd1751edbc9ebf54b)
クライアント案件で、GTMタグを埋め込みたいとの連絡をいただいた。 通常の静的サイトであれば、GTM用のタグを <head>内と<body>直後の全ページに設置するだけで良いのだけれど、 これをnuxtでgenerate出力した場合のサイトにシンプルに適用する方法について共有します。 （20/02/19 時点で動作確認） 対象サイト nuxt.js（v2.0.0）で構築 universalモード（非SPA） generateで生成した静的Webサイト（下層ページあり） やりたいこと GTMから発行される下記タグを全ページに設置する（あるいはそれと同等のことをする）。 <head>〜</head>に <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': ne
Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。 JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Nuxt3 が2022年11月16日に正式リリースされました。 また、Nuxt2 が2023年12月31日に EOL を迎えるということで、今働かせていただいている現場でアップグレードプロジェクトを爆誕させ、その PL をやらせていただくことになりました。 そのアップグレードにおける激動の完遂までの道のりを本記事でまとめようと思いましたので、今後アップグレードを行おうとしている方や、現在実施している方、これから行おうとしている方に読んでいただければと思います。 目次 PJ 始動までの事前準備 いざ、アップグレード！ エラー量が
Slides for Vue Fes Japan 2023
概要 自作のNuxt.jsはSSRモードでfirebaseにホスティングしようとネットで方法を探してました。 見つかった記事は2019の物でちょっと古くて（実際その通りやったら詰んでしまう）困ってました。 そこでこの記事とこの動画を参考になんとかデプロイできました。 でもどれも英語だったのでせっかくなので日本語の記事を書こうと思った次第です。 手順を見たくない方へ このボイラープレートをそのまま使う。 手順1 新規Nuxtアプリを作成する 注意 nuxt本体のソースコードを管理しやすいために/srcの中に入れてますが、そうしなくても良いです。ただ後述のfirebase.jsonのpredeployの設定をご自身のパスに合わせて修正してください。 手順2 まずfirebaseでアカウントを申請し、新規プロジェクトを作成してください。 nodeバージョンを10以上を使うため、プランはblaze
結論 以下のような条件にあてはまる場合は、Nuxt Bridge を使う恩恵を得られると思っています。 コンポーネントやページ数が多く、比較的大きなアプリケーション Nuxt 3 へ移行するためのリソース（人員、工数）がない 上記に当てはまらない場合は、Nuxt 3 へ直接移行したほうが効率が良いかもしれません。 はじめに Nuxt 3 へ移行する方法として、大きくは下記の二通りだと思っています。 Nuxt Bridge を使って Nuxt 3 へ移行する Nuxt 3 へ直接移行する Nuxt Bridge を作っている身なのでもちろん Nuxt Bridge を使ってほしいですが、使わないほうが移行がスムーズだと思うケースもあるので、個人的にどう選んでいるかを書きます。 Nuxt Bridge を使った方がいいと思うケース コンポーネントやページ数が多く、比較的大きなアプリケーション
import { sortRoutes } from '@nuxt/utils' export default { router: { extendRoutes(routes, resolve) { routes.push({ path: '/blog/page/:id', (1) component: resolve(__dirname, 'pages/blog/index.vue'), (2) name: 'blog-page-id', (3) }) sortRoutes(routes) (4) }, }, }
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
