[フロントエンド] axiosライブラリを使って、柔軟にHTTP通信を行う - YoheiM .NET
こんにちは、@yoheiMuneです。 大変久しぶりなブログの更新で少しドキドキです。今日はよくお世話になっているaxiosというHTTPクライアントのライブラリの使い方を、ブログに書きたいと思います。 目次 axiosとは axiosは、HTTP通信を簡単に行うことができるJavascriptライブラリです。本ブログのタイトルには「フロントエンド」と書きましたが、Node.JSでも利用できます。axiosの特徴して以下のような点が挙げられます。 axiosの特徴 XML HttpReqestを簡単に生成できる Promiseベースである カスタムヘッダーやBasic認証など、いろいろなオプションが手軽にできる インストールは簡単で、npm経由で導入できます。 $ npm install axios それでは、axiosの機能を具体的に見てみたいと思います。 axiosを使う ここからはa
![[フロントエンド] axiosライブラリを使って、柔軟にHTTP通信を行う - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f9b76452977ff947edf0d947fc311da5c8d49eb/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F514.jpg)
SCOUTER開発者ブログ
2024-09-10 テクノロジア魔法学校の体験談と評判 「テクノロジア魔法学校」というプログラミング教材をご存知ですか？ ホームページの広告などで一度は目にしたことがある人も多いのではないかと思いますが、ディズニーが提供する子供向けのプログラミング教材です。 今回は、この「テクノロジア魔法学校」の体験版を実際に体験してみての感想や、「テクノロジア魔法学校」がどのようなものか、その評判などを見ていきたいと思います。 テクノロジア魔法学校とは 料金 エント […] 2024-09-10 レンタルサーバー「クイッカ」の評判と使い勝手 レンタルサーバーとして有名なサーバーの一つに、「クイッカ」があります。 名前は聞いたことのある人も多いのではないかと思いますが、今回はこの「クイッカ」について、料金やスペック、評判などを見ていきたいと思います。 レンタルサーバー「クイッカ」の基本情報 レンタルサー
これだけ覚えるべきJSの基礎 · takahashiakira/tech_for_web Wiki · GitHub
Dismiss Document your code Every project on GitHub comes with a version-controlled wiki to give your documentation the high level of care it deserves. It’s easy to create well-maintained, Markdown or rich text documentation alongside your code. Sign up for free See pricing for teams and enterprises 「FEのためのJS基礎」シリーズについて 「JS基礎シリーズ」は、フロントエンドエンジニア向けのJavaScript（以下JS）の中でも、特に実践に必要となる情報のみを個人的にまとめたシリーズです。
2D 表現でベストパフォーマンスを目指すなら webGL するっきゃない - Qiita
はじめに タイトルにあんなことを書いてはいますが、これはとある案件で行ったことの忘備録的なものです。 別に webGL 宗教というわけでもなく、 これぐらいの表現をしたかったら webGL なんだな という感じで捉えて欲しい。 どんな案件だったか まずこの案件は初めは 3D の球体に地球のテクスチャを貼ってグリグリ動かしたい 球体状には幾つかのオブジェクトが置いてあってインタラクションできる 地球には近づいたり、遠くなったりする できれば、多くの端末で見せたい ( PC, SP <- これが重要 ) という案件でした。割と3Dとかではよく聞く感じの案件ですね(でもやるのは初めてだったので嬉しかった。) しかしクライアントさまからのご要望で仕様変更となりました。 3D は 重いから 2D にしよう ということでした。 すでにこちらも3Dに胸をウキウキさせて webGL Meet Up に行っ
jQueryよりスムーズ。アニメーションライブラリTweenMaxの基礎とデモ｜ツーブロッカ
jQuery無しでアニメーション。TweenMaxを使ってサイトをコーディング今更ですが、アニメーションライブラリ「TweenMax」を触ってみました。 かなり高度でスムーズなアニメーションが実装できますが、理屈はかんたんで、 少し理解するだけで、Webサイトで使われるような効果は実装できます。 TweenMaxを使ったアニメーションのデモ TweenMaxを使うメリットjQuery には豊富な機能が揃っているぶん、無駄なコードが多かったり、処理に時間がかかるなど昨今では気にかけるクリエイターが多いようです。 かんたんにアコーディオンを実装できるslideToggle();ですが、実際、スマートフォンで見たときにアニメーションがもたついたりする場合があります。 TweenMaxを開発？しているGSAPのサイトにアニメーションの比較があるのでよければ参考にしてみてください。なんとなーくjQu
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
簡単アニメーション！Pixi.jsを触ってみる！（1）テキストを動かしてみる - Qiita
簡単アニメーション！Pixi.jsを触ってみる！ 〜（1）テキストを動かしてみる〜 突然ですが、 Pixi.js を触ってみることにしました。 （前フリ無しw） Pixi.jsとは? Pixi.jsは、Goodboy Digital社が配布している2D描画用のjavascriptライブラリです。 下記サイトで配布されています。 MITライセンスに基づくオープンソースソフトウエアとして開発が進められています。 このライブラリを使って作ったアニメーションは、WebGLを自動的に使ってくれるようです。 （非対応のデバイスではCanvasを使う）。 難しそうなWebGLを覚えなくて使えるのはうれしいです。 pixi.jsのexampleページでデモが紹介されていますので、いくつか見てみましょう。(スクリーンショット画像クリックで本家pixijs.comサイトのexampleページに飛びます) Ex
転職会議の会員情報ページをReact化しました - LIVESENSE ENGINEER BLOG
はじめまして。16卒で入社したエンジニアの渡部です。 現在は転職会議のプロダクト開発グループに所属していて、最近は会員情報ページのフロントエンド開発を行っています。 今回はReact化にあたって直面した問題、それを解決するために採用・参考にした技術を幾つか紹介したいと思います。 コード例はTypeScriptで書いています。 目次 型を欲する声の高まり(TypeScript) action層の肥大化(redux-observable) formのvalidation(Computing Derived Data(reselect)) viewをシンプルに保つ(High Order Components) 型を欲する声の高まり(TypeScript) react-reduxで実装していると関数から関数へと値を引き回すので、型をつけて安心して実装したいという声がチーム内で高まってきました。 そ
[パフォーマンス] CSSとJSをLocalStorageにキャッシュして、2回目以降の表示をちょっとだけ速くしてみる - YoheiM .NET
[パフォーマンス] CSSとJSをLocalStorageにキャッシュして、2回目以降の表示をちょっとだけ速くしてみる こんにちは、@yoheiMuneです。 スマホで回線状況が悪い場合（3Gとか使う場合）に、表示遅いなぁーと思うこと多くないですか？ 今回は、スマホなどの回線が良くない端末で、Webの表示をより速くする方法として、CSSとJSのローカルストレージキャッシュで高速化する方法をブログに書きたいと思います。 CSSやJSは、expireヘッダが付いてキャッシュされてても初期表示の時間を遅延させる？ iPhoneなどのスマホを使っていると、CSSやJSのキャッシュ機能を有効にしても、初期表示までに時間がかかってしまうことがあります。ブラウザがキャッシュを勝手にFIFOのルールなどで消しちゃうとか。 以下の画像は、iPhone5でiOS6でSoftbankの3G回線を使った際に、とあ
![[パフォーマンス] CSSとJSをLocalStorageにキャッシュして、2回目以降の表示をちょっとだけ速くしてみる - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/1962e885cca00fc224f634feab56e3ecfce6b1cd/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F260.jpg)
「いつか勉強する」を実現できたことありますか？現役エンジニアがやっている勉強法10 - paiza times
Photo by UBC Learning Commons こんにちは。谷口です。 自分以外のエンジニアを見ていて、「どうしてこんなことまで知っているんだろう？」「何でここまでできちゃうんだろう？」と思うことはありませんか？ デキるエンジニアたちは、やはり裏でいろいろな勉強をしています。とはいえ、誰もが業務後や休みの日に何時間も難しい勉強をしている…というわけではありません。 結論から言うと、彼らは情報収集やインプットなどに関して、普段の生活の中で効率よく学べる仕組みを作っているため、無理のない勉強とスキルアップができているのです。 では、具体的にどんな勉強法を実施しているのか？ 今回は、弊社でpaizaを作っているエンジニアたち（記事公開当時）に比較的簡単に習慣化しやすい学習方法を聞いてきましたので、ご紹介いたします。 「なかなか勉強のための時間が作れない」「どういうステップで勉強したら
【Node.js7.5対応】gulp.js/Gruntを卒業すべき3つの理由とgulp非依存の本格タスクランナーの作り方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
突然ですが、皆さんのgulp.js(gulp)タスク、依存関係が複雑になりすぎて、こんな風になってませんか？ “a gulpfile” #jsart pic.twitter.com/Uj3dXoDXQm — Victor Savkin (@victorsavkin) 2016年8月12日 gulpやGruntを使って開発していると、 やれ「Node.js(Node)のバージョンが違っていて動かない」、やれ「エラーログがぐちゃぐちゃで追えない」など、様々なトラブルに遭遇しますよね。 もちろん、Node や依存モジュールのバージョンを固定したり、ドキュメントをしっかり作るなどすればこれらのエラーに遭遇する可能性は下がりますが、できれば異常系の処理をするより、新機能の開発をしていたいのが人情ってものです。 今回はそんな方が gulp.js やGrunt に頼らずに、Sassのビルドを監視して自動
フロントエンド知らない私のwebpack入門 その1 - Qiita
jQuery 1.7 あたりで知識が止まっている、最近のフロントエンド開発を知らない私が入門しています、という記事です。 なんか長くなったし、気力も持たないので、その1ということで書いています。 webpackってなあに？ npm経由で入るアセットバンドラー (asset bundler)です。Webフロントエンド開発用のビルドツールです。 SPAなどを作る時、 HTML・JS・CSS・画像やウェブフォントなど一連のリソースをまとめてくっつけたり、 くっつけられるように加工したり、 JSをbabelで古いブラウザ向けに変換したり、 TypeScriptやらをJSに変換したり、 全部面倒見てくれます。 ただwebpackに上記の機能を全て内蔵しているわけもなく、プラグインやローダーとかいった追加の機能をプロジェクトにインストールして設定することにより利用できるようになります。 最近のフロント
JavascriptのSPA(Single Page Application)フレームワークの使いどころ（jQueryとの比較） - Qiita
JavascriptのSPA(Single Page Application)フレームワークの使いどころ（jQueryとの比較）JavaScriptjQuerySPA ※ 本投稿はフロントサイドの開発をJavascriptで行うことを前提に書いていますが、そもそも、フロントサイドでどこまでJavascriptにすべきかについて私的な見解を以下に書きました。(2017.5.10) ▶ Webシステムのフロントサイドとサーバサイドの比率（JavascriptのSPAを利用する理由） ■ どこで使うのか？jQueryだけで十分か？ SPAフレームワークの導入を検討する際に、「jQueryでも十分」といえるケースはよくあると思う。 そこで、jQueryとSPAフレームワークを比較して、本当にSPAフレームワークを使う場面はどういうところかを考えてみる。 ただ、結論を先に書けば、規模や新規に作るのか
React 初心者が躓いたところまとめ - Qiita
今年初めて実務案件で React を使用したのですが、その際に躓いたポイントをまとめていきます。 ちなみに、実務で使った開発環境は 言語: JavaScript(ES2015) ビルド: Webpack, Babel(es2015, react, stage-0) というかんじです。 全般 React Developer Tools Facebook 公式による Chrome 拡張です。 現状の state の確認/書き換えとかが出来て捗ります。 key 箇条書きリストの生成などで、 array.map して要素を出力したいときがあると思います。 その際に key を設定してないと、 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of
石器時代みたいなWebアプリ開発をしていたエンジニアがReact.jsに導かれて2016年にやってきた話 - Sanwa Systems Tech Blog
はじめに 社内向けのシンプルなWebアプリケーションを作成することになりました。 求められているものはサービスそのものであり、実装方式については全て自分で決めていいわけですが、この際なので2016年のモダンな開発方法で書こうと思い立ちました。そこでReact.jsを採用します。今回の記事はその日記のようなものです。 はじめに この記事のまとめ まずReact.jsについて React.jsってなに DOM 一方通行 JSX JSX→JavaScriptの変換をしたい ここでちょっとnpmについて インストール プロジェクト作成 パッケージ取得・インストール Babel導入 ES2015? ES2016??? gulp導入 試しに使ってみる gulp + Babel ファイル監視 Browserify 古き良き時代 Node.jsではどうやっているか そこでBrowserify 例1 例2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Vue.js]イベントハンドリングのおさらい - atuweb 開発ブログ![[Vue.js]イベントハンドリングのおさらい - atuweb 開発ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8c9f01ae438463c4cc5c07978089ee6e41b3e421/height=288;version=1;width=512/https%3A%2F%2Fatuweb.info%2Fimages%2Feyecatches%2Fvuejs_lg.png)
やわらかVue.js
parallax
The Great Fall
React.js・ReactNative・Redux入門
