JavaScriptチュートリアルBeginner's tutorialsYour first website: Adding interactivityDynamic scripting with JavaScriptJavaScript frameworks and librariesJavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子Numbers and stringsRepresenting dates & times正規表現インデックス付きコレクションキー付きコレクションオブジェクトを利用するUsing classesプロミスの使用JavaScript 型付き配列イテレーターとジェネレーターInternationalizationメタプログラミングJavaScript モジュール中級編Advanced JavaScript o
さてさて、ここのところLaravelをメインとした記事ばかり書いていたのですが、せっかく少し前に新バージョンの3がリリースされたので、Vue.jsがメインの記事も書いてみたくなりました。 というのも、とある方から「こんな機能をつくってみたい」というお話をしていただき、私も「それは面白そう」と感じたからなんですね。(アイデア、ありがとうございます❗) そして、その機能とは・・・・・・ ページ内検索🔎 機能です。 もしかすると、「いや、ページ内検索なら Ctrl + f でいけるじゃん❗」とおっしゃるかもしれません。 そのとおりなんですです! でも、この機能すごく便利なのに知らない人が結構多かったりするんですよね。 ※ もし知らない人は、ぜひ一度以下の手順で試してみてください。 Ctrl を押しながら f を押す(mac の場合は command を押しながら f) 検索ボックスが表示される
今回はJavaScriptのFetchAPIとHTTP通信のライブラリであるaxiosの違いについて解説します。 「fetchAPIとaxiosってやってること同じ...?何が違うの?」という疑問から色々調べてみたのでまとめてみました。 なお、基本構文や根底にある非同期通信、Promise自体の解説は割愛します。 FetchAPIとは まずイメージを掴むために、Fetchの語源から確認してみます。 フェッチとは、取りに行く、取ってくる、持ってくる、などの意味を持つ英単語。ITの分野では機器やプログラムなどが特定の場所からデータなどを読み出す動作のことを指すことが多い。 (フェッチとは - IT用語辞典 より) プログラミングではAPIサーバーなどからデータを持ってくる、取ってくるという意味でfetchという単語がよく使われていますね。 次にFetchAPIに関して確認してみましょう。 Fe
axiosを利用したHTTPリクエストの実装方法を確認します。「get, post, put, deleteメソッドの実装方法」「interceptorsを利用した前処理・後処理の共通化」など取り上げています。 (TypeScriptで実装しています。) axiosについて axiosはBrowser・Node.jsの両方で利用可能なPromiseベースのHTTPクライアントです。 Browserでは XMLHttpRequest でリクエストします。 Node.jsでは HTTPモジュール でリクエストします。 インストール axios をインストールします。
最近モダンな開発であるSPA(Vus.js/Nuxt.js/AngularJS)を構築したときにREST APIを作って通信したい でもajax(jQuery)は使いたくない、そんなときに便利なaxios(アクシオス)の紹介をしていきます。 この記事の目次 前提 axiosをインストールしよう axiosのドキュメント axiosの使用例 前提 axiosとは axios(アクシオス)は「ブラウザとnode.jsのためのPromiseベースのHTTPクライアント」です。 ES6 Promiseに対応しており同期通信・非同期通信どちらにも対応しています。 Promise インターフェイスは作成時点では分からなくてもよい値へのプロキシです。Promiseを用いることで、非同期アクションの成功や失敗に対するハンドラを関連付けることができます。これにより、非同期メソッドは、最終的な値を返すのではな
Convert JSON into gorgeous, typesafe code in any language. Generate models and serializers from JSON, schema, and GraphQL for working with data quickly & safely in any programming language. Generate Code Now { "people": [ { "name": "Atticus", "high score": 100 }, { "name": "Cleo", "high score": 900 }, { "name": "Orly" }, { "name": "Jasper" } ] }Provide sample JSON files, URLs, JSON schemas, or Gra
Vue.js 3.0が正式にリリースされましたね! 早速インストールしてvue-cliで動かして見ましたが、 あれ…Vue.js devtoolsが使えない… 「Vue.js not detected」と表示され、いつものVueのタブもない… 環境 解決法 先に結論 ①Vue.js devtools 6.0.0 beta2をChromeに追加 ②ベータ版を有効化する ③既存のdev toolsを無効化する 経緯 同じ悩みを持った人のIssueによると、 どうやら正式にリリースされているdevtoolsはまだVue3.0には対応していないみたいです。 「開発中だから次のリリースを待ってね」とのこと。 しかし下にスクロールしていくと解決法がありました!!! やり方 Issueを読み進めていくと、ベータ版ならできたよと報告している人を発見。 ベータ版を追加する ベータ版の拡張機能ページはこちら
Seamless Java in JavaScript applications that tightly optimizes with Closure Compiler J2CL is a powerful, simple and lightweight transpiler from Java to Closure style JavaScript. Get the best out of Java and JavaScript. You no longer need to choose between the two or lock into a specific framework or a language. Choose the right language at the right place and hire the best talent for the job. Get
気付いたらはてなブックマークのタグの数がとんでもないことになってました。 よくよく見ると同じ意味なのに日本語表記と英語表記の違いだったり、 言い方が違うだけで同じ意味のものが多数ありました。 そのような煩雑してしまったタグも編集することでまとめられます。 タグの編集方法 自分のはてなブックマークページを開きます。 http://b.hatena.ne.jp/ユーザー名 右のタグ一覧から、編集したいタグをクリック。 ここでは”ビジネス”を選択。 “ビジネス”タグのブックマーク一覧が表示されます。 右側に表示されている”ビジネスを編集”をクリック。 置換えたいタグ名を入力して”置換する”をクリック。 ここでは”business”としました。 以上の手順で意味の重複するタグをまとめることができます。 同様の方法でタグの削除もできます。 そのタグに関連するブックマーク数が多いと処理に大分時間がかか
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018. Learn moreSee full compatibilityReport feedback finally() は Promise のメソッドで、プロミスが決定したとき(履行されたか拒否されたかのどちらか)に呼び出される関数を準備します。直ちに同等の Promise オブジェクトを返すため、プロミスの他のメソッドを連鎖呼び出しすることができます。 これによって、プロミスの then() ハンドラーと catch() ハンドラーでコードが重複することを避けることができます。
Chrome開発者ツールのNetworkで確認すると、確かに2回POSTしている……(片方はきちんとデータ送信できて200が返答、もう片方はブランクデータとしてサーバサイドで設定しているエラーが返ってくる) 下記のようなコードでVue.jsからaxiosでPOSTのメソッドを処理しているのですが、なぜか2回POSTが走ってしまうという謎現象が発生しています。 <template> <form @submit.prevent="send"> <!-- フォーム部分略 --> <div class="form-group row"> <div class="offset-sm-2 col-sm-10"> <button type="submit" class="btn btn-primary"><i class="fas fa-fw fa-paper-plane" aria-hidden="t
OpenAPI Generator + TypeScript で始める自動生成の型に守られた豊かなクライアント生活2020.02.29 OpenAPIをドキュメントだけでなく、Schema firstな開発に利用しようということで、TypeScript + OpenAPI Generatorでフロントエンドの開発をしました。 Vue, Nuxtで使う際の例と共にその内容を紹介します。 目次OpenAPIでドキュメントを書くメリットなどOpenAPI GeneratorでClient情報を吐き出すVue, Nuxtで利用するAPIの変更に追従しやすく、型もあるし幸せOpenAPIでドキュメントを書くメリットなど弊社では以下のブログでも書いているように、API仕様のドキュメント化にOpenAPIを活用しています。 committee×OpenAPI×RailsでスキーマファーストなAPI開発O
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く