このツイートを見て、「アプリで再ログインを頻繁要求されるってユーザビリティ良くないな。」と思ったのですが、普段裏側の仕組みは意識していなかったりテックリードの方に任せきりだったりしていたので、これを機に調べてみました。 そもそもスマホアプリ の時代、もはやauthenticationですらないと思うのよね。（何を言ってるかわからねえだろうと思うが。） — Hiromitsu Takagi (@HiromitsuTakagi) 2019年7月8日 この記事は「アプリでログインしっぱなしは、どのように実現されるの？」という疑問と調べた結果を共有するために書いていきます。 間違いや「もっとこんな仕組みが使われてるよ！」等のツッコミがあれば、どしどし貰えると助かります！ 疑問1. アクセストークンという仕組みとは？ 「なぜアクセストークンという概念が必要なのか？」 モバイルアプリでユーザー認証をし

Published on July 28, 2020 Stefan on Mastodon Reading time: 10 minutes More on TypeScript, React, Preact This list is a collection of component patterns for React when working with TypeScript. See them as an extension to the TypeScript + React Guide that deals with overall concepts and types. This list has been heavily inspired by chantastic’s original React patterns list. Contrary to chantastic’s

JS完全に理解した……（し て ま せ ん） 見出しはエンジニア界隈でお馴染みのダニング=クルーガー曲線のアレでございます。2020年6月に出たばかりの最新のJS本を読んだので書評です。 570ページ余りの分厚さで電子版もあり。著者はECMAScriptの仕様にも関わっているazuさん、Angular日本ユーザー会代表のSuguru Inatomiさんと強力な布陣。ES2015(ES6)以降も進化を続けるJavaScriptについて、完全にES6をベースにしたモダンな入門書となっています。 コンテンツはGitHubで管理されてオープンソースとして執筆され、様々な人がコントリビュートした結果が反映される面白い作り方になっています。Web版もすべて無料で参照できるのですが、こういう体系的な情報はまとまった本で学ぶことにしているので電子版で読みました。 僕も2017-2018年ごろに掛けてJS＆

Auth0 は認証・認可サービスをクラウドで提供している SaaS ベンダーです。 「認証」という機能はどのアプリケーションにも求められる重要な要件ですが、プロダクトの本質的なビジネス価値を持たない場合が多いでしょう。Auth0 を使用することで、この「認証」機能という Undifferentiated Heavy Lifting な作業を排除できます。 本記事では、簡単な React アプリケーションを作成して Auth0 を使用した認証機能を実装します。また、作成したアプリケーションを Vercel（旧 Zeit now）にデプロイする方法を解説します。ユーザのサインアップ後の確認メールなどは SendGrid から送信されます。 以下は、本記事で紹介するアプリケーションの簡単な構成図です。また、本記事で実装されたアプリケーションは Vercel にデプロイしています。こちらからアクセ

もう7年前になりますが、DeNA創業者の南場智子さんが講演で話された内容がとても良くて、いまでもたまにそのときのメモを読み返します。 2013年7月に日経新聞主催で開催された「グローバル・ウーマン・リーダーズ・サミット」での特別講演。「他人とか自分のことをあまり意識せず、コトに向かうように」というメッセージでした。 聞きながら取ったメモから、ここに再構成してみます。 南場：南場です。私あの、今日すごいアウェイ感を感じてまして。女性であるとか、男と女という枠組みで物事を捉えることが、すごく苦手というか、好きではなくて。 それで会社を起業したものですから、我が社の知名度が上がると、よく海外から「もすとぱわふるうーまんず、なんとか」に出てくれとかですね。そういう言葉を聞いただけで、クラクラと目眩がする感じです。 それで今日なんでここにいるのかなっていうと、日経さんで本を出しまして、お世話になっち

