htmxとは何なのか？ その背景にある思想について - Qiita
先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目
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への振る舞いの後付け」というスク
あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita
こんにちは、たかとーです🧑🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース（2008年1月）以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
キャッシュについて整理 - Qiita
キャッシュとは 使用頻度の高いデータを高速な記憶装置に蓄えておくことにより、いちいち低速な装置から読み出す無駄を省いて高速化すること。また、その際に使われる高速な記憶装置や、複製されたデータそのもののこと。 - IT用語辞典 Webサイトの表示においては、一度アクセスしたページのデータを特定の場所に保存することで、次回アクセス時の表示を速くし、サーバへの無駄なリクエストを減らせるというメリットがあります。また一口にキャッシュといっても下記の2種類があるので、どちらを指しているのか（あるいは両方か）意識しておきましょう。 ブラウザのキャッシュ：そのパソコンのユーザーが見たページのデータがローカルに溜まっていく。 キャッシュサーバのキャッシュ：不特定多数のユーザーが見たページのデータがネットワーク上に溜まっていく。 キャッシュの制御方法 ✏️ HTTPレスポンスヘッダ で制御 ➡️ Cache
TypeScript on ESLint の未来 - Qiita
The future of TypeScript on ESLint:https://t.co/PTCWKWN22s — ESLint (@geteslint) January 18, 2019 ESLint の TypeScript サポートの今後について、公式にアナウンスがありました。 要点をまとめると、 TypeScript チームが TSLint から ESLint に切り替えていくと発表したよ。 ESLint チームと TypeScript チームが協力して開発を進める場として、typescript-eslint プロジェクトを開始したよ。 既存の部品は新しいプロジェクトの org に移動するよ (typescript-eslint-parser は @typescript-eslint/parser になる、等)。 という感じです。 以下は公式アナウンスの翻訳です。 数週間前、
State of SEO for SPA 2019 - Qiita
メタ この記事はNode学園2018にて話した内容を記事として編纂 +その後の変化を加筆修正したものです。 スライドはこちら。 https://speakerdeck.com/kazuyaseki/seo-for-spa-cfb3706f-ae1d-4c6f-a83f-96dc2452f32b 追記 2019/5/8 遂に Google bot が扱うレンダリングエンジンが Chrome 最新版(現時点では 74)相当となりました！ https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html ただタイムアウトなどのリスクは依然存在するので、信頼性を求めるならやはり Dynamic Rendering や SSR が選択肢になるのかなと言う気はしますが、そこまで要求が強くない場合にはあまり頑張らなくてよ
RxJSの基本をまとめてみた~基本的な概念編(Observable、Observer、Subscriptionなど)~ - Qiita
RxJSの基本をまとめてみた~基本的な概念編(Observable、Observer、Subscriptionなど)~JavaScriptTypeScriptRxJSRxReactiveX RxJSの基本をまとめてみた~基本的な概念編~ Angularで使用していたRxJSだが、もっと深くちゃんと理解しようと思い学習したので、これから何回かに分けてまとめる。 仕組みを理解するために、ちょっと冗長な書き方をするところがある。 「これどうなの?」とか「意訳おかしくね?」という部分があったら、ご指摘いただけるとありがたいです。 今回の範囲 今回は、RxJSやリアクティブプログラミングの基本的な概念である、データストリーム、Observable、Observer、Subscription関連についてまとめたいと思う。 今回は、RxJSの公式ドキュメントをかなり参考にさせていただいた。 RxJSとは
TypeScriptまとめ - Qiita
// boolean型 let flag: boolean = false; // number型 let age: number = 30; // string型 let member: string = '山田太郎' // string型（テンプレート文字列） let message = `私の 名前は${member}です`; // 配列型 let pet: string[] = ['犬', '猫', 'ハムスター']; console.log(pet[2]); // ハムスター // オブジェクト型（連想配列）：インデックスシグニチャ let duet: { [index: string]: string; } = { first: '山田', second: '鈴木' }; console.log(duet['first']); // 山田 // オブジェクト型（interfac
Angular 起動の仕方、コマンドメモ - Qiita
Component ng g component my-new-component Directive ng g directive my-new-directive Pipe ng g pipe my-new-pipe Service ng g service my-new-service Class ng g class my-new-class Interface ng g interface my-new-interface Enum ng g enum my-new-enum Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationWhat you can
Vue スタイルガイドに当てはまらないが、合理的だと思われるスタイル - Qiita
Vue には公式スタイルガイドがある。スタイルガイドとはコーディングのスタイルのガイドだ。例えば具体的には、キャメルケースなのかケバブケースなのか、といったことがある。 しかし、公式スタイルガイドでは不便なところがあるので、今回のスタイルを提案したい。 以下のコードのようになる。 <template> <div id="app"> <HelloWorld :superValue="'test value'" :IDTest="10101" /> </div> </template> <script> import HelloWorld from "./components/HelloWorld"; export default { name: "App", components: { HelloWorld } }; </script> <style> </style> <template>
[解決] error TypeError: Cannot set property 'ts' of undefined - Qiita
TL:DR; nuxt.jsメジャーバージョン上がったらmodules/typescript.jsの書き方が変わっていた。 おわり。 承前 TypeScript+Nuxt.jsでやってます。単一ファイルコンポーネントだいすき。 あるていど開発が進んだところで、yarn run devとかやっとってもChromeが読み込みを終えてくれない病にかかりました。単純なページはいいものの、裏側でAPI叩いてるページの処理が終わらないケースが増えました。不思議とFirefoxは動く。 いちおうこの件は解決できたので、しょぼい激闘の記録をここに残します。 package.json（抜粋）はこんな具合。7000番で起動してるのはこちらの都合。 "scripts": { "dev": "nuxt --envname=dev --port 7000", "build": "nuxt build --envna
![[解決] error TypeError: Cannot set property 'ts' of undefined - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5ad4efd968a766807b9e55b5181974c07ce59e4/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU4JUE3JUEzJUU2JUIxJUJBJTVEJTIwZXJyb3IlMjBUeXBlRXJyb3IlM0ElMjBDYW5ub3QlMjBzZXQlMjBwcm9wZXJ0eSUyMCUyN3RzJTI3JTIwb2YlMjB1bmRlZmluZWQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTZmZDFlYzc4N2M1MGQ0OTlkZThkMzAzYjkwNjY1OTZk%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaGFsaSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OTQ3OWUxM2NmMDZkNGE2M2M3ZjQyM2UwNDgyN2IwN2U%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Deaef107b340afd2b38aa7e27506e018c)
知らないうちにJSON5 in Babel - Qiita
JSONは身近なフォーマットですが、手で書こうとすれば案外に書きにくいものです。実は、そういった問題をクリアするような「JSON5」というフォーマットがあって、しかも多くの人が利用可能な環境にあったりもします。 JSONの書きにくさ JSONはJavaScriptのオブジェクトリテラルから派生したものですが、データ交換用のフォーマットという性格もあってか、JavaScriptと比べて制約もあります。 オブジェクトのキーは二重引用符で括る必要がある（一重引用符や、何も書かないのは禁止） 文字列も二重引用符で括る必要がある（一重引用符は禁止） ケツカンマ禁止 コメントは入れられない うっかりしていてJSONとしてInvalidなものを作ってしまうことも多いし、設定ファイルにコメントを付けられないのもストレスの一因になったりします。 拡張した、JSON5 そんなJSONの使いにくさへの解決策とし
Node.js v11.0.0でElectronウィンドウが表示されない - Qiita
こんにちわ。 Node.jsをv10.2.0 -> v11.0.0に更新したのですが、そしたらElectronがコケるようになってしまいました。 事象 > node -v v11.0.0 > electron Electron 4.0.0-beta.5 - Build cross platform desktop apps with JavaScript, HTML, and CSS Usage: electron [options] [path] A path to an Electron app may be specified. It must be one of the following: - index.js file. - Folder containing a package.json file. - Folder containing an index.js file.
Alibaba Function Compute による kintone 定期実行 - Qiita
kintone の定期実行をAlibaba Function Compute (node.js)で試してみました。 今回は 1時間ごとに kintone アプリのレコード件数を取得する処理です。 基本的なしくみは、Azure Functions など他のサーバーレスと同様で簡単に定期実行が実現できます。 開発環境 kintone 連携の Alibaba Function 開発メモと同じです。 kintone API トークン kintone アプリ設定画面で、REST API で使用するAPI トークンを発行します。 試用するAPI によって、アクセス権を設定できます。 Function Compute の構成 今回は定期実行をするため、タイムトリガーを定義します リージョン ：東京、上海などが選択可能 サービス：Function Compute のリソースを管理するための単位 関数：シス
npx で実行するか npm scripts で実行するかで glob パスの解釈が違う - Qiita
"scripts" : { "stylelint": "stylelint resources/assets/sass/test/**/*.scss", } 上記npm scriptsを用意した状態で実行する npm run stylelint と npx stylelint resources/assets/sass/test/**/*.scss で、処理対象となるファイルに違いが出た。 npx はディレクトリを再帰的に掘って走査してくれるが、npm scripts では第一階層しか探してくれない。 これを、npm scripts でも配下すべてのディレクトリを再帰的に走査するようにしたい。 ※再現環境 macOS 10.14 Node.js 10.9.0 npm 6.2.0 解決方法 パスをシングルクォーテーションで囲む。 つまり、以下のように記述する。
Node のバージョンを上げたら Hexo が死んだ - Qiita
TL;DR ndenv を入れて、 hexo のプロジェクトフォルダの node のバージョンを 6 に戻した。 状態 他のプロジェクトで必要だったため、 homebrew で node を upgrade した。 すると hexo の基本的なコマンドは実行されているらしいが deploy がうまくいかなくなった。 deployer には s3-cloudfront を利用していた。 試行錯誤 deployer を変えてみた -> ダメ 普通の s3 にして cloudfront でのキャッシュクリアは手動にしようとした。 やってみたところ s3 へのデプロイ自体がうまくいっていないようだった。 node のバージョンを戻したい -> ムリ 新しいプロジェクトで必要なので戻せない。 複数バージョンを使えるようにしよう nodebrew -> 毎回コマンドラインで切り替えるの面倒 ndenv
パッケージ名とコマンドが異なるモジュールを npx で実行する - Qiita
はじめに npx は便利ですね。 npm install -g foobar でローカルにインストールしなくても、npx foobar だけで実行できます。 npx にちょっとはまって、ちょっとだけ調べたので、そのメモです。 間違ったやり方 例えば express-generator。express のテンプレートを作れるコマンドです。 インストールは、npm install -g express-generator ですが、実際使うときのコマンドは、express なので、上のノリで npx express とやると、 となります。 どうやら、npx foobar はパッケージ名とコマンドが一致する場合の特別なケースでのやり方のようです。 正しいやり方 一般的にコマンドとパッケージ名は別物なので、そういうコマンドを実行する時は、-p オプションでパッケージ名を、-c オプションでコマンド
Nuxt.jsの新規プロジェクトでいい感じのテスト環境をつくる@2018 - Qiita
最新版=>フロントエンドのテストについて考える 現在、新規プロジェクトで、Nuxt.js+TypeScriptを使ったSPAの開発を行っています。この記事では、そういったケースにおいての、Nuxt.jsアプリケーションでのテストに対する考え方と、その方法を紹介します。 TL;DR ユニットテスト/結合テスト=>Jest UIテスト=>Storybookをベースに、Jestで足りない部分を補う プロジェクトの技術スタック Nuxt.js Vue.js Vuex TypeScript Docker テスト種別の整理 簡単に、今回登場するテスト種別の整理をしておきます。より詳しくは、ググったり書籍を読んだりするのをおすすめします。 ユニットテスト - 個別の関数やクラス、コンポーネントをテストする。 結合テスト - 複数の関数やコンポーネントをつなぎこんでテストする。 UIテスト - ブラウザを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TailwindCSS入門 ~ Utility First + デザインシステムの構築 ~ - Qiita
Why should learn MongoDB for feature - Qiita