後学のために自分の考えていることをまとめてみる。 考えられるパターン これまでの経験から以下4つのパターンがある。 ローカルStateでprop-drillingする ローカルStateかつイベント経由でデータ交換をする グローバルStoreとローカルStateを併用する グローバルStoreのみを使用する 1. ローカルStateでprop-drillingする propとしてコンポーネント間のデータをやりとりする手法。 ほぼすべてのUIコンポーネントを親からデータを受け取りDOMを出力するだけの純粋な関数として表現できるため、全体の設計自体はシンプルになる。手間は多いが魔法は少ない。 コンポーネントの粒度が小さいアプリケーションの場合にはいわゆるバケツリレーと揶揄されるデータの受け渡しが頻発し、これに嫌悪感を持つエンジニアもいる。 2. ローカルStateかつイベント経由でデータ交換を

たまには、noteに記事を書いてみる。コード出てこない話ならね...。 で、ぼくはフィヨルドブートキャンプに謎の枠（提携企業枠??）で関わっているのだけれど、そこで「似たような技術系の記事を書くことについて」と題された質問があった。それに対して僕はこんな感じで答えた。参考になるかもしれないのでオープンインターネットに残す。なお、強調箇所は今入れた。 ---- 似たような記事がある中で、自分が書く意味があるのか問題。結論としては、次にいう一つのことに気をつければ、どんどん書くと良いかと思います。 それは、参考にした「他の優れた記事」を紹介し、リンクを貼ることです。その際、自分が参考にした点や感想などを付記するとベターでしょう。 （堅苦しくいうと論文の引用のような感じですね） そうすることで、情報の受け手はあなたの書いた記事と参照先の内容とを自分で比較検討し、その上で自分で判断することができま

Jamstackを既存のシステムに導入するかを検討する機会があった。 紆余曲折したものの、未だに暫定的な結論しか出ていない。 とはいえ、わりと頑張った。 今回は Jamstackとはなんぞや？ Jamstackの特徴 Jamstackの技術 弱みを解決する策 実際に検討した話 を雑に紹介したい。 個人的なメモなので、間違っているところがあるのを考慮願いたい。 Jamstackとは？ JamstackのJamは以下の頭文字をとっている。 JavaScript APIs Markup まず、フロントエンドを持たないAPI群がある。APIはブラウザのJavaScriptから叩かれるかもしれないし、後述するようなSSG =「Static Site Generator」のフレームワークが叩くかも知れない。どちらにせよユーザーに配信されるのはSSGが出力した、Markup。つまりプリレンダリングされた

今回は基本はTerraformでインフラを構築しつつも、部分的にはSAMを使用してLambda＋API Gatewayをデプロイしたいと思います。 Lambdaのアーカイブ化やS3へのアップロードをSAMにやってもらうことで、Terraform側でのタスクを軽減することができます。 今回の記事の元ネタは以下のスライドです。 IaCについていろいろな知見が得られると思うのでおすすめです。 SAMとは SAMはLambdaなどのサーバーレスアプリケーションの開発・デプロイを補助するツールでCloudFormationのような形式のファイルを用いてこれらを定義することができます。 Lambdaを開発・デプロイする場合について考えると、必要となる工程は煩雑です。開発ではローカルでの実行やランタイムの管理などをしたくなりますし、デプロイでは依存するパッケージの設置、Zipファイルへのアーカイブ化、ア

現場で使えるFlexboxレイアウト12選Update2023.05.12Release2021.06.24Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する 現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウトflexboxを使った横並び1行レイアウトカードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実

はじめに モダンブラウザで使われるファビコンの作り方を見直して、今こそアイコン生成であくせくするのを終わりにしましょう。昨今のフロントエンド開発者は、ブラウザタブやらタッチ画面やらにWebサイトの小さなロゴを表示する、ただそれだけのためだけに静的なPNGファイルを20個以上扱わなければなりません。よりスマートな方法で、現代のニーズに合う最小限のアイコンセットを使う方法を紹介します。 ファビコンは見かけよりもずっと幅広く奥深いトピックで、実は誰もがファビコンについてしっかり学びたいと思っていることもわかってきました。本記事全体の内容を実質わずか2行のスニペットに凝縮したものも紹介していますので、今ファビコンで苦しんでいる方は（正確な使い方をご存知なら）そちらをお使いいただけますが、そこをぐっとこらえて記事を最後までお読みいただくことをおすすめいたします。 🔗 忙しい人向け: ウルトラショー

はじめに こんにちは。Blockchain Lab の高瀬(loloicci)です。 先日 gihyo.jp にて『Webエンジニアの新しい道 ～LINE Blockchain Labが拓くブロックチェーンの世界』 で取り上げて頂いたとおり、LINE Blockchain では WebAssembly (WASM) 形式のスマートコントラクトを実行する機能を開発しています。 WebAssembly は名前の通り Web で使用することを想定して開発され始めた言語ですが、いくつかの特長から Web 以外の様々な分野からも注目を集めています。 また、Blockchain におけるスマートコントラクトも WebAssembly に注目している分野の一つです。 この記事ではブロックチェーンにおけるスマートコントラクトの紹介と、スマートコントラクト分野がなぜ WebAssembly を注目しているの

SaaS、IaaS、PaaS……最近「○aaS」という単語を目にする機会が増えた。何となく「クラウドを使ったサービス」ということは分かるが、詳しい違いを即答できるだろうか。 各単語にある「aaS」は「as a Service」の略で「サービスとしての」という意味。つまり、今までPCで使っていたソフトウェアや演算機能をインターネット経由で提供するサービスということだ。 最初のアルファベット一文字が、サービス化された特定の概念を表す。例えば「SaaS」なら「サービスとしてのソフトウェア」。頭に任意の文字を意味する「X」を付けて「XaaS」（X as a Service）とも総称する。各XaaSはどんな意味なのか。アルファベット順に見ていこう。 なお、「○aaS」と付くサービスは語呂合わせから特定の製品名までいろいろある。ここでは、基本的にクラウド関連のXaaSを取り上げるが、一部それに限らない

著者： 寒川響（空中カメラ） 自室、スタジオ、ライブハウス、ときにはそこらの公園や道端など、街のあらゆる場所で生まれ続ける音楽たち。この連載では、各地で活動するミュージシャンの「街」をテーマにしたエッセイとプレイリストをお届けします。 ◆◆◆ 「そういえば、今の家、売ることになったから」 僕が結婚して数カ月。父に連絡をとると、こともなげにそう言われた。10年以上暮らした実家がなくなるらしい。僕も妹も同じようなタイミングで実家を出たため、両親も引越しを決めたとのことだ。 決める前にひとことくらい言え、と喉まで出かかったが、「ほえ～！」とデカめの声で返事するに留めた。事前に言われたところで、やっぱり「ほえ～！」と言うだけだろうな、と思い直したからである。 実家があるのは、「久留和（くるわ）」という相模湾沿岸の港町だ。最寄駅の逗子までバスで約30分。ギリギリ横須賀市内に位置するものの、本当にギリ

AWS News Blog New – AWS BugBust: It’s Game Over for Bugs Today, we are launching AWS BugBust, the world’s first global challenge to fix one million bugs and reduce technical debt by over $100 million. You might have participated in a bug bash before. Many of the software companies where I’ve worked (including Amazon) run them in the weeks before launching a new product or service. AWS BugBust take