2020年版: なぜ仮想 DOM / 宣言的 UI という概念が、あのときの俺達の魂を震えさせたのか
本記事は、 「なぜ仮想 DOM という概念が俺達の魂を震えさせるのか」 https://qiita.com/mizchi/items/4d25bc26def1719d52e6 の 2020 年版のリライトです。 2014 年当時、日本においては React は未だ知る人ぞ知るライブラリ、という位置づけでした。それが、この記事によって一気にメジャーになったように思います。 オリジナルは2014 年末の情報によって書かれたもので、さすがに 6 年経った今では情報が古くなっており、当時の暗黙のコンテキスト、古いリソースの参照、初学者の混乱を招く表現が残ったままになってしまっています。 定期的に更新しようとも思いましたが、そうすると 2014 年末の歴史的な背景を失ってしまうため、あえてそのまま残し、新しい記事を投稿することにしました。増補改訂版というより、ほぼ書き直しです。 この記事は本来なら
Tailwind Starter Kit by Creative Tim | Free & Open Source Design System
A beautiful extension for TailwindCSS.Tailwind Starter Kit is Free and Open Source. It does not change or add any CSS to the already one from TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue and Angular. Great for your awesome projectPutting together a page has never been easier than matching together pre-made components. From landing pages pres
あらためてReactとVueを比較してみる〔2020年最新版〕 ｜ 25歳でフリーランス28歳で起業したエンジニア -じゃけぇ- のあれこれ
どーもじゃけぇ(@bb_ja_k)です。 フリーランスとして普段はフロントエンドメインで仕事してます。 ３大モダンフロントエンド フレームワーク/ライブラリ と言えば React、Vue、Angular ですね。 「まずはどれか習得しようかなぁ」と考えている人の多くはReactかVueの選択で悩むのではないでしょうか。 フロントエンドは本当に技術の革新が早いので、ReactとVueの比較記事を見ても割と古い情報での比較が散見されます。 ReactはHooksの登場で大きく変わりましたし、VueもComposition APIを含むメジャーバージョンアップであるVue3も控えています。 正直これから勉強を始める人は何がなんだかって感じだと思いますし、せっかくだったらなるべく無駄にならないほうをやりたいなーと思うことでしょう。(自分もモダンフロントエンドを勉強し始めた時めっちゃ調べました←)
vue-composition-apiを使って機能単位のコード分割と合成を試してみた - Qiita
概要 この記事では、Vue.js ver 3.0 で採用予定の Composition API (https://vue-composition-api-rfc.netlify.com) を使って、このRFCの動機のひとつである「Code Organization」がどのようにして実現可能なのかを試しに実装してみた結果をまとめました。 はじめに100行超の単一のSFCでデモアプリを実装し、そのあとに「Function -> Module -> Component」の順番で機能単位での分割を進めた前後のコードを比較しています。 Composition APIでどのように実装すべきかを模索されている方にとっての参考になれば幸いです。 Logic Reuse & Code Organization The APIs proposed in this RFC provide the users w
なぜ、Vue Composition APIを使うのか、理解する【メリット/デメリットまとめ】 - Qiita
はじめに Vue3のリリースが迫ってきました。 順調に行けば、公式リリースは8月上旬のようです。楽しみですね。 Our current target dates are mid July for the RC (release candidate) and early August for the official release of 3.0. https://github.com/vuejs/rfcs/issues/183 Vue3の目玉の機能として、「Composition API」があります。 この記事では、「”なぜ” “なんのために” Composition APIを使うのか」理由について、まとめています。 「Composition APIの使い方」についての説明は、この記事では割愛します。 以下の記事に、具体的なComposition APIの使い方とProviderパターンに
AWS LambdaとNuxt.jsでServer Side Renderingする（2020年版） - Sweet Escape
サーバーレスでサーバーサイドレンダリング（SSR）の後編です。前編はこちら。 www.keisuke69.net なお、同内容をこちらのイベントでも話す予定ですので興味あるかたはぜひこちらも。 serverless-newworld.connpass.com はじめに サンプルアプリ serverless.yaml 最後に はじめに 前回、SSRとはって話を簡単にしました。今回はSSRをAWSのサーバーレス、つまりAWS Lambdaでやってみたいと思います。 今回はVue.jsのフレームワークであるNuxt.jsで作ったサンプルアプリのSSRをLambdaで試してみます。 前回のブログでNuxt.jsでの例という説明をしましたが、今回はそこを実際にやっていく感じです。 なお、Nuxt.jsをLambdaで動かす場合の話って実はググってもあまり出てきません。いくつかの記事が出てくるだけです
Release v3.0.0 One Piece · vuejs/core
Today we are proud to announce the official release of Vue.js 3.0 "One Piece". This new major version of the framework provides improved performance, smaller bundle sizes, better TypeScript integration, new APIs for tackling large scale use cases, and a solid foundation for long-term future iterations of the framework. The 3.0 release represents over 2 years of development efforts, featuring 30+ R
Official Vue.js News
🍰 Vue.js v3.0.0 "One Piece" Released! 🎉 The State of Nuxt.js and more! Hello! The time is now! Vue.js v3.0, codename "One Piece" has just been officially released! 🎉 Watch the announcement talk by Evan You! This is a huge milestone for us that, to quote Evan You himself „represents over 2 years of development efforts, featuring 30+ RFCs, 2,600+ commits, 628 pull requests from 99 contributors, p
なりすまし口座に約1億円が流出したSBI証券の不正ログインについてまとめたみた - piyolog
SBI証券は顧客アカウントへの不正ログインにより9,864万円の顧客口座の資産が外部へ流出したと発表しました。資産流出には不正に開設された銀行口座も悪用されました。ここでは関連する情報をまとめます。 SBI証券の発表 悪意のある第三者による不正アクセスに関するお知らせ なりすまし口座を使った犯行 不正利用の手口（SBI証券発表情報よりpiyokango作成）SBI証券からの流出は以下の手口で送金まで行われてしまった。 SBI証券の顧客アカウントに不正ログイン。 偽造した本人確認書類を用いて銀行でSBI証券と同名義の口座を開設。 顧客アカウントが保有する有価証券を売却。出金先銀行口座を不正口座に設定変更。 売却した資金を不正口座に送金。送金された金を引き出し。 約1億円が流出 SBI証券が2020年9月16日時点で把握している被害は顧客数6人、総額9,864万円。1件当たり数百～3,000万
米マイクロソフト、海中に沈めたデータセンターを引き揚げ
ニューヨーク（ＣＮＮ Ｂｕｓｉｎｅｓｓ） 米マイクロソフトが、スコットランドの海底に２０１８年に沈めたデータセンターを引き揚げたことがわかった。 マイクロソフトは「プロジェクト・ナティック」として、２０１８年にデータセンターを約３５メートルの海中に沈めていた。マイクロソフトは将来はデータセンターを海中に設置するようになるのではないかとみている。データセンターは冷却システムを備え、再生可能エネルギーで電力供給が行われるよう設計されている。 今回海中から引き揚げたデータセンターはマイクロソフトとしては２つ目。カリフォルニア州にも設置したことがあり、こちらのデータセンターは２０１６年８月から１１月まで海中にあった。 マイクロソフトの仮説では、窒素は酸素よりも腐食が少ないほか、部品にぶつかったりする人間もいないため、地上にあるデータセンターよりも海中のデータセンターのほうが信頼性が高まるという。ま
Nuxt.js + AWS Amplify でアプリ開発を始める｜べりめろ
AWS Amplifyとは？AWSが提供しているWeb・モバイルアプリケーションのフレームワークです。 https://aws.amazon.com/jp/amplify/ ざっくり言うと、簡単・最速・スケールするアプリケーションを構築できるフレームワークです。 近しいサービスで言うとFirebaseがあると思います。 サーバレスなのでオンデマンドで料金がかかります。個人開発で使う分にはほとんど料金が掛からないのでおすすめです。 今回はフロントエンドにNuxt.jsを使ってAmplifyを始めていきたいと思います。 ゴールNuxt.js + AWS Amplifyの開発環境構築 前提AWSアカウントは作成済みの前提で進めていきます 手順Nuxtプロジェクト作成 rendering modeはSPAにします。UIはいつもよく使っているVuetify.jsにしました。 $ yarn creat
間違えて違うブランチで作業を始めてしまったときの対処法【Git】 - Qiita
1. 状況 例えば新しい機能を実装しようとコードを書いていて、 「ん..？これってmasterブランチじゃね..？！」と気づいたとき。 そしてまだcommitはしてないけど、既に結構ファイルをいじってしまっている。。 ..そんな状況における対処法をさくっと解説します。 結論として、全然大丈夫です！ (実際に自分がmasterで作業していて焦ったので、情報共有します..) 2. やること 簡単に流れを説明すると、 ①今の作業ブランチを確認する ②変更してしまった作業分を退避させる ③本来作業したかったブランチにその変更を反映させる です。 3. 実際にやってみる ①今の作業ブランチを確認 $git branchで今の作業ブランチを確認します。 $git branch feature/#7_add_modal_for_posting feature/#9_add_user_name_to_po
iOSでフォーム入力時に画面がズームされる
iOSでフォーム入力時時に、画面がズームされてしまう問題を対応する機会があったので、調べた内容をメモ。 サンプルコード まずは対応前のサンプルです。 <form> <div class="form-value"> <input type="text" name="text"> </div> <div class="form-value"> <select name="select"> <option value="">吉田優子</option> <option value="">千代田桃</option> <option value="">リリス</option> <option value="">陽夏木ミカン</option> </select> </div> </form> input[type="text"] { box-sizing: border-box; width: 100%
『2時間スプリント』とフルリモートワークなシステム開発 - terurouメモ
デンキヤギという会社で『2時間スプリント』が定着してきたので、その話でも書きます。 2時間スプリント？ みなさん、すでにスクラムで開発してますよね！ ぶっちゃけ、スクラムがよくわかってなくても、とりあえずスプリントと称して開発のメリハリをつけるために、1週間なり2週間なりで区間を区切って開発をしていくのは、普通にやってるんじゃないかと思います。 2時間スプリントとは、その期間を2時間にするという話です。 スプリントを超短期サイクルにすること自体は、47機関の人たちがオリジナルだという認識です。このあたりに本家の情報がまとまっています。 kyon-mm.hatenablog.com 2018年に実際に47機関の人たちのチームに入って1時間スプリントで働くという機会があって、それ経て、デンキヤギでもパクって導入しています。本家ではのちのち15分スプリントになっていったらしいんですが、うちはうち
disabledなボタンのhoverのスタイルを無効にする方法
「type="submit"」や「type="button"」のinput要素、またはbutton要素などのボタンをdisabledに変更したときに、hoverのスタイルを無効にする方法を紹介します。 １．はじめに 次のようなinput要素のボタンがあります。 HTML <input name="send" type="submit" value="送信" /> これをdisabledに変更するとボタンが押せなくなるような表示に切り替わります。またクリックしても無反応です。 HTML <input name="send" type="submit" value="送信" disabled="disabled" /> が、ボタンに下記のようなスタイルを設定しているとします。 input { background-color: #0076bf; background-image: linear
ディズニー映画「ムーラン」に対して日本ウイグル協会からの声明
ウォルト・ディズニー社は2020年9月4日より、ディズニーの新作実写映画「ムーラン」を、動画配信サービス「ディズニー＋（プラス）」で公開開始しました。そして、作中のエンドロールの中で、「中国共産党新疆ウイグル自治区宣伝部」、「トルファン地区党委宣伝部」、「トルファン地区公安局」、「カラ・ホージャ（高昌）区党委宣伝部」、「ピチャン（鄯善）県党委宣伝部」に対する謝意が記載されています。日本ウイグル協会はディズニー社に対して、深い悲しみと抗議を伝えます。 同地である東トルキスタンでは過去数年間で、300万人以上ものウイグル人や他の地元住民らが、中国で「再教育施設」と呼ばれる強制収容施設に収容され、著しい人道犯罪の犠牲になっています。「公安局」は逮捕や弾圧を、「党委宣伝部」とは中国のプロパガンダ政策をそれぞれ行う機関で、ウイグル人に対する人道犯罪とその隠蔽に最も責任のある機関なのです。そのため、今
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
Vue.js初心者でも書ける！ゼロから始めるVuexのテスト入門編その１(vue-test-utils) - 虎の穴開発室ブログ
みなさん、いかがお過ごしでしょうか。今年の7月からラボのマーケチームに加わったY.I.です。 好きな作品は「ゆるキャン△」です。お盆休みには「ゆるキャン△」舞台の富士山周辺でキャンプツーリングをしてきました。 ゆるキャン△に関しては熟知している私ですが、技術的にまだまだ未熟な開発者です・・・。活躍できるよう頑張っていきますので、どうぞよろしくお願いします。 さて、今回はVue.jsのテスト、とくにVuexのテストについて書いていきたいと思います。 0. この記事を読んでわかること 本連載では「ゼロから始めるVuexのテスト入門編」と題して、これまでVuexのテストを書いたことがない方を対象に、全2回に渡ってVuexのテストの詳細を書いていきます。 今回は連載の第一回目として、下記の構成でお送りします。テストの必要性やポイント、またVuexのテストがどのようなものになるのか感じ取っていただけ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
露カラシニコフが電気自動車を発表 「米テスラに対抗」 - BBCニュース
要はアジャイルは行き当たりばったりってことですか？
