以下のツイートを読んで気持ちが昂ったので。 みんな、もうSNSでいがみ合うのはやめよう。 平和に好きなJWTの話でもしようよ。 JWTの格納場所はlocalStorageとCookieのどっちが好き？— 徳丸 浩 (@ockeghem) 2022年2月11日 というのも、JWTをセッションに使うときに保存先含めて一時期悩んでいたので、その時の自分の解。 ただ、考えるたびに変化しているので、変わるのかもしれない。 要約 タイトル。 あとは優秀な方々が既に色々考えておられるのでそちらを読むとよいでしょう。 SPAセキュリティ入門～PHP Conference Japan 2021 JWT カテゴリーの記事一覧 - r-weblife どうしてリスクアセスメントせずに JWT をセッションに使っちゃうわけ？ - co3k.org JWT形式を採用したChatWorkのアクセストークンについて -

ウェブサイトの背景として使える編集可能なアニメーションをJavaScriptコードとして入手できるサイトが「Vanta.js」です。 Vanta.js - Animated 3D Backgrounds For Your Website https://www.vantajs.com/ Vanta.jsにアクセスすると以下の画面が表示されます。 「Vanta.js」という文字の背景に流れているアニメーションのコードが、画面右下の赤枠部分に表示されています。コードはそのままコピーが可能です。 右側のツールバーで、アニメーションの背景色やオブジェクトの動きなどが編集可能。編集に伴ってコードも変化します。 アニメーションのエフェクトは合計13種類から選択が可能。エフェクトを組み合わせることはできません。 エフェクトを変更している様子は以下の動画でも確認できます。 ウェブサイトの背景となるアニメー

はじめに 今どきのフロントエンドのトレンドを調べていたら、この記事に出会いました。 7 FrontEnd JavaScript Trends and Tools You Should Know for 2020 その中で、コンポーネント単位での共有ツールとしてBitが「今、アツい！」と紹介されており、前々から個人的に気になっていたのと、日本語の情報が少なかったので、公式ドキュメントにあるチュートリアルをやってみました。 ということで、この記事は以下のBit公式ドキュメントの翻訳記事です。 Bit for React - Bit よしなに意訳したり、重要そうな部分を太字にしたりしていますが、基本的に内容は変えていません。 少しでも、皆さんのBitの理解の助けになれば幸いです。 Bit for React 概要 Bitを使用すると、異なるプロジェクトやアプリケーション間でコンポーネントを共有お

SPAのログイン認証のベストプラクティスがわからなかったのでわりと網羅的に研究してみた〜JWT or Session どっち？〜JavaScriptRailsJWT認証React SPAのログイン周りについて、「これがベストプラクティスだ！」という情報があまり見当たらないので、様々な可能性を模索してみました。 いろいろな状況が想定され、今回記載する内容に考慮の漏れや不備などがありましたら是非コメントでご指摘いただきたいです！特に「おすすめ度：○」と記載しているものに対しての批判をどしどしお待ちしております！ この記事でおすすめしているものであっても、ご自身の責任で十分な検討・検証の上で選択されてください。 前提 想定しているAPIは、 ログイン外のAPIにはPOST/PUT/DELETEのものがなく、GETのみ GETのAPIにはDBを更新するなどの操作がない とし、そのためログイン外では

はじめに このページは、プロトアウトスタジオの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

スライド内の関連リンク * DiverseのPodcast https://podcast.diverse-inc.com/ * 採用ページ https://diverse-inc.co.jp/recruit/positions * 今回のサンプルGithub https://github.com/SAMUKEI/droidkaigi2019-sample-pwa * 今回のサンプル動画 https://youtu.be/ehW6397JceI * はじめてのプログレッシブ ウェブアプリ https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja * PWA Builder https://www.pwabuilder.com/ * How to Package Android https:

まだAPI定義管理で消耗してるの？〜Swaggerを用いた大規模アプリ時代のAPI定義管理とコードジェネレート〜 for DroidKaigi 2018

管理画面のフロントエンドコードを書く時代は終わりました。 Vironがあれば、OpenApi(Swagger)でAPI定義を行い、実装するだけで管理画面が完成します。 そしてこれはOSSです。誰でも自由にお使いいただけます。 概要 Vironは、複数の管理画面を管理できるよう設計された、管理ツールマネージメントコンソールです。 APIサーバーとOAS2.0 jsonファイルを作成するだけで、管理画面が一つ完成します。 経緯 私の会社では、大小さまざまな自社サービスが開発・運用されています。 管理画面をサービス・サイト毎に作っていましたが、それには限界がありました。 エンジニアからしたら、管理画面用のデザインやAPIを作らなきゃいけない。工数がかかる。 運用・プロデューサーは、UI・UXが管理画面で違うため、操作を覚えるという学習コストが高い。 さらに外から見たいときにスマホから見れないし、

なんだか珍しく、あおり気味のタイトルにしてしまいました。 最近読んだ以下の記事が大変おもしろかったので、今まで私の中で度々反芻していたものを文章としてまとめてみました。 gihyo.jp なぜ今GraphQLが騒がれているのか。ポストRESTが求められている理由、なぜポストRESTが求められなければいけないのか？　ポストRESTの登場によって私たちにとって何が嬉しくなるのか？　そのあたりを色々と触れていきたいと思います。 本文に入る前に ここでは、RESTと記載していものに、REST ful であることも含めています。RESTの推奨（規約ではない）に準拠して開発されたAPIをREST Fulと呼ぶのであって、そこにAPIとしての違いは無いためです。 どちらかと言えば、私の意識としてはパブリックなAPI、オープンデータ用のAPIであったり、KintoneやSANSAN、Salesforce、

