Grid.js - Advanced JavaScript table plugin
Grid.js Advanced Table PluginGrid.js is a Free and open-source JavaScript table plugin. It works with most JavaScript frameworks, including React, Angular, Vue and VanillaJs.
Grid.js Advanced Table PluginGrid.js is a Free and open-source JavaScript table plugin. It works with most JavaScript frameworks, including React, Angular, Vue and VanillaJs.
なんとなく自分の中で言語化しておきたかったので、整理も兼ねて記載しておきます🙆🏻♂️ 普段仕事で様々なAngular、またはReactのコンポーネントを作ったりメンバーから出るPRを読む中で、コンポーネントのスタイルはどういうふうに当てるのが破綻しにくいんだろうと考えていました🤔 Angularは良くも悪くも一つのComponentが結構おっきくなりがちだったのでそこまで意識しなかったですが、Reactは何なら分割しないと気持ち悪いとすら思えるくらいにコンポーネントを分割しやすいです。 コンポーネントを分割することは各ファイルごとに把握すべき事柄が減るので基本的にはいいことだと思っていますが、スタイリングについては意識しないと破綻してしまうなーと思っています。 （もちろん、スタイリングに限らず意識しないと破滅するんだけど、今回はスタイルについての話です） スタイルの破綻っていうのは
Notyf: A minimalist JavaScript library for toast notifications.
A minimalistic JavaScript library for toast notifications. Responsive, A11Y, dependency-free. Tiny (~3KB). Easy integration with React, Angular and Vue.
BankCodeJP API — 金融機関コードAPI
Japan Financial institution Code Web API金融機関検索APIのスタンダード銀行、信用金庫等の統一金融機関コード、名称を検索できる Web API。 毎月 8,000万を超える検索リクエストを処理し、トラフィック増加時にも優れた可用性とレイテンシを提供しています。 BankcodeJP APIシンプルそしてパワフルに設計されたAPIは、Eコマースにおける金融機関検索に最高のパワーを与えます。 JSONフォーマットで金融機関情報を返却するAPIはCORS対応しているためAjaxで通信できます。JQuery はもちろん、Angular や React、Ember.js、Aurelia、Vue.js などの SPAフレームワーク からも利用できます。 いくつもの企業がBankcodeJP APIを導入し、素早く効率的に Webサービスを構築しています。
はじめに こんにちは、フロントエンドエンジニアのねだです。 いきなりですが、タイトルの通りです。 弊社は元々フロントエンド環境に主にAngularを利用しており、Reactでの採用の募集も行っていましたが、当面Angularに一本化する方針に転換しました。 この事はもちろん他のライブラリについて否定的な意図があることを意味するわけではありません。現状のGitHub Star数などを確認しても、より新しいフロントエンドでの設計や開発について知るためにはReactを追い続ける必要がある現状がありますし、いわゆる通常のWEBサイトをカジュアルにSPA化する場合にはVueが入りやすいです。ですが、それを理解した上での判断になります。 JavaScript ライジングスター 2021 Angularのメリット Angularはもともと、2009年にAngularJSとしてスタートし、その後、後方互換
なにこれ クロスプラットフォームアプリを開発する手段はいくつかありますが、とっつきやすそうなIonicについて調査しました。実装方法というよりは、全体像と、React Native・Flutterとの比較についてまとめています。 📝私はWeb開発の経験はありますが、Ionicの経験があるわけではなく、これからやってみようという段階です。 そのため本記事はあくまでも調査結果をまとめたもので、実際の開発の経験に基づくものではありません。 Ionic概要 クロスプラットフォームアプリをWebの技術（HTML/CSS/JS）を使って作るためのフレームワークです。 iOS・Android・Electron・Web(PWA)などの複数の環境で動作させ、ネイティブ機能にアクセスするためのCapacitorと、 WebComponentベースのネイティブ風なUI Componentから構成されます。 U
Webアプリケーションフレームワーク「Angular」の最新版となる「Angular 9」が正式にリリースされました。 Version 9 of #Angular is here! Read all about the improvements in v9: https://t.co/Gjw9S89TQz — Angular (@angular) February 6, 2020 Angularは2017年4月に登場したAngular 4から、半年ごとにメジャーバージョンアップが行われることになっています。そのためAngular 9は2019年6月にリリースされたAngular 8の半年後となる2019年12月頃にリリースされるはずでしたが、2カ月遅れの今月、2020年2月リリースとなりました。 Angular 9最大の新機能は、高速かつ軽量なレンダリングエンジンの「Ivy」がデフォルトと
ディレクトリ構成ベストプラクティス ~ Angularアプリを作り続けてわかったこと / FRONTEND CONFERENCE 2019
ディレクトリ構成ベストプラクティス ~ Angularアプリを作り続けてわかったこと / FRONTEND CONFERENCE 2019
こんにちは、Classiに入社して1年になるGoogle Developers Expert for Angularのlacolacoです。 今日はClassiに新しく フロントエンドエキスパートチーム を作った話を紹介します。 フロントエンドエキスパートチームとは？ 日本のフロントエンド界隈（？）の方なら、フロントエンドエキスパートチームと聞いて真っ先に思い浮かぶのはサイボウズさんのチームだと思います。 Classiで新たに立ち上げたチームは、名前も含めてサイボウズさんのフロントエンドエキスパートチームをかなり強くインスパイアしています。 そのメンバーであり友人でもあるsakito君にはチームの設計にあたって相談に乗ってもらい、名前をそのまま真似ることも快諾してくれました。この場を借りて改めて感謝です！ speakerdeck.com メンバー構成 2021年1月現在、lacolaco
開発部の横溝です。 昨年、弊社ANDPADの機能「施工管理」をNuxt化するプロジェクトが始動し、停止しました。 「停止」というと残念な感じがするので、充電期間に入ったと言い直しておきます。 「Nuxt化するプロジェクト」とは？ 背景 改めて、この記事について Nuxt化が始動して、停止した話 まず、エンジニアがそれを「やりたかった」 Nuxt化のはじまり 停止 いま、Nuxt化のリポジトリはどうなっているか プロジェクトの恩恵 残された課題 さいごに 追記(2021.03.12) 「Nuxt化するプロジェクト」とは？ 2020年3月~2020年11月に実施した、レガシーコードをリプレイスするプロジェクトです。 前述の「施工管理」は、社内でも特に昔からある機能なのですが、フロントエンドに、主にRuby on Rails（slimテンプレート）+ AngularJSを利用しています。それを、
bitbankの中規模Angularアプリケーションを再設計し、パフォーマンスの改善やメンテナンス性の向上を試みている話について発表します。
Today, the community was shocked by the sudden news that Docker Desktop for Mac/Win is no longer free [-as-in-beer] for “professional use in larger businesses”. But we have a free, libre, and open source alternative of Docker for Mac: containerd & Lima. $ brew install lima $ limactl start $ lima nerdctl run -it --rm alpine(NOTE: ARM Mac requires installing a patched version of QEMU, see Lima docum
AWS サーバーレスサービスによるマルチテナント SaaS ソリューションの構築 | Amazon Web Services
Amazon Web Services ブログ AWS サーバーレスサービスによるマルチテナント SaaS ソリューションの構築 この記事は、Building a Multi-Tenant SaaS Solution Using AWS Serverless Services を翻訳したものです。 本投稿は、AWS SaaS Factory の Sr. Partner Solutions Architect である Anubhav Sharma と AWS SaaS Factory の Partner Solutions Architect である Ujwal Bukka により寄稿されました。 SaaS (Software-as-a-Service) 提供モデルへの移行に際しては、コストと運用効率を最大限に高めたいという要望が伴います。 これは、利用傾向を予測することが困難なマルチテナン
JSXとHTMLベースのテンプレート言語の比較を行い、批判されがちなJSXが実はベターな解だったのでは？という記事です。 僕の結論は、HTMLとJSのどちらが制御構造を持てばいいのか？でいえばJS側が持つ方がリファクタリングしやすいため、JSXの方が良いというものです。 さて、先日、JSフレームワーク事情2020年始めという記事を書きました。これは、JavaScriptフロントエンドフレームワーク、Angularの人気が下落中という記事の元ソースであるThe State of JavaScript 2019を見ながら、React/Vue/Angularや、Next/Nuxt/Gatsbyが置かれている状況を解説するものでした。 他には、確証はないものの、Reactのシェアと人気がともに高い理由は、意外にJSXにもあるのではないか？と考えています。VueもAngularも基本的にはHTMLを
2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年の総合ランキング1位はVue.jsです。 以下は2020年のランキング、2020 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2020 5回目のJavaScript ライジングスターにようこそ！ こ
「フロントエンドLT会 - vol.8」で発表したスライドです。 https://rakus.connpass.com/event/255095/
Startup Angular #1 Angularを採用しているスタートアップの裏側を徹底公開 LTタイム 3人目 https://voicy.connpass.com/event/220158/
React勉強会@福岡 vol.2
Googleの「Firebase Hosting」がNext.jsとAngular Universalによる動的Webサイトもサポート、コマンド一発でデプロイ。Firebase Summit 2022
Googleの「Firebase Hosting」がNext.jsとAngular Universalによる動的Webサイトもサポート、コマンド一発でデプロイ。Firebase Summit 2022 Googleは10月18日に米ニューヨークでモバイル向けのバックエンドサービスであるFirebaseにフォーカスしたイベント「Firebase Summit 2022」を開催しました。 このイベントでGoogleは、これまで静的なWebサイトのホスティングサービスだったFirebase Hostingの新機能として、Next.jsとAngular Universalを用いたサーバサイドレンダリングによる動的なWebサイトにも対応することを発表しました。 これまでFirebase HostingでNext.jsやAngular Universalのようなサーバサイドレンダリングのためのフレーム
State of JavaScriptがこのほど、2019年におけるJavaScript関連の調査結果「The State of JavaScript 2019」を公開した。フロントエンドフレームワークとして注目されていたAngularだが、実際にはもう使わないと回答するユーザーの割合が2018年から増加しており、さらに今後学習するつもりもないと回答するユーザーの割合も多い。今後徐々に使用割合が減っていく可能性が見えてきている。 Angularユーザ意識割合推移グラフ - 資料: The State of JavaScript 一方、ReactとVue.jsは順調に使用率を伸ばしつつ、さらに今後学習していきたいというユーザーの割合も多い。今後、ReactとVue.jsはさらにユーザーが増える可能性がある。 Reactユーザ意識割合推移グラフ - 資料: The State of JavaS
はじめに はじめまして。 null です。最近の悩みは 2 歳半の息子が言うことを聞いてくださらないことです。 2 歳児もそうなのですが、 ソフトウェアフレームワークに振り回されてるって感じること、稀によくありませんか？？ ある程度の学習コストがかかるのは当然としても、冗長な書き方を要求されるわ、かゆいところに手が届かないわ、実データ投入したらパフォーマンス問題だらけだわ、バージョンアップしたら動かなくなるわで、あぁ私いま振り回されてるなぁ、みたいな。 「じゃあ使わなければいい」「じゃあ自分で作ればいい」という話ではなく、「必要以上には依存しない方が無難だよね」「フレームワークの外へ切り出せるところは切り出してみよう」という話をします。 続きを 3 行で 状態更新ロジックってフレームワーク非依存にできそうだよね でもフレームワークによって状態をイミュータブル（状態更新=状態オブジェクト生成
![[Web フロントエンド] 状態更新ロジックをフレームワークから独立させる - 株式会社カブク](https://cdn-ak-scissors.b.st-hatena.com/image/square/897d9c48832ba7e3a66c89a7941ffe151d3d8705/height=288;version=1;width=512/https%3A%2F%2Fwww.kabuku.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2019%2F05%2Fcut20_bunsin-1200x801.jpg)
ep.50 AngularJSからVue.js - 大型リニューアルの学び | UIT INSIDE
ゲスト紹介 @kimulacoさん フロントエンド開発センター UIT 1室 LINE GIFTのフロントエンドをメインに担当 リニューアルの背景 LINE GIFT 友達や自分宛てに、Eギフトやお取り寄せギフトを贈れるサービス 住所を知らない友達にギフトを送ることも可能 LINE アンケート ユーザーにアンケートを配信し、回答を受け付けるサービス リニューアル企画の進め方 GIFTとアンケートのリニューアル 似たような状況からのリニューアル AngularJS (Angular v1.x)からVue.js Grunt から Webpackやコードスプリットなどのビルド改善 リニューアルを始めたきっかけ GIFT リソースに余裕ができていた フロントエンドエンジニアから他のチームに推薦 アンケート 元々計画はあったがなかなか始められなかった はるさめさんが入ったことなどをきっかけに企画が動
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Storybook 6.1
Storybook is the industry standard UI component workshop. It organizes components and their states to structure UI development, testing, and documentation. It's used by teams at Twitter, Slack, Airbnb, Shopify, Stripe, and Microsoft. As Storybook grows in popularity, companies are building more components in it than ever before. Atomic components, full blown pages, and everything in between. Perfo
The Cost of Javascript Frameworks - Web Performance Consulting | TimKadlec.com
There is no faster (pun intended) way to slow down a site than to use a bunch of JavaScript. The thing about JavaScript is you end up paying a performance tax no less than four times: The cost of downloading the file on the network The cost of parsing and compiling the uncompressed file once downloaded The cost of executing the JavaScript The memory cost The combination is very expensive. And we a
schematicsを使っていつもの作業を効率化しよう! Reactのコンポーネント、テスト、ストーリーブックの作成をスキャッフォルドしてみた! 自己紹介 名前: 福田京平 github: hand-dot twitter: hand_dot よろしくお願いします！ はじめに Angular CLIで利用されているSchematics を使って、いつもの作業をいい感じに効率化できたので紹介させていただきます。 Angular CLIはこんな感じのやつです!使ったことある人は多いのではないでしょうか？ $ ng g component my-hero installing component create src/app/my-hero/my-hero.component.css create src/app/my-hero/my-hero.component.html create src
Angularはアップデートが盛んでワクワクしますね！ v8からめちゃめちゃ簡単にAngularアプリをPWA化できるようになったので試してみたいと思います。 Angular8のアップデート内容はこちらの記事でまとめられているので、参考にしてください。 Angular v8がリリースされました！バンドルサイズ削減され、新レンダリングエンジンIvyのプレビュー版が利用可能に！ PWAのメリット PWA（Progressive Web Apps） インストール不要 webプッシュ通知（Androidのみ） オフラインでの動作 ネイティブアプリに近いUI これによりUXを向上させることが期待できます！ また、PWA未対応のブラウザであっても、webアプリとしての動作は可能です。 ストアに上げる必要も無いのでアップデートの度に審査を通す必要もなく、開発の自由度も上がりますね。 PWA化に必要な作業
ある程度の文法のVue.js/Blazor/Angularにおいて同様の動作を実現するための方法についてまとめました。分離元 VueVsBlazorにソースコードをまとめています。 ちなみにVue.jsではTypeScriptを採用しています。 動作サンプルページ Vue.js Sample Blazor Sample Angular Sample 文法の比較 ここでのサンプルは全てルーター上の1ページとして表現しています。 土台となるルーターの実装例から順に比較していきます。 0. 最小のコンポーネント コンポーネントの内容はただのhtmlから可能です。
はじめに これは Angular Advent Calendar 2019 10日目の記事です。 こんにちは (｡･ω･｡) Angular と Firebase で CGM サービス（一般ユーザー投稿型サービス）を開発している者です。 早いもので、Angular Advent Calendar も 3 回目の参加となります。 例年ではなんとなく不吉な 4 日目をいただいていたのですが、今年も募集当日にエントリーしに行くと既に 9 割ほどの枠で参加表明があり、狙っていた？ 4 日目も埋まっていました。 （どこでも良いので他の人が嫌がる確率が高そうなところに入ったろの精神 今まで #1 しかなかったカレンダーが今年は勢いそのまま #2 まで誕生し、ここ 1 年での Angular コミュニティの成長を実感しています (ﾉﾟ∀ﾟ)ﾉ 小話はこの辺で... この記事では、約 2 年間 Angul
On the Chrome team, we care about user experience and a thriving web ecosystem. We want users to have the best possible experience on the web, not only with static documents but also when they use rich, highly-interactive applications. Open-source tools and frameworks play a large role in enabling developers to build modern apps for the web, while also supporting good developer experiences. These
Resource inlining in JavaScript frameworks | Aurora | Chrome for Developers
As part of project Aurora, Google has been working with popular web frameworks to ensure they perform well according to Core Web Vitals. Angular and Next.js have already landed font inlining, which is explained in the first part of this article. The second optimization we will cover is critical CSS inlining which is now enabled by default in Angular CLI and has a work in progress implementation in
Even though I work pretty much everyday with TypeScript there's something new I learn about frequently. I really enjoy working with it and try to get the most out of it whenever possible - and there's one thing for sure: TypeScript can do a lot of things. So here are some things I've learned through time which helped me to improve my applications and - ultimately - become a better TypeScript devel
AWS AmplifyとAngular8を使ってCognitoでAWS Management Consoleにログインするページを作ってみる | DevelopersIO
AWS AmplifyとAngular8を使ってCognitoでAWS Management Consoleにログインするページを作ってみる 今回のブログではブラウザで動かせるCognitoユーザープールのユーザーでAWSマネジメントコンソールにログインするページを作ります。 そのサイトをAWS AmplifyとAngular8で実装する例を紹介します。 先日、CognitoユーザープールのユーザーでAWSのマネジメントコンソールへフェデレーションログインする方法についてのブログを書きました。 そのブログではAWS CLIを使って、フェデレーションログイン用のURLを生成する方法を紹介していました。 今回のブログではブラウザで動かせるCognitoユーザープールのユーザーでAWSマネジメントコンソールにログインするページを作ります。 そのサイトをAWS AmplifyとAngular8で実
Classiのフロントエンドエキスパートチームのlacolacoです。最近AngularのプロジェクトでStorybookをベースにしたUIコンポーネントの画像回帰テストをはじめたので、この記事ではそのなかで学んだことを共有します。 画像回帰テスト 画像回帰テスト（visual regression testing）は、UIの見た目のバグを防ぐためのテストです。見た目はユニットテストのようにコードでテストするのが難しいため、画像回帰テストではその名の通りテストに画像を使用します。実際に描画されたUIを画像としてキャプチャして、ソースコードの変更前後での画像の差分から「見た目が変わっていないか」をテストできます。 最近では画像回帰テストをサポートするツールやSaaSなどさまざま出てきていますが、画像回帰テストをはじめるにあたっての問いはシンプルに次の2つだけです。 どのように画像をキャプチャ
本記事は、TechFeed Experts Night#4 〜 フロントエンドアーキテクチャを語るのセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 「これからのアプリケーション設計トレンド in Angular」ということで発表させていただきます。 私は AngularのGoogle Developer Expert をしております、@lacolacoといいます。Angular日本ユーザー会 の代表などもしており、ユーザー会では最近 discord をはじめました。Classiという会社で働いています。 今日お話するのは、AngularのStandalone-based appと、これからのAngularについてです。今日持ち帰っていただきたい
【超簡単】AngularでE2Eテストフレームワーク「Cypress」を使えるようにしてみる | DevelopersIO
どうも！大阪オフィスの西村祐二です。 Nxを使ってアプリケーションを作るとデフォルトでAngularのE2Eテストフレームワークが「Cypress」に置き換わって生成されます。 そこで、Cypressがとても使い勝手がよかったので、他のAngularプロジェクトでも使いたいなと思っていました。 調べてみると下記ライブラリを使うと簡単にCypressを使うことができましたので、その方法をご紹介したいと思います。 https://github.com/briebug/cypress-schematic 試してみる 環境 Angular CLI: 8.3.12 Node: 10.15.1 OS: darwin x64 Angular: ... Package Version ------------------------------------------------------ @angul
使ってみよう！Angular DevTools
Google Developers Expert for Angular / Angularコントリビューター / Angular日本ユーザー会代表 / jsprimer.net 共著
Webアプリケーションフレームワーク「Angular」の最新版となる「Angular 10」正式版がリリースされました。 今回のAngular 10は、前バージョンのAngular 9が2月にリリースされてから約4カ月という短い期間でリリースされたため、通常のメジャーバージョンアップよりも小さめの機能追加や変更になっています。 Version 10 is now available! Check out the new date range picker and the new tooling improvements. https://t.co/2ZPMdUYcI7 — Angular (@angular) June 25, 2020 対応するTypeScriptはバージョン3.9となり、TSLibはバージョン2.0、TSLintはバージョン6になりました。 新機能としては、Angula
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactやAngular、VueなどでComponentのスタイリング時に抑えておきたいこと
フロントエンドをAngularに一本化した話 - EmotionTechテックブログ
Ionicの全体像、React Native・Flutterとの比較 2020年5月 | Takumon Blog
Angular 9正式版リリース。高速かつ軽量なレンダリングエンジン「Ivy」がデフォルトに
Classiにフロントエンドエキスパートチームを作った話 - Classi開発者ブログ
AngularJSからVueへの置き換えを8ヶ月やってみて得られたこと - ANDPAD Tech Blog
中規模Angularアプリケーションの再設計
containerd & Lima: Open source alternative to Docker for Mac
JSXが実はベターな解だったのではないか？｜erukiti｜note
JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
ReactのSuspenseを使った非同期処理のエラーハンドリング
Angularを採用したプロダクトで表記ゆれを撲滅したはなし
Angular使いがReactでアプリ組んだらこうなった
JavaScriptフロントエンドフレームワーク、Angularの人気が下落中
[Web フロントエンド] 状態更新ロジックをフレームワークから独立させる - 株式会社カブク
大きく進化した「Angular」バージョン9、次世代レンダリングエンジン「Ivy」を中心に機能紹介
【開発を効率化しよう】Reactで実践！Schematics - Qiita
Angular
Angular8を使って爆速でPWAを作成する | DevelopersIO
Vue.js/Blazor/Angularの文法比較サンプル集 - Qiita
Angular と Firebase で月間PV1億超えの PWA を作った話 - Qiita
Introducing Aurora | Chrome for Developers
5 TypeScript tips to improve your applications
Googleの内部フレームワーク「Wiz」がついに公開、Angularと統合 ー 長年存在を示唆されてきた謎のフレームワーク
Angular+Storybookで画像回帰テストを小さくはじめる - Classi開発者ブログ
これからのAngularアプリケーション設計トレンド ー Standalone Components化は不可避
「Angular 10」正式リリース。TypeScript 3.9サポート