タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
はじめに このページは、プロトアウトスタジオのAPIにつなげる授業に関連して、よりAPIの多様さ、広がりを深掘りします。 まだ、JavaScriptに慣れていなくても「なるべくシンプルにAPIを体験する」ことを目指して、 public-apis というフリーで使えるAPIを集めてリストにしているサイトから、手順が少なくAPIにつなげられるシンプルに取得できるものを中心に、直接取得できるURL・Node.js axios await/async ソースコードを一つ一つトライしています。 慣れてきたら、自分で public-apis のサイトを直接読んでみて、巡ってみましょう！ APIピックアップ数 最終更新日 2020/6/8 104 個のAPIをピックアップ中！ 参考資料 public-apis の豊富なAPIリストをベースにAPIつなげていきます。 ピックアップルール 手順が少なくAPI
axios は v1.0.0 でどう変わるのか
概要 本記事は、HTTP クライアントライブラリである axios の v1.0.0 が満を持してリリースされたため、何がどう変わったのか、マイグレーションしても良いのかについて個人的に調べてまとめた結果になります。 TL;DR axios の v1.0.0 は、パッケージのモダン化に向けた節目としてのバージョンともいえる v1.0.0 では多数のバグ修正と、いくつかの小規模の機能追加がまとめて取り込まれた 破壊的変更や非推奨化は少なからずあるが、基本的な使い方や挙動を大きく変える規模の変更はない 一方で劇的に良くなる変化もないので、急いであげる理由もない 公式マイグレーションガイドは記事執筆時点では提供されていない axios について axios は、JavaScript 向けの HTTP クライアントライブラリの一種で、この種のパッケージとしては比較的古くから普及している老舗ライブラ
React Hooksでテストをゴリゴリ書きたい - react-reduxやaxiosが使われているような場合もゴリゴリテストを書きたい
2023/12/25 続編が出ました🙆♂️ この記事は記述されてからある程度時間が経過してしまっており、自分の考え方も少し変化してきています。 その変化について新しく以下の記事を書いたので、ぜひ参照してみてください。 追記 以下の記事は@testing-library/react-hooksのv3系を使っていました。 v5系に上げるとHookResultではなくRenderResultになったようなので、v5を使われる場合はRenderResultの方をお使いください🙏 🦍 テストコードを書くことがプロダクトコードを書くことと、同じくらい重要であるという認識が浸透しつつある昨今、多くの関数にはおそらくテストがあることと思います😊 最近はReactの開発がメインです。 僕は毎回フロントエンドでテストを書く場合は以下のような方針をとっています。 コンポーネントのテスト storybo
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
はじめに 最近金髪から黒髪に戻して更生しました藤井（フロントエンドエンジニア）でございます。久々にテックブログに貢献させて頂きます！ 今はメインの施工管理機能の改修の傍ら、新機能開発にも携わっておりまして、フロント側はSSRモードのNuxtを採用しております。さて、そんな中SREチームから「フロントエンドがメモリリークしていませんか？」との通報が入りました。 いやいや、そんなハズは・・と思いながらもDatadogを見てみると見事にメモリ消費量が右肩上がりに増えていってます。なぜじゃ・・・。 調査開始 メモリリークになるような処理を入れた覚えはないぞ！と思いつつも調査開始です。ひとまずChromeのDevtoolでPerformanceやMemoryタブを見ながら確認しますが、これと言って原因が見つかりません。 おかしい・・。なんでだろう。 あれこれ試しましたが解決せず、ほぼ1日消化しました
【OpenAPI】APIスキーマから勝手に型がつくaxiosを作って幸せになる【openapi-typescript】
GitHub - googleapis/gaxios: An HTTP request client that provides an axios like interface over top of node-fetch. Super lightweight. Supports proxies and all sorts of other stuff.
interface GaxiosOptions = { // The url to which the request should be sent. Required. url: string, // The HTTP method to use for the request. Defaults to `GET`. method: 'GET', // The base Url to use for the request. Prepended to the `url` property above. baseURL: 'https://example.com'; // The HTTP methods to be sent with the request. headers: { 'some': 'header' }, // The data to send in the body o
Added Added stack trace to AxiosError #4624 Add AxiosError to AxiosStatic #4654 Replaced Rollup as our build runner #4596 Added generic TS types for the exposed toFormData helper #4668 Added listen callback function #4096 Added instructions for installing using PNPM #4207 Added generic AxiosAbortSignal TS interface to avoid importing AbortController polyfill #4229 Added axios-url-template in ECOSY
GitHub - developit/redaxios: The Axios API, as an 800 byte Fetch wrapper.
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
米Googleは、生成AIを活用した機能で「Googleアシスタント」を強化する予定だと、米Axiosが7月31日（現地時間）、独自に入手したとするGoogleの従業員宛書簡に基づいて報じた。 「アシスタントのビジョンとチームの変更」という件名のこの書簡は、Googleアシスタント担当副社長のピーユシュ・ランジャン氏と製品管理ディレクターのジョン・デュケリス氏の連名で、「生成AIの大きな可能性を目の当たりにし、最新のLLM（大規模言語モデル）を活用するGoogleアシスタントがどのようなもになるかを探求する大きな機会があると考えている」と書いている。 モバイルに関しては、すでにその取り組みを開始しているという。 この取り組みを「迅速かつ集中的に実行するために」、組織変更を行うとしている。 「われわれは引き続きGoogleアシスタントに深く貢献しており、その明るい未来を楽観視している」と2人
はじめに このページは、プロトアウトスタジオのAPIにつなげる授業に関連して、よりAPIの多様さ、広がりを深掘りします。 まだ、JavaScriptに慣れていなくても「なるべくシンプルにAPIを体験する」ことを目指して、 public-apis というフリーで使えるAPIを集めてリストにしているサイトから、手順が少なくAPIにつなげられるシンプルに取得できるものを中心に、直接取得できるURL・Node.js axios await/async ソースコードを一つ一つトライしています。 慣れてきたら、自分で public-apis のサイトを直接読んでみて、巡ってみましょう！ APIピックアップ数 最終更新日 2020/6/8 104 個のAPIをピックアップ中！ 参考資料 public-apis の豊富なAPIリストをベースにAPIつなげていきます。 ピックアップルール 手順が少なくAPI
axios-mock-serverとは フロントエンドの開発体験を向上させ、生産性を格段に高めるために作られたTypeScript製のモックサーバーです。 axios専用ではあるものの、JSON Serverよりも遥かに手軽にRESTfulなモック環境を構築出来ます。 GET/POST/PUT/DELETEのAPIエンドポイントを数行で作成できる サーバーを立てないので静的なJSファイルに出力してブラウザ単体でも動かせる TypeScript対応 Node環境のaxiosでも動く Nuxt.js同様のオートルーティング機能でパス記述が不要 IE11対応(>= v0.13.1) axios-mock-server - GitHub この記事はやたら長いので以下の入門記事から読むのをおススメします。 秒でaxiosをモックするnpmモジュールの入門サンプル Nuxt.jsのaxiosを秒でモッ
AWS Lambda Node.js で Axios を利用した通信を X-Ray でキャプチャする | DevelopersIO
こんにちは、CTOの奥田です。 新年あけましておめでとうございます。 昨年もたくさんの方にブログをご覧いただき、ありがとうございました。 本年も気を引き締めてより一層良い制作ができるよう努めてまいります。 2020年もどうぞよろしくお願いいたします。 さて2020年1発目のブログはaxiosについてです。 昨今のWebサイトは非同期でアレコレするのが当たり前になっています。 axiosを使えば簡単に非同期処理を実装することができます。 今回はそんなaxiosについてご説明したいと思います。 Table of contentsaxiosとはインストールGET通信POST通信エラーハンドリングaxios APIを使用するさいごにaxiosとはaxiosとはブラウザやnode.js上で動くPromiseベースのHTTPクライアントです。 jQueryで言うところのjQuery.ajaxであり、非
vue.jsを使ってaxiosを学ぶ | アールエフェクト
CDNを利用するとブラウザのコンソールに”You are running a development build of Vue. Make sure to use the production build (*.prod.js) when deploying for production.”メッセージが表示されます。 Vue2の場合 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>vueを使ってaxiosを学ぶ</title> </head> <body> <div id="app"> <h1>{{ message }}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script s
Why JavaScript Developers Should Prefer Axios Over Fetch
Photo by Brixiv from PexelsIn my previous article, “Deep Insights Into JavaScript’s Fetch API”, I discussed the basics of the Fetch API. But it’s worth acknowledging that fetch() isn’t consistently an ideal solution, and there are sometimes better…
axiosの使い方まとめ (GET/POST/例外処理)
最近何かとよく使うJavaScriptでAJAX通信を行うaxiosについて、簡単に使い方をまとめました。 スポンサーリンク GETリクエストをaxiosで送る まずはGETリクエストをaxiosで送る方法です。 const res = await axios.get('/users') console.log(res.data) 分割代入の記法を使うと、以下のようにも書けます const {data} = await axios.get('/users') console.log(data) クエリパラメータ (URLパラメータ)を指定 クエリパラメータを指定する方法は2つあります。 1つ目は、axios.getに指定するURLに直接記述する方法です。 axios.get('/user?id=123') 2つめは、axios.getの第2引数に、オプション指定する方法です。 axios.
JSer.info #612 - Deno 1.26がリリースされました。 Deno 1.26 Release Notes Cache APIのサポート、新しいパーミッションとして--allow-sysフラグが追加されています。 また、node_modulesディレクトリを扱う--node-modules-dirフラグの追加し、Node.jsとの互換モードであった--compatフラグを削除しています。 compat modeはnpm:識別子によって置き換えられた形になります。 またNode.jsコアモジュールへの互換性の改善、Deno.serve() APIなどパフォーマンス改善、TypeScrtipt 4.8へのアップデートなども含まれています。 HTTPクライアントライブラリのaxios v1.0.0がリリースされました。 Release v1.0.0 · axios/axios 複
経緯 Axiosに認証トークンを設定する処理を共通化したい 何ならAxiosを使用する際にトークン設定済みの状態にしたい 方法 Axiosのインスタンスを生成→ヘッダーの設定→そのインスタンスの返却、を行うラッパー?ソースファイルを用意する。 各ソースファイルでAxiosを使用したいときは、そのラッパーファイルから呼ぶようにする。 実装 ラッパーファイル（例：customAxios.ts） import axios from 'axios'; // Axios本体をインポート const instance = axios.create(); // Axiosインスタンスを生成 instance.interceptors.request.use( (config) => { // 認証トークンをヘッダーに付与 config.headers.common['Authorization'] =
fetchとaxiosはどちらも外部リソースを取得するためのライブラリーで非同期で動くためPromise型を返します。 似ているライブラリーですが、主に4つの違いがあるのでそれぞれを解説してきます。 インストール方法 HTTPメソッド通信 JSONデータの取得方法 エラーハンドリング 1.インストール方法 fetchはブラウザの標準ライブラリーでインストールせずに使うことができます。 一方、axiosはインストールが必要です。以下のコマンドで取り込むことができます。 yarn add axios npm install axios そして、モジュールのインポートも必要です。 import axios from "axios" 2.HTTPメソッド通信 HTTPメソッド通信毎の呼び出し方がfetchとaxiosで異なります。 fetchによるPOST通信 fetchでPOST通信を行う際は第
あの日見たaxiosの機能を僕達はまだ知らない。 2021.08.28 axiosは、JavaScriptにおけるHTTPクライアントのデファクトスタンダードといえるでしょう。 Promiseベースで非同期通信を行えるHTTPクライアントとして、ブラウザ標準のfatchやjQuery.ajaxなどがありますが、特にaxiosがよく使われているのには豊富なオプションや設定に理由付けられるでしょう。 axiosの機能について私のように詳しくなくても直感的にHTTPリクエストを送れるのも良い点の1つですが、せっかくなのでaxiosでどのようなことができるのがを見ていきましょう。 axiosは、JavaScript における HTTP クライアントのデファクトスタンダードといえるでしょう。 Promise ベースで非同期通信を行える HTTP クライアントとして、ブラウザ標準のfatchやjQue
[TypeScript] Axiosのtry/catchでの例外オブジェクトを型付けする | DevelopersIO
こんにちは、CX事業本部 IoT事業部の若槻です。 今回は、静的型付け言語TypeScriptでAxiosのtry/catchでの例外オブジェクトを型付けする方法を確認してみました。 Axiosのtry/catchでの例外オブジェクトで型エラーが発生する AxiosでAPIエンドポイントなどへリクエストをする際に、Try/Catch構文でエラーをキャッチしたら、ステータスコードなどに応じた処理を実装したい場合があります。 import Axios from 'axios'; export const useGetData = async () => { try { const response = await Axios.get(`path/to/data`, { headers: { 'Content-Type': 'application/json', }, }); return re
![[TypeScript] Axiosのtry/catchでの例外オブジェクトを型付けする | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3e248037db933d91fd7e8223803b92308f955d5/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F09%2Ftypescript.png)
はじめに JavaScript(Node.js)でHTTP通信をする上で便利なライブラリであるaxiosであるが、そのエラーハンドリングで躓いた。 また、axiosのエラーハンドリング（axios error handling）でググってもconsole.log()で出力させているようなものばかりで実際にプロダクトでは（個人開発のちょっとしたやつでも）使えなさそう1なものが多くヒットしたので、自身で開発する中で学んだ事を備忘録として残しておく。 ※中にはerror.resposeをすればよいというものもあり、その覚え方ではマズいのでそこもちゃんと整理したい。 ※axiosの関連ライブラリとして、request/responseのオブジェクトのキーのケース変換を行うライブラリを公開したので、そちらも見ていただけると嬉しいです。 axiosとは axiosの仕組みを少し見てみる事で、axios
【JS / TS】非同期通信（axios）ごとにtry~catchを実装したくない人のためのエラーハンドリング Tips💡
Nuxt.js製のアプリで利用しているaxios-moduleでリクエストのキャッシュをしたかったので、Axiosを拡張してそれをできるようにしてみました。 なお、今回試したソースコードの一式はこちらにあります。 https://github.com/shoito/try-axios-cache create-nuxt-appでベースとなるNuxt.jsアプリを作る ここではcreate-nuxt-appコマンドで、try-axios-cacheという名前のアプリを作ります。 $ npm i -g create-nuxt-app $ create-nuxt-app try-axios-cache ここで重要なのが、create-nuxt-appでNuxt.jsアプリの雛形を作る際に、モジュールの選択で Axios を選択することです。 $ create-nuxt-app try-axios
Vue.jsとAPIサーバとのaxiosでCORSに引っかかった時のProxyを使った回避方法 - Qiita
最初に 開発環境にて Vue.jsでバックエンドのAPIをaxiosで叩こうとした時、 Policyで引っかかってしまうことがあります。 Access to XMLHttpRequest at 'http://localhost:3000/api/test' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource
はじめに Nuxt.jsにてクライアントサイドのvueからサーバのREST APIを呼び出す際に、vue内のスクリプトにロジックを書くと、他の場所で流用できない。そのため、外部のjsに共通ロジックとしてサーバのAPIを呼び出す処理を記述したかったが、あまり良い例が無かったので、検討&実装してみた（正しいかは不明） Vuexストア内でaxiosを使ってサーバAPIを呼び出すみたなことをやってる人も居たけど、それはちょっと違うだろう（というか気持ち悪い）ということで、pluginsに共通ロジックを作成することにした。 構成 修正する対象は以下の3ファイル（pages/index.vue , plugins/axios.js , plugins/api.js） ROOT ├─.nuxt ├─assets ├─components ├─layouts ├─middleware ├─pages │
はじめに 検索キーワードからQiitaAPIを叩いて検索結果を一覧表示するアプリを作ってみた。 QiitaAPIで利用したものは、「投稿の一覧を作成日時の降順で取得できる」こちらのAPI /api/v2/items 使用技術 ざっくり Next.js TypeScript axios Tailwind CSS 一応このプロジェクトのソースコードっす!!↓↓ https://github.com/TomoyukiMatsuda/React-pra/tree/axios-qiitaapi/next-sample おまけ 後日、このアプリを拡張したものを作成しました。記事にもしていますのでよろしければこちらもご覧ください。 【React / TypeScript】Recoil での状態管理サンプルアプリ こんな感じのものを作りました フォームに検索ワードを入力して、検索キーワードに該当するQii
型を明確にしながらaxiosを使う - Qiita
この記事では、APIへの問い合わせ時にJSONの各項目の型を明確にしながらaxiosを利用してみます。 （get, postなどの基本的なメソッドに絞った内容です。） JSみたいに利用する JSと同じようにaxiosを利用すると、成功時のレスポンス・エラー時のレスポンスそれぞれがanyになります。 import axios from 'axios' axios.post( 'https://reqres.in/api/register', { email: 'eve.holt@reqres.in', password: 'pistol', } ) .then(res => { // res.dataはanyになる console.info('token: ' + res.data.token) }) .catch((e) => { if (e.response !== undefined)
Axiosは、JavaScript／TypeScriptで非同期API呼び出しを容易にするライブラリ。各種WebブラウザやNode.jsと組み合わせて使用する。 JavaScript／TypeScript、Node.jsでは、処理の完了を待つことなく、完了したときにコールバック関数を呼び出すようにする「非同期処理」を多用する。しかし、非同期処理は回数が多くなるとコードの入れ子が深くなり、混乱しやすい。また、処理完了の順序を事前に特定できないため、順不同でやって来る処理完了の知らせを適切に処理しなければならない。 これらの問題を解決するために、「Promise」という非同期処理の状態を監視するオブジェクトが導入されている。これを利用することで、非同期処理の記述はある程度容易になるが、まだ面倒は残る。 そこで、Promiseオブジェクトを強く意識することなく非同期処理を記述することを可能にした
あの日見たaxiosの機能を僕達はまだ知らない。
あの日見たaxiosの機能を僕達はまだ知らない。 2021.08.28 axiosは、JavaScriptにおけるHTTPクライアントのデファクトスタンダードといえるでしょう。 Promiseベースで非同期通信を行えるHTTPクライアントとして、ブラウザ標準のfatchやjQuery.ajaxなどがありますが、特にaxiosがよく使われているのには豊富なオプションや設定に理由付けられるでしょう。 axiosの機能について私のように詳しくなくても直感的にHTTPリクエストを送れるのも良い点の1つですが、せっかくなのでaxiosでどのようなことができるのがを見ていきましょう。 axiosは、JavaScript における HTTP クライアントのデファクトスタンダードといえるでしょう。 Promise ベースで非同期通信を行える HTTP クライアントとして、ブラウザ標準のfatchやjQue
Axios v0.25.0 で生じた breaking change の注意点 - 経験は何よりも饒舌
English version: Notes on the breaking change that occurred in Axios v0.25.0 - 経験は何よりも饒舌 2022年1月18日に Axios v0.25.0がリリースされました。 その中の breaking change の1つに Adding error handling when missing url があります。 これは、引数で指定するRequest ConfigのurlがFalsyである場合にErrorを返すという変更です。 バグやエラーの内容を明確にすることを目的に導入されましたが、Request ConfigのbaseURLを活用する際や、GraphQLにリクエストを送る際など、意図的にFalsyにしている場合があるというissueが立てられています。 Node14にアップグレードするために、同じリリース
本文書はJestとVue Test Utilを利用したVue.jsでのテストに関する2回目の記事で2回目となる今回はテスト入門者にとって少しわかりずらいStub(スタブ)やMock(モック)、Shallow Mountに注目して説明を行っています。 Stub, ShallowMountとMountの違いを説明した後にVue.jsのHTTPリクエストで頻繁に利用されるaxiosのMock(モック)の方法についても説明を行っています。コンポーネントの単体テストでは、axiosライブラリやfetch関数を利用した外部へのアクセスを伴う機能を実装している場合モックを利用することで外部へのアクセスを行うことなくコンポーネントのテストを実施することができます。 Vueでのテストを実施したまたは学習した経験がない人であれば先に前回公開した”【基本編】Jestを利用してVue コンポーネントをテストする方
Axios vs. fetch(): Which is best for making HTTP requests? - LogRocket Blog
LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns. Editor’s note: Updated on 29 January 2024 by Rosario De Chiara, this article now includes information about managing CORS errors and effectively handling responses in both Axios and fetch(). Is Axios better than fetch()? In my recent post “How to make HTTP requests like a pro with Axios,” I d
So I recently had to make some changes to a React code base that was fairly unfamiliar to me. My task was to make a PUT API request to an external endpoint, in order to update a user profile upon a certain state being toggled on. It seemed like an easy enough task as I knew I could just tap into the installed axios package to make API calls... until I opened up the code repo and saw abstraction up
ダウンロードの仕組みはブラウザにて実装状況が異なるようです。 File APIを使ったダウンロードの仕組みが有名ですが、 IEではwindow.URL.createObjectURL()を使用するとおかしくなるみたいです。 File APIのブラウザによる差を吸収してくれるfileSaverというライブラリがあるため、 そちらを使用するとIEでも問題なくダウンロードできるようになります。 fileSaver - GitHub ダウンロード処理の例 import { saveAs } from "file-saver"; import axios from "axios"; function download(params = {}){ axios.get(apiUrl, { params, responseType: "blob" }) .then(response => { const
こんにちは。エクセルソフトの田淵です。 この前は MySQL を使った DB のコンテナーを作りました。 CData API Server を使えばすぐに MySQL から API が作れるので、今度はその API にアクセスするフロントエンドを作ってみましょう。 ただ、私は Web フロントエンドには全く詳しくないので、Vuejs-jp が日本マイクロソフトが開催した de:code 2019 のイベントで公開してくれた Vue.js 初心者向けハンズオン – Visual Studio Code, TypeScript, Element 編 をベースにやっていきたいと思います。 またきちんと理解できていないので、メモ書きになってしまっている点はご容赦ください。 vue cli を使う Lab 0 – 開発環境の準備 そのままなのですが、 npm install -g @vue/cli
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
すぐにAPIを体験！public-apis 100以上のJavaScript axiosサンプル集
Axios 使うのやめたらビルドサイズが 10 KB 減って、なんか知らんがパフォーマンスも良くなった話
Project dead? · Issue #3930 · axios/axios
NuxtのSSRモードでメモリリーク？原因はaxios? - ANDPAD Tech Blog
Release v1.0.0 · axios/axios
Google、「Googleアシスタント」をLLMで強化へ──Axios報道
すぐにAPIを体験！public-apis 100以上のJavaScript axiosサンプル集
RESTfulな「axios-mock-server」の使い方 - Qiita
【Ajax】axiosを使って簡単にHTTP通信 | Will Style Inc.｜神戸にあるウェブ制作会社
2022-10-05のJS: Deno 1.26、axios v1.0.0、Optimize long tasks
Next.jsでトークン設定済みのAxiosを使えるようにしてみた - Qiita
Axios vs Fetch | Which is Best for Beginners?
【リソース取得APIの比較】fetchとaxiosの4つの相違点
あの日見たaxiosの機能を僕達はまだ知らない。
axiosのget,post,deleteメソッド - Qiita
axiosのerror handling - Qiita
Nuxt.jsで使うAxiosにリクエストのキャッシュ機能を組み込んでみる | DevelopersIO
Nuxt.jsのpluginsにaxiosの共通部品を実装する - Qiita
【React / TypeScript】axios と QiitaAPI を使ったサンプルアプリ - Qiita
JavaScript／TypeScriptの非同期処理に向けたライブラリ「Axios 1.0.0」が登場
Vue Test UtilsでStub(スタブ), axiosのMock(モック), ShallowMountを理解
Axios Wrappers in React Typescript
axiosでファイルダウンロード処理を実装(IEにも対応) - Qiita
vue.js と axios を使って Web API にアクセスする | エクセルソフト ブログ
lambamirstan.hatenablog.com
kininarubikenews.com
kininarubikenews.com
shintou.hatenablog.com
tomowo.hatenablog.jp
imakokowoikiru.hatenablog.com