はじめに みなさん、GitHub に草を生やしていますか。 それ自体が絶対的な尺度ではないとはいえ、GitHub の芝生が緑で埋まっている人を見ると、多少は「がんばっている人なんだなあ」という印象を抱くのではないでしょうか。 ところで、毎日のように commit していても、芝生が緑にならない人たちもいます。それは、プライベートリポジトリにばかり貢献している人です。 当然といえば当然ですが、プライベートリポジトリへの貢献は、そのリポジトリが見えない人からは、芝生へは反映されていないように見えます。 なので、会社や研究でプライベートリポジトリを使っているという人は、自分や同僚からは芝生が緑で埋まって見えますが、それ以外の人からは真っ白に見える、という現象が発生していました。 自分から見た草原 他人から見た草原 解決策 あまり知られていませんが、この問題には解決策が存在します。 昨日(執筆日の

Reactアプリを作成 Material-UIで管理画面を作るためのベースとなるReactアプリを作成します。 Create React App Create React Appで新しいReactアプリを作成します。 npx create-react-app react-material-ui-sample --typescript プロジェクトのディレクトリへ移動して実行します。 cd react-material-ui-sample npm start ブラウザにReactアプリが表示されます。 ディレクトリ構成 ディレクトリはあまりネストさせすぎずシンプルな構造にしました。コンポーネントの分け方はAtomic Designを参考にしています。 src/ ├ components/ │　└ atoms/ # 原子（個々のパーツ） │　└ molecules/ # 分子（原子の集合体）

clean_architecture.md 2020/5/31追記: 自分用のメモに書いていたつもりだったのですが、たくさんのスターを頂けてとても嬉しいです。 と同時に、書きかけで中途半端な状態のドキュメントをご覧いただくことになっており、大変心苦しく思っています。 このドキュメントを完成させるために、今後以下のような更新を予定しています。 TODO部分を埋める 書籍を基にした理論・原則パートと、実装例パートを分割 現在は4層のレイヤそれぞれごとに原則の確認→実装時の課題リスト→実装例という構成ですが、同じリポジトリへの言及箇所がバラバラになってしまう問題がありました。更新後は、実装時の課題リストを全て洗い出した後にまとめて実装を確認する構成とする予定です。 2021/1/22追記: パートの分割と、クリーンアーキテクチャという概念の定義について追記を行いました。大部分の実装例パートを中心

最近何かと騒がしいクリーンアーキテクチャですが、丁度プロダクトで採用したところだったので折角なので情報共有ということで Qiita の初記事にしてみようと思います。 こちらの記事は GUI や CUI のアプリケーションを対象にしています。 Java コードの記事リンク：https://nrslib.com/clean-architecture-with-java/?preview_id=1263&preview_nonce=542ba7b70f&_thumbnail_id=1293&preview=true その他解説もしています。もしよろしければチャンネル登録をお願いいたします。 より実践的なコード（WEBアプリケーション）: https://github.com/nrslib/itddd/tree/master/CleanLike YouTube での解説（WEBアプリケーション）：

【CICD2021】デプロイメントパイプラインの原理原則を再確認する / Confirm Deployment Pipeline Principle

追記 2022/11/12 追記 この記事読んで、DI 便利だなって思ったらこちらも併せて読んでみてください。クリーンアーキテクチャーの開設の中で依存性逆転の説明が出てきます。難しいかもしれませんが、一度理解すればつぶしが効く考え方なので腰を据えて読んでみてください。 本文 ここでは、最近のそこそこの規模のアプリだと大体使われてる（と私は思ってる）Dependency Injection（DI）について、何故使ってるのか？というのを私の理解で書いていきたいと思います。 今回の対象言語は C# ですが、DI 使ってる言語であれば大体同じ事情なのかなと思います。 単体テストしたいよね アプリケーションを作るとうまく動いているかテストをすると思います。 たとえ、そのアプリがハローワールドだとしても動かして目視で確認してると思います。 もうちょっとアプリの規模が大きくなってくるとクラス単位やクラス

TypeScriptは、JavaScriptでも大規模なアプリケーションを開発しやすくすることを目的に開発されたプログラミング言語です。 確かにJavaScriptは元々、大規模な開発を想定した設計ではありませんでした。それでも、JavaScript自体が進化して、大規模開発に対応してゆけば良かったはずです。しかし、実際はそううまくは行きませんでした。代わりに、大規模開発の一部はTypeScriptが引き受けることになったのです。 なぜ、そうなったのでしょうか？その答えはJavaScriptの歴史にあります。TypeScriptが必要な発明で、そして、今もなお必要とされている理由が見えてきます。それでは、TypeScript誕生以前の歴史をひも解いていきましょう。 1990年代​JavaScriptの誕生​JavaScript誕生以前は、簡単なフォームのバリデーションをするのも、サーバーサ

AWS CloudFormationのテンプレート、長！となったのは私だけでしょうか。同志の皆さん、一緒にテンプレートを少しずつ確認して、テンプレート職人を目指しましょう。こちらを読む際、是非テンプレートも横に開きながら、読んでみてくださいね！ みなさんどうも、新卒エンジニアのたいがーです。 今年も半年が過ぎましたね。早いものです。 それぞれのリソースの立ち上げはマネジメントコンソールやAWS CLIでやってみたけど、そろそろInfrastructure as Codeを触ってみたい!!Cloud Formationを使ってみよう!!という気持ちになっていらっしゃる方はいませんか？ 私です。 しかし、実際のAWS CloudFormatinのテンプレートを見てみるも、長いな…どこから始めたらいいんだ…となってしまった方はいませんか？ そうです、私です。 そんな今回は、CloudFormat

はじめに 僕は仕事でRuby on Railsを使ってWebアプリケーションを開発しているので、JavaScriptはそれなりに使えます。 ですが、サーバーサイドで使っているRubyに比べると、JavaScriptの習熟度はそれほど高くありません。 とくに、文法が一気にブラッシュアップされたES2015（ES6）以降の知識は「なんとなく把握はしているが、あくまでなんとなく」といった感じです。 また、最近よく名前を聞くようになったTypeScriptも「名前は知っているが使ったことはない」というのが現状です。 というわけで、「そろそろちゃんと勉強しておかないと」という思いから、以下の本を購入してみました。 JavaScript Primer　迷わないための入門書 (アスキードワンゴ) 作者:azu,Suguru Inatomi発売日: 2020/06/10メディア: Kindle版プログラミ

書籍『はじめてのフロントエンド開発』が2018年5月9日に技術評論社さまより刊行されております。 執筆プロジェクトでは React のパートを担当させていただいたのですが、執筆にあたり作成した React Component ライフサイクル に関する図 をこのたび CC0 ライセンスで公開しました。 https://github.com/iktakahiro/react-component-lifecycle-diagram React Component ライフサイクルに関する図 .ai および .svg フォーマットも取り揃えておりますのでどうぞご活用ください。 ところでお気づきの方もいらっしゃると思いますが、書籍執筆時点では React v16.3 のリリース前であったため、上記のダイアグラムも v16.3 で追加されたライフサイクルについての情報が盛り込まれていません。 更新版を作

はじめまして！WEBチームの黒川と申します！昨年7月にaptpodに入りましてもうすぐaptpod歴1年になります！ aptpodでは主にフロントエンドエンジニアとしてReact/TypeScriptを用いて、お客様向けアプリケーションのUI部分を実装しております。 ご存じの方も多いように、Reactの状態管理にはいくつか方法があり、何を用いるべきかなどでしばしば議論が起こりがちです。代表的なものだけでも、標準APIを用いるuseStateとContextやデファクトスタンダードとなってきているRedux、そして新興のRecoilがあります。 弊社のWEBチームではReduxを採用するケースが多いです。私もReduxについては一通りの知識と経験は持っていたつもりだったのですが、先日担当させていただいたプロジェクトで初めてReduxの設計に取り組んだところ、自分がReduxの思想や勘所につい

EventEmitter とか外部の UI ライブラリ辺りが定番かと思う（カルーセルやスライダーのライブラリを自分でコンポーネントにラップした経験は数しれず）。 最近の JS では pure object + 純粋関数という #設計 を取るケースも増えたが、たとえば DOM API に対して副作用を起こすミュータブルな処理はクラスで書いたほうが自然なことも多い（ライブラリが new Slider のような形式を取るのもそれが理由だろう）。

この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいながら行い、意訳が出来ていない部分が多々あるかと思いますので修正依頼を出して頂けると幸いです！ Twitterでも、フロントエンドに関する事や、アメリカでのエンジニア経験に関してツイートしているので、よかったらフォローお願いします。 Twitter: @hellokenta_ja 下記から本文です。 Complete Guide to React Rendering Behavior この記事は、Reactレンダリングがどのように振る舞うか、Co

Ansibleトレイルマップは、Ansibleを学習し活用する過程を旅になぞらえてお伝えする手引書です。道に迷うことなく歩みを進め、Ansibleの世界を満喫しつつ経験を積み、楽しみながら自らの糧にできることを目指しています。 IT運営の自動化は、 ITが生まれた時から多くのエンジニアの悩みの種でした。これからも悩みの種であり続けるでしょう。Ansibleは、技術的な創意工夫が必要な領域を少なくし、誰もが複雑なデプロイを簡単に扱えるようにするために生まれました。そして、開発や運用、サーバやネットワークといったチーム横断の自動化パイプラインの共通言語となり、お互いが協力し改善するための基礎となります。 Ansibleの初学者の皆さん、Ansibleを共通言語として組織に浸透させたいTechリードの皆さん、自動化を次の段階に進めたいと考えているチームリーダーの皆さん、自動化の旅をAnsible

お詫びと訂正 おまけ２ の内容に関して誤りの情報を記載していたので、修正いたしました。(2020/6/6 22:55) またコメントで大変丁寧にご指摘&アドバイスをくださった@souchi00さん、ありがとうございます🙇‍♂️ 追記(コンテナについて)(2020/6/8 11:10) @inductorさんがコンテナに関するわかりやすい資料を紹介してくださいました！ https://www.slideshare.net/zembutsu/what-isdockerdoing コンテナについてより詳細を知りたい方は是非ご覧になってください ###　追追記(2020/6/8 12:30) 本記事で何点か誤った表記があったので、コメントで指摘くださった方々のアドバイスの元修正しております。(本文中でも修正しておりますが、コメント欄を見ていただければより詳細がわかると思います。) 以後このような