htmxとは何なのか？ その背景にある思想について - Qiita
このアンカータグはブラウザーに次のように指示します： ユーザーがこのリンクをクリックしたら、'/blog'にHTTP GETリクエストを発行し、レスポンスの内容をブラウザーのウィンドウに読み込みます。 これを踏まえて、次のようなHTMLの例を考えてみましょう： これはhtmxに次のように指示します： ユーザーがこのボタンをクリックしたら、'/clicked' にHTTP POSTリクエストを発行し、レスポンスの内容を使ってDOM内のid parent-div の要素を置き換える。 htmxは、ハイパーテキストとしてのHTMLの核となる考え方を拡張・一般化し、言語内で直接多くの可能性を開きます： アンカーやフォームだけでなく、どんな要素でもHTTPリクエストを発行できるようになります クリックやフォーム送信だけでなく、どのようなイベントでもリクエストをトリガーできるようになります GET や
JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
JavaScriptデザインパターン入門 - Qiita
1. はじめに JavaScriptデザインパターンは、JavaScriptを使ってプログラムを書くときによく出くわす問題を解決するためのガイドです。これらのパターンの背後にある考え方を理解することで、自分の問題に適用することができます。また、これらのパターンが自分のコードに役立つ場合を見つけることもできます。 2. モジュールパターン モジュールパターンは、JavaScriptのモジュールシステムの一部で、データを保護する方法を提供します。これは、モジュール内のプライベートなデータと動作を保護し、一方で公開APIを提供する方法です。これにより、プライベートとパブリックのアクセスレベルを持つ自己完結型のモジュールオブジェクトを作成することができます。 これは、JavaやC++のような言語でクラスにアクセス修飾子を使用するのに似ています。 JavaScriptでは、クロージャを使用してモジュ
何故くそややこしいReactを勉強しないといけないのか？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 逃げるプログラマー、避けられない壁 Web系アプリケーション開発をするとなると、React, Angular, Vueといったフレームワークの話題は避けて通れないのだけど、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君は多いと思う。 自分もそういうダメグラマーの一人でした。 だが、Nodeベースでバックエンドを開発していると、どうしてもフロント側が必要だし、使いたいライブラリーや機能、操作性を組み込むためには、フロント側のフレームワークからは逃げられず、立派なフルスタックデベロッパーになる為に、重いけつを上げ、学習することにした
Blitz.js、Next.js辞めるってよ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Blitzは、ざっくり言うとReact版Ruby on Railsです。 Reactの面倒なところを全てすっ飛ばし、技術選定なんてどうでもいいから今すぐアプリを動かしたいんだよ、という要望を叶えるのに適したフルスタックフレームワークです。 概要はBlitz.js - React on Rails、実際の使い方はBlitz.jsチュートリアル：投票サービスを15分で作ってみるあたりを見てもらうとして、とにかくチュートリアルに従ってコマンド打てばとりあえず動くものが一瞬でできるとかそんなかんじです。 技術的にはReact + Next.js
Microsoft MakeCode for Minecraftに入門してみた - Qiita
はじめに Minecraftをプログラミング教育の教材として使用する「MakeCode for Minecraft」を使ってみました。 以前よりプログラミング教育教材として使用されていることは知っていましたが、Minecraftを遊んでいる身としては、整地、自動採掘が簡単にできるのはとても魅力的でした。 調べてみると意外と日本語の情報が少なかったので、私の触った範囲での使い方を紹介します。 環境 Minecraft for Windows 10 Code Connection for Minecraft なぜMakeCode？ Minecraftでプログラミング学習をする方法は、MakeCodeの他に「Tynker」「Scratch」などのツールがあります。いずれもビジュアルプログラミングによりプログラミングを学習します。MakeCodeもビジュアルプログラミングによってプログラミングを学
5歳娘「パパ、余分なpropsいっぱい書くんだね！」 - Qiita
新しい記事もよろしくやで！ 5歳娘「パパのReact、めっちゃ遅いね！」 とある平日 娘（5歳）「パパ、今日は何のお仕事してるの？」 ワイ「おお、娘ちゃん」 ワイ「今日はな、ショッピングサイトを作ってんのや」 今日のお仕事内容 ワイ「↓このデザインの通りに、コーディングをせなあかんのや」 娘「なるほどー」 娘「このショッピングサイトで商品を売りたい！っていうお店があったとして」 娘「そのお店の人が、最初にお店の情報を登録するためのページだね！」 ワイ「せやせや」 まずはデザインを眺めてみる ワイ「この店舗登録ページにはなぁ」 ワイ「↑こんな感じの」 ワイ「項目名と入力欄がセットになったパーツが何度も登場するから」 ワイ「そのためのコンポーネントを作ろうかなー、って」 ワイ「そう思ってたとこなんや」 娘「ふーん」 娘「ラベル付きテキストフィールド的なコンポーネントってことだね」 娘「どこまで
Blitz.jsの議論から学ぶ，formik vs react-final-form vs react-hook-form - Qiita
What should the default form library be in Blitz apps? BlitzがどのFormライブラリをデフォルトにするかの議論が参考になったので要約しました。 formik react-final-form react-hook-form の３択で，結論としては，React Final Formを推奨とする形に落ち着きました。 最初のコメント Blitz.jsの作者であるBrandon(@flybayer)さんがコメントしています。要約するとこんな感じ。 Formik 以前使ってたけど，パフォーマンスめっちゃ悪いって気づいたから，Formikは無しで。 React-final-form 最近ずっと使ってるけどいい感じ。 React-hook-form ほとんど使ったことない。 React-final-formをReact-hook-formに書き
Next.js+TypeScript+AWS Amplify+RecoilでToDoリストを作る - Qiita
本記事ではNext.js+TypeScript+AWS Amplify+Recoilを使って、モダンなToDoリストを作る方法を紹介します。 Githubリポジトリを公開しますので、不具合や不適切な実装を見つけた場合はドシドシIssueかPull-Requestいただけると幸いです。 背景 私自身普段はRuby on Railsを使って開発しています。JavaScriptは正直まだ苦手です。 Railsは爆速でアプリを開発出来る点が魅力的ですが、一方でモバイルアプリとの連携やリッチなUIが求められる案件では、フロントエンドとバックエンドを分離した構成にせざるをえないケースがあります。 そのような構成だと、かえってRailsがリッチ過ぎるとも感じており、AWS Amplifyのようにバックエンドをスピーディーに構築してくれるサービスを一度使ってみたいと思っていました。 そのため、Next.j
Reactの状態管理はReduxの独走状態、2位は大きく離れてswrとreact-queryが競り合い中・・ - Qiita
Reactの状態管理はReduxの独走状態、2位は大きく離れてswrとreact-queryが競り合い中・・ReactreduxSWRRecoilreact-query 2021/09/24 追記 これまでは状態管理にReduxやVuexなどの状態管理用ライブラリを使いますが、Graphqlを採用した場合にApollo Clientを利用することでフロントエンドの状態管理の実装がかなり楽になります。 追記終了 2021/01/17 追記 2020年版 満足度ランキング State of JS 2020: JavaScript Flavors https://2020.stateofjs.com/ 最近よく聞く状態管理 pmndrs/jotai: 👻 Primitive, flexible state management for React https://github.com/pmnd
DynamoDBを使いやすくしたJavascript(Typescript)のライブラリを作成したので紹介します - Qiita
でインストールします。 特徴 RailsのActiveRecordの使用感に合わせた形で作成しました。ActiveRecordと大体同じ感覚で使え、ActiveRecordの機能をできるだけ再現できるように作りました。 なぜ作った? 公式のaws-sdkがすごく使いにくい!! aws-sdk を使ってDynamoDBを操作する開発に限界を感じ、使いやすい ORM も存在しなかったため作成しました。(共通の悩みを持っている人も多くいるようです(参考を参照)) 機能の追加希望などの意見がありましたら教えてください。プルリクもお待ちしています。 参考 Node.js で DynamoDB を操作するためのチートシート[DynamoDB.DocumentClient][AWS] DynamoDB を使う ローカル環境での開発環境の構築 プロジェクト(NodeDynamoDBORM)の中ではDyna
Reduxのreselectとは - Qiita
Reduxにおけるreducer分割とcombineReducersについて - Qiita こちらの記事を読んで、私も（Redux は勉強し始めたばかりだけど）似たような感想を持っていて 最後のコメントに書かれていた reselect というライブラリが気になったので、調べてみました。 取り急ぎ、こちらの公式ドキュメントおよび YouTube にあった動画を見ておおざっぱに理解したつもりでいるので、自分なりに整理してみます。 (公式ドキュメント) Computing Derived Data | Redux (動画) [React/Redux] Logicless Components with Reselect - YouTube 解決したい課題 ドキュメントに書いてあったのと同じく、Redux の basics チュートリアル を例に考えてみる。 このチュートリアルを通して作成したの
Bluebird で Promise を学ぶ - Qiita
概要 Bluebird は Promise を扱うためのライブラリです。チュートリアルや stackoverflow の回答が充実しており、初心者が学びやすいライブラリです。TC39 で提案されている機能があるので、将来の先取り学習ができます。 Bluebird は Observable を学ぶための準備教材としても評価できます。Observable は Promise、EventEmitter、ストリームなどの複数の概念を統合する概念です。Observable を扱うためのライブラリとして RxJS や xstream が挙げられます。Observable は TC39 で提案されており、将来の標準機能になる可能性があります。 Bluebird をブラウザー版アプリで採用するときの課題はライブラリのファイルの大きさです。より小さなサイズのライブラリに切り換えるか、個別の機能に特化したライ
React-Reduxのメモ化が分からない人のためにメモ化が分かるまで説明を辞めない - Qiita
背景:React-Reduxを使うときに、メモ化が重要だと理解したので情報発信することにした 開発現場にReact-Reduxを導入しておきながら、チームメンバーから「 俺の実装したコンポーネントの描画遅いんだけどどうにかしてくれ 」と言われたので、「どうにかするのはお前の仕事だぞ♡」、と思いつつ、そうも言ってはいられない状況になったので、本腰入れてドキュメント読みました。React-Reduxのパフォーマンス改善にはどうやらメモ化が重要であると思ったので説明します。色々なサイトやドキュメントは明らかに冗長な説明が多いので、極限までエッセンシャルを絞って説明することで、ゼロ知識からでもある程度、理解できるレベルの説明に落とし込むことに挑戦しました。うちの開発チームで知見として残すために作成したものですが、需要がありそうかなと思ったので、公開します。需要がなければすみませんでした。おかしな点
【JS・TS】コーディングTips集 - Qiita
概要 JavaScript/TypeScriptを書く中で、自分自身の気づき、他の方から頂いたアドバイスをメモとして残してきました。 その中で、使用頻度が高そうで、知っていれば誰でも簡単に実践できる物を抜粋して記事にしました。 ですので、主にJavaScript/TypeScriptの使用歴が浅い(プログラミングの歴が浅い)方向けに少しでも参考になれば幸いと考えています。 (※JS/TSに限った事では無いものも含まれます。また、こちらに記載した記法が必ずしも優れていると言うわけではありません。本記事はあくまでも、JS・TSを利用した際にこんな記法もあるよという紹介が主要点です。) 早期returnを利用する 条件を満たす場合に直ぐに return することで、コードのネストを減らし、コードの見通しを良くするテクニックです。 簡単な例としまして下記のコードが、
FormikでReactのformを簡単に扱おう！ - Qiita
はじめに この記事はPOL AdventCalenderの8日目の記事です。 こんにちは！株式会社POLでフロントエンドエンジニアをしております、橋本ことブリボンと申します！ 弊社では、フロントエンドはReactを用いて開発をしております。 みなさんは、Reactでformを作る際、どのように実装しますか？ ライブラリーを使わずに実装する、Formikを使う、redux-formを使うなどなど…… 弊社では、Formikを使ってformの実装しております。 また、formのバリデーションを実装するために、 Yup というライブラリーを使っているのですが、Formikの説明だけに注力したいため、詳細な説明は致しません。 別の記事で、Yupを使ったformのバリデーションの解説をしようと思っております。 Formikとは何か？ Formikとは、 Reactでformをより簡単で簡潔に実装でき
Formikが使いたい！ - Qiita
React.jsのバリデーションライブラリ「Formik」がかなり人気を博しているようなので、早速勉強することにしました！ 今回参考にさせて頂いた動画＆記事はこちらです♫ Youtbe: Better React Forms with Formik 2020/02/26 追記 Formikの別記事を書きました。 → Formikを導入する 何もライブラリを使用しなかったときのコード シンプルですが記事タイトルと本文に入力文字数に関するバリデーションを設けたフォームを作成してみました。 ▼ 出来上がり ▼ ソースコード 元になるソースコードも載せます。 あえて、かなり冗長的に作ってます。 import React, { Component } from 'react' class Form extends Component { constructor(props) { super(prop
styled-componentsを使ったCSS設計 - Qiita
はじめに 自分は普段フロントエンドエンジニアとして、React Reduxなアーキテクチャのアプリを作ることが多いのですが、stylingにstyled-componentsを導入しています。今回は、styled-componentsでのCSS設計について書いてみたいと思います。 styled-componentsとは JSでstyleを記述するCSS in JSのライブラリで、2019年8月現在最も人気のあるライブラリです。タグ付きテンプレートリテラルをうまく使った独自性と、明快なAPIでCSS in JSの火付け役にもなり、同じ思想を持った亜種ライブラリ(paypal/glamorous, zeit/styled-jsx等)が続々と出て来るなどある種のブームを巻き起こしました。 そもそも、Reactの登場でフロントエンド開発が「jQueryによるhtmlへの振る舞いの後付け」というスク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reduxの個人的チュートリアル(redux-toolkitあり) - Qiita
yarn install に失敗する "getaddrinfo EAI_AGAIN registry.yarnpkg.com" - Qiita