どうも、まさとらん（@0310lan）です！ 今回は、基本的なJavaScriptプログラミングが出来るようになった人向けに、さらなるステップアップを目指せる「YouTubeチャンネル」を厳選してまとめてみました！ 海外のプログラミング系YouTube動画は、有料でもおかしくない「質」の高さと豊富なコンテンツ量に魅力があり、確実にレベルアップが期待できるのでぜひ参考にしてみてください。 ■JavaScriptの勘所を勉強できるYouTubeチャンネル！ 【 Fun Fun Function 】 プログラミング動画とは思えない超ハイテンションなノリで、JavaScriptを学ぶうえで欠かせない勘所を分かりやすく教えてくれるのがコチラのチャンネル！ 「Spotify」の開発にも携わっていたというプログラマーの彼は、得意のJavaScript言語を分かりやすく伝えることに情熱を注いでおり、それは

セクションナイン の 吉田真吾（@yoshidashingo）です。 昨今のサーバーレスアーキテクチャの実装パターンについて5つの分野でユースケースをまとめました。 実装方法はAWSがベースですが、クラウド各社のFaaSに大きな機能差はないので(そもそもシンプルなコンセプトなので)、FaaS単体よりも、連携可能な周辺サービスまで含めて自分のアプリケーションのユースケースに合っているかどうかが大事になってきます。また、そもそもいくつかの実装はPaaSのオプション機能として組み込まれている場合もあります。よって、この先連携先の機能強化などによってもっと多くのパターンが発見されることになると考えています。 【1】Webアプリケーション シングルページアプリケーション ex. Serverless Single Page Apps Web API REST API GraphQL 非同期Webジョ

最近公開されたGitHubのAPIは、GraphQLという形式に対応しました。今後はこちらが主流になっていくようで、既存のREST APIからGraphQLへのマイグレーションガイドも提供されています。 今回は、このGraphQLについて、実際にGitHubのAPIを叩きながらその仕組みを解説していきたいと思います。 GraphQLとは 歴史 GraphQLは、Facebookの中で2012年ごろから使われ始めたそうです。その後2015年のReact.js Confで紹介されたところ話題となり、同年"technical preview"のステータスでオープンソースとして公開されました。その後仕様が詰められ、2016年9月に晴れて"preview"を脱し公式実装として公開されました。これと同じタイミングで、GitHubからGraphQLバージョンのAPIが公開されています。 このあたりの経緯

スライダーやカルーセル、ナビゲーション、アニメーションを伴ったスクロールエフェクトなど、目的にあったJavaScriptのライブラリを探す時に役立つJavaScript専門の検索エンジンを紹介します。 人気はあるのか、アクティブなのか、リリースされてどのくらいなのか、といった情報も一覧できるので、かなり便利だと思います。

こんにちは。サーバーワークス こけし部 部長でCS課の坂本（@t_sakam）です。前回に続いて、Serverless Frameworkの話題です。 前回は、Serverless Frameworkのドキュメントに沿って、簡単に使い方を確かめてみました。今回は、API GatewayやDynamoDBをからめた使い方をみてみたいと思います。 Serverless Frameworkを使うと、設定ファイルのserverless.ymlに必要な設定を書いて「serverless deploy」とコマンドを打つだけで、必要なリソースの作成ができます。Lambdaファンクションのデプロイだけでなく、API GatewayとDynamoDBのリソース作成もServerless Frameworkでやってしまいましょう。 Serverless Frameworkのアップデート サービスの作成 必要な

Serverless Frameworkとは 最近巷で騒がれているサーバーレスなアーキテクチャを容易に作成、管理できる一般的なフレームワークというよりツールに近いもの。 Severless FrameworkのAWS環境においては、CloudFormation・Lambda・API Gateway・DynamoDB・S3・IAMなどのサービスを組み合わせてサーバーレスなアーキテクチャを管理・構成している。 今回は、Severless Frameworkを用いてLambda・API Gateway・DynamoDBのアーキテクチャで簡単なREST APIを実装する。 なお、本記事ではv1.0.xを対象としている。 v0.xと大きく構成・設定が変わっているので注意。 環境 今回はAWS上で、Severless Frameworkを用いて簡単なREST APIを作成する。 Severless F

CSSで面倒なコード、アニメーションやグラデーションやボックスシャドウなど、実装の結果を見ながら値を調整してコードを生成でき、HTML5の新要素やよく使うスニペット、FacebookのOGPやTwitterカードやmicrodataやMetaタグなどのコードを簡単に生成できるオンラインツールを紹介します。 コードごとに対応ブラウザも表示されるので、かなり便利です。

趣味で作ったwebサービスのリポジトリをgithubに公開して2ヶ月くらい フロントエンドのソースが雑だったので、リファクタリング中にした対応を紹介 前記事：Go + react + ansibleでサービスを作ってOSSにしてみた http://qiita.com/wheatandcat/items/66d72445ad0c5df2a8be github 記載している内容は、下記のリポジトリに取り込み済みの内容です。 うまく動かなかったら、こちらから動きを見てもらえたらと思います。 ■dotstamp_client https://github.com/wheatandcat/dotstamp_client flow javascriptでも型が使えるようになるライブラリ。 ファイル単位で実装していけるから、稼働中のプロジェクトでも柔軟に導入していけるのが魅力。 導入的にはファイルの頭に

って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C