Stripeから提供されているCLIツールのインストール方法や使い方について紹介します。 JP_Stripesなどのコミュニティイベントで紹介する内容を本としてまとめたものですので、本編については無料公開としています。 有料部分には個人的に使っているTipsのようなものを載せていますので、興味がある方はあわせてご覧ください。 ## 紹介しているCLI version v1.7.9 ## 前提としている環境 macOS / zsh
![【本編無料】Stripe CLIの本](https://cdn-ak-scissors.b.st-hatena.com/image/square/b46119f1490289e6970bfc78a9d65ab52e4a09d1/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--fEwJJYz7--%2Fg_center%252Ch_280%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYm9va19jb3Zlci9lNGQ5ODUxZDM3LmpwZw%3D%3D%252Cw_200%2Fv1627283836%2Fdefault%2Fog-base-book_yz4z02.jpg)
React 18はReactの次期メジャーバージョンで、2021年の6月にalpha版が、11月にbeta版が出ました。また、Next.js 12でもReact 18のサポートが実験的機能として追加されました。React 18の足音がだんだんと我々に近づき、アーリーアダプターではない皆さんの視界にもいよいよReact 18が入ってきたところです。 特に、React 18ではServer-Side Rendering (SSR) のストリーミングサポートが追加されます。現在ReactでSSRを行いたい人の強い味方としてNext.jsが存在しているわけですが、Next.js 12でもReact 18を通してストリーミングの恩恵を受けることができます(Next.jsではSSR Streamingと呼んでいるようです)。また、厳密にはReact 18とは別ですが、React Server Comp
日頃書いているJavaScriptをもっと短く書く方法を知っていますか? 目からうろこ、すぐに使えるJavaScriptのショードハンドを紹介します。 JavaScriptを使うすべての開発者に向けて、私が長年かけて身につけたJavaScriptのショートハンド(短縮記法)を資料にしました。コードの違いが分かるように通常の記述方法も併記しました。 1.三項演算子 if-else文を1行に収めた短縮記法です。 通常const x = 20; let answer; if (x > 10) { answer = 'is greater'; } else { answer = 'is lesser'; } ショートハンドconst answer = x > 10 ? 'is greater' : 'is lesser'; 従来のif文を1行に収めることも可能です。 const big = x >
aspect-ratioを利用しない場合は、以下のように、beforeにpadding-top: 56.25%;を指定し、親や子の要素にpositionを設定するという面倒な対応をしないといけない .parent { position: relative; width: 100%; &:before { content: ''; display: block; padding-top: 56.25%; /* 16 : 9 */ } .child { position: absolute; top: 0; left: 0; } } min(), max(), clamp() 便利css関数 例えば以下のようなコードをminを利用すると1行で置換可能 追記:minとmaxの認識が逆になっていました。。申し訳ありません。 ↓この様な認識が正しいですね。 min('基本幅', '最大幅') max
これまでいろんな現場でWebフロントエンド開発をしてきて、メンテナンスしやすく効率の高いWebフロントエンド開発をする上で重要になる考えが自分なりにまとまってきたので記事にしてみます。 Worse is Betterという考え方 自分が見てきた中でWebフロントエンドの開発効率が落ちてしまう一番の要因は、きれいで理論的には優れているアーキテクチャを構築しようとしてそれ自体がもたらす複雑性を支えきれないというパターンです。 少し前にフロントエンドにClean Architecture(以下CA、あの同心円の図を指すのは誤用に近いですがここではそれに乗ります)を導入する記事が流行ったと思いますがあんな感じです。ああいったクラスベースでDIが重要となる設計手法はサーバーサイドのJavaでSpringを使うのとは違ってReactがサポートしているものではないため、CAの実現自体に高い設計スキルが必
Reactを使っていると、ふと再レンダリングが気になることがあります。 そこでReactの公式サイトやインターネットを見るわけですが、多く場合useCallbackとReact.memoを使えという旨の記事が確認できると思います👀 それはわかったとして、どういう戦略でこれらを使い不要な再レンダリングを防ぐべきかという考え方についてはあまり載っていなかった気がするので、せっかくなのでまとめておきます。 ところでどうすると再レンダリングを抑止できるか Reactはstateが変わった時、その状態によって必要な箇所を再レンダリングします。 export default function App() { console.log('App'); const [count, updateCount] = useState(0); const handleUpdateCount = () => { u
React 18が正式にリリースされていますが、自分はまだまだキャッチアップできてない部分もありました。 今回、自分のインプットも兼ねて、React 18に関する記事や動画をチェックしましたので、独断でまとめ、ここでメモと一緒に紹介したいと思います。 ブログ・ドキュメントを読むのもおすすめですが、動画系を追うだけでも結構情報を追えるので、公式のテキスト読むのが辛いという方にはそちらもおすすめです。 *随時更新は取りやめ中です。 まずは公式ブログ・ドキュメントからチェック 正式版リリース時(2022/03/29)の英語ブログ Concurrent Reactについての概念・説明 並行レンダリングへの移行を既存のコードを壊さずに行う Relay、Next.js、Hydrogen、RemixなどのフレームワークでのデータフェッチにSuspenseの利用が可能など Server Component
はじめに2013年にスタートアップに参加したことをきっかけに、今までいくつかのデジタルプロダクトのUIデザインに携わってきました。2020年にTakramに参加してからは、さらに多様な事業のプロダクトに関わらせていただいています。この約10年間のあいだに世の中のUIデザインのノウハウは確立されてきており、既存のコンポーネントなどを組み合わせれば、きれいなUIが誰でも簡単に作れる時代になりました。そんな中で個人的に大切にしてきた価値観として、「ユーザーの気持ちを考えて、その気持ちに寄り添った情緒的なUIをデザインする」ということがあります。今回、この記事を書いているのは、その意味や意図を言語化して再利用可能なものにしたいと思ったことがきっかけです。考えながら書いているため、何度かのシリーズになるかもしれません。また、このテーマについて様々な方と対話ができたらいいなとも思っていますので、興味を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く