「jQueryはオワコン」「いや、jQueryは便利！」議論が行われるようになってから2年は経つでしょうか。Twitterを観測してると定期的に盛り上がるので、私なりにちゃんとまとめようと思います。 ちなみに結論を先に書いておくと ・ レンダリングブロックしない構成、かつ最新版を使おう ・ jQueryはいいものだけど、脱jQueryした方が手っ取り早い です。 1. 保守しないといけないサポートの切れたjQuery1, 2を使ってるけど、依存プラグインが動くかどうかわからないから最新版にアップデートしていないプロジェクトが散見されます。 jQuery1, 2 は、Officially End of Life（公式に廃止）が名言されてます。ですので、「jQuery におけるクロスサイトスクリプティングの脆弱性」みたいな報告も修正されていません。EOLのバージョンはやめましょう。 ちなみにj
OSSコントリビュータのススメ
こんにちは！株式会社ペライチでフロントエンドエンジニアをしている秋本です。 最近プライベートで OSS コントリビュートに挑戦しました。 その経験を元に以下をお話できればと思っています。 OSS コントリビュートのメリット 具体的なやり方 簡単な感想 背景 「OSS コントリビュート」と聞くと、何かすごい難しそうだなという印象があったのですが、選んだ issue が簡単だったこともあり、やってみた感想としては「意外といけるじゃん！」でした。 もちろん中には非常に難易度の高い issue も存在しますが、それはつよつよエンジニアに任せましょう。 軽微なバグや、少しの修正で解消する issue もあるので、「OSS に貢献したい！」という気持ちが少しでもある方は挑戦してみることをオススメします。 今回私が挑戦したのは、Vuetifyという Vue.js にマテリアルデザインを提供してくれるライ
こんにちは、メドピアCTO室 SREの侘美(たくみ)です。 普段はRails/Vue.js/terraform/Lambdaなどを書いています。 趣味は飼い猫と遊ぶことで、生傷が絶えません。 入社してから約半年間、Railsのプロジェクトで実装をしつつ、合間に開発環境の改善をいろいろとやってきました。けっこうな分量となったので、紹介したいと思います。 なお、本記事で扱う開発環境とは下記2つを指すこととします。 ソースコードの修正/テストの実行/静的解析の実行環境 サービスを起動し、ブラウザでデバッグする環境 特徴 主な改善対象である、「MedPeer」サービスの特徴をご紹介します。 Ruby on Rails製 社内では最も巨大なRailsプロジェクト モデル数693 認証サービス、旧サービス(PHP製)と連携している 開発環境はDocker for Macを利用 コンテナ数は旧システム、
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいドキュメントに書かれていないComposition APIのコードの書き方とVuex vs provide/inject - Qiita
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいドキュメントに書かれていないComposition APIのコードの書き方とVuex vs provide/injectJavaScriptVue.jsフロントエンドVuexCompositionAPI まえがき 最近iCAREさんの所で Vue.js を一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回の記事の内容はiCareさんのDev Meetupで話した内容になります. 最近公式のソースを追った所、 Composition API はapiの紹介はあれども、コードの書き方やその背景、Tips等は全然見当たりませんでした. また、すごく強力なapiである provide/inject
RのWeb制作 Webサービス制作のための技術情報を。データ分析（Python、機械学習コンペ他）や自作野球ゲームMeisyoのこと中心。 最近、駆け出しエンジニアをTwitter上で数多く見るようになりました。 ただ、揃いも揃って「フロントエンドエンジニア」になりたい（意訳）とプロフィールに書いてあります。 なぜでしょうか。 それは何が問題なのでしょうか。 私が何を問題視しているかというと、フロントエンドエンジニアってそんなにコストパフォーマンス良くないぞ？ということです。 なぜなら、バックエンド等に比べて要求される技術の種類が多くなりがちであるからです。 そこで今回、給与や技術などの視点から、この原因を読み解いてみました。 ※すべてのベースとなる情報科学の知識については全く触れていません。 目次 給与 技術 目指してしまう理由 解決策 あとがき 給与 indeedをはじめ、リクナビネク
Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する - Qiita
この記事では、Web アプリケーションにおけるデータ取得（データフェッチング）やレンダリングに関する各手法について比較・整理することを目的として、特に最近注目度が高まっている Next.js における SSG（静的サイト生成）や ISR（インクリメンタル静的再生成）、それ以外の手法（SSR、CSR 等）を具体的なテーマとしてお話しします。 Twitter もやっているのでよかったらフォローおねがいします！ @_thesugar_ 記事内の解説は正確性を期すよう注意を払っておりますが、誤っている部分などがございましたらコメント欄や Twitter 等でご指摘ください はじめに Web アプリケーションを作るとき、レスポンスの速さをはじめとしたパフォーマンスの問題は開発者にとって大きな関心事となります。 たとえば、最近では Google が Core Web Vitals という Web のパ
「経年劣化に耐えるコード」というのは、だれもが目指すものでしょう。「そもそもフロントエンドのコードは、今ある技術で最良のものを書き捨てるべき」という意見も理解できますが「備えあれば憂いなし」ということもありますので、ここにメモを残します。あくまで、私なりのベストプラクティスですのでご了承ください。 5層に別れた SFC 私はレイヤーによる技術の分離で、ReactComponent の経年劣化に備えています。ここでいうSFCとは「Stateless Functional Component」の略称ではありません。Vue.js の文脈にある「Single File Component」を指します。 // (1) import層 import React from 'react' import styled from 'styled-components' // (2) Types層 type
今年3月に公開されたChrome 111とEdge 111にView Transitions APIが搭載されました。View Transitions APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用されている方も多いでしょう。View Transitions APIは、これらのアニメーション手段だけでは実現が困難だった新しい遷移アニメーションを実現できます。 本記事では「どのようなことができるか」「使い方」「使用上の注意点」を紹介します。 本記事で紹介すること View Transitions APIで実現できるのは新しい遷移アニメーション JavaScriptとCSSの指定で容易に
Denoのフロントエンド開発の動向【2021年春】
はじめに ここ最近、Denoのフロントエンド向けのエコシステムについて、色々試してみたり、調査などをしていました。 そこで、この記事では、2021年現在のDenoのフロントエンド開発の状況であったり、所感などについてまとめます。 フレームワークについて Node.jsにおけるフロントエンド開発では、以下のフレームワーク[1]が使われることが多いと思います。 React Vue.js Preact これらのフレームワークは、すでにDenoでも動作します。 またこれらをベースにしたフレームワークがいくつか開発されています。 Aleph.js Aleph.jsはNext.jsに影響を受けたReactベースのフレームワークです。 以下のような機能が提供されています: HMRをサポートするdevサーバを提供 ファイルシステムベースのルーティング SSR/SSGをサポート CSS Modules 開発
#フロントエンド #設計 #JavaScript 「1個の要素と複数個の要素を同じように書かせる」というのが実は jQuery の特徴の一つだと思っている。 document.querySelector() や querySelectorAll が出現して以降 jQuery の必要性はほとんどなくなったと言われる。 実際にこんなサイトもあるし https://youmightnotneedjquery.com/ これは実際その通り 一方、jQuery で書かれたコードを querySelector や querySelectorAll に移行しようとしたら苦しかったという経験をした人は多そう。 上のコードが下のようになる。 code:javascript $('.foo').on('click', e => { // ... }) Array.from(document.querySele
Simpacker: Rails と webpack をもっとシンプルにインテグレーションしたいのです - クックパッド開発者ブログ
技術部の外村（@hokaccha）です。Rails で webpack を使うためのシンプルな gem を作ったのでそれについて紹介します。 Webpacker Rails で webpack を利用した Web フロントエンドの環境を作る場合、最近では Webpacker が選択されることが多いでしょう。Rails 6 からは Webpacker が標準になることもあり、この流れはますます加速すると思われます。 私自身もこれまでいくつかのプロジェクトで Webpacker を利用してきました。Webpacker は webpack を Rails から簡単に利用でき非常に便利なのですが、使っているうちにいくつか不満な点がでてきました。 一番大きい問題として Webpacker が @rails/webpacker という npm パッケージに webpack の設定を隠蔽し、Webpac
「The State of JS 2021」公開。最も使われているフロントエンドのライブラリはReact、バックエンドはExpress、ビルドツールはwebpackなど
「The State of JS 2021」公開。最も使われているフロントエンドのライブラリはReact、バックエンドはExpress、ビルドツールはwebpackなど 回答者の国別分布を上位5位までを見ると米国が14％、ドイツが4.8％、ロシアが4.5％、フランスが4.2％、イギリス（UK）が4％となっており、日本の回答者は1.3％で15位、中国の回答者も1.3％でした。 一方、言語別では英語が70.1％と他を圧倒しており、2位がスペイン語で5.4％、ロシア語が5％、フランス語が3.3％、ドイツ語が2.3％、中国語、ポルトガル語、そして日本語が1％でした。 アンケートの結果は、ProxyやPromiseなどに関するJavaScriptの新機能がどのくらい使われているか、Service WorkerやWeb Audio API、WebGLなど新しいブラウザAPIがどのくらい使われているかや
Help us understand the problem. What is going on with this article? この記事は Angular #2 Advent Calendar 2019 3日目の記事です。 こんにちは、奥野賢太郎（ @okunokentaro ）です。今回は同日に公開された記事『フロントエンドフレームワーク選定前に知っておくべき Angular の 6 つの問題点と、それでも Angular を選ぶ理由』のアンサー記事として、筆者の考える問題点の克服方法、または誤解の解消、および自分がAngularを選ぶ理由を述べようかと思います。 特定のAPIの便利な使い方…とかよりは、もうちょっと視座の高い話になっています。また本稿内にてReactの言及が多いことについては、アンサー元の記事がReactを推しておられることに由来しており、それらの節で言及してい
前書き フロントエンドエンジニアの松原(@simezi9)です。 先日10月30日にクラウドワークスさんをお借りして実施したVue.jsの設計勉強会である、Vue.jsアーキテクチャリング勉強会 にて、 BASEの現在のVueコンポーネントの設計に関して登壇してお話してきました。 全体の資料はこちらです もともとBASEではVue.js+TSを採用した大規模なシステムのリニューアルプロジェクトが2018年からスタートしていました。それにあたっての大まかなフロントエンドの構築方針は以前もblogや外部登壇で発表していました。 次世代の管理画面を作るフロントエンドの取り組み - BASE開発チームブログ 次の5年を支えるVue.js製UIコンポーネントライブラリを育てる これまでの発表では大枠の技術スタックやワークフローの話が多かったですが、 今回はVueコンポーネントの設計が勉強会の主眼にあ
サーバーサイドエンジニアがじっくり学ぶVue.jsチュートリアル【1. Installation】 | DevelopersIO
こんにちは。DA事業本部の春田です。 普段の業務では全く扱わないフロントエンドの世界に飛び込んでみたいと思います。最近3系が登場しましたがまだ情報が少ないので、2系のチュートリアルを進めていきます。サンドウィッチマンでいう「ちょっと何言ってるかわからない」ポイントは、その都度調べていきます。英語版の公式ドキュメントがベースです。 今回は、一番最初のInstallationです。 はじめに 互換性の注意 最初のセクションは「互換性の注意」についてです。ECMAScript 5とun-shimmableが、早速「ちょっと何言ってるかわからない」ポイントだったので調べてみました。 Vue.js uses ECMAScript 5 features that are un-shimmable in IE8 ECMAScript5は2009年にリリースされたJavaScriptの標準仕様のことで、プ
株式会社ラクスが開催するエンジニア向けのイベント「RAKUS Meetup」。今回は「SaaS新規プロダクトの技術」をテーマに、同社プロダクト「楽楽労務」の開発を担当する福岡憲治氏が登壇し、「新規プロダクトの開発速度と品質の両立を支える自動テスト」という内容で話をしました。 新規プロダクトならではの悩み 福岡憲治氏（以下、福岡）：それでは『新規プロダクトの開発速度と品質の両立を支える自動テスト』というタイトルで福岡が発表いたします。お願いします。 ではいきなりですが、まずはじめに、新規プロダクトとタイトルに入っているとおり、新規プロダクトならではの悩みについて、簡単にお話しできればと思います。 まず1つ目、ドメインに対する理解が不十分だったり、アジャイルに機能開発していくので、作り直しが発生します。あるいは、新規プロダクトである程度できあがってくると、チームメンバーを増員することになります
【Team & Project】LINEのユーザ向けサービスのWebフロントエンドを開発しているチームを紹介します
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog LINEの開発組織のそれぞれの部門やプロジェクトについて、その役割や体制、技術スタック、今後の課題やロードマップなどを具体的に紹介していく「Team & Project」シリーズ。 今回は、フロントエンド開発組織の中で、ユーザ向けサービスのWebフロントエンドを担当しているチームについて紹介します。フロントエンド開発センターの清水大輔、縣亮太、折原レオナルド賢に話を聞きました。 ユーザ向けサービスのWebフロントエンドを担当しているチームのzoom会議の様子 ―― まず、自己紹介をお願いします。 清水：システム開発会社で図書館システムや金融・物流の開発などを担当した後、2009年5月にネイバージャパン（現LINE）にフロントエ
はじめに Vue.jsは、Webページのユーザーインタフェース（UI）を構築できるフレームワークです。2015年のバージョン1（Vue 1）、2016年のバージョン2（Vue 2）に続き、バージョン3（Vue 3）が開発中で、2020年第2四半期にリリース予定です。 本記事では、全2回にわたって、Vue 3の新機能を紹介していきます。今回は、Vue 3で導入されるコンポーネントの新しい記述形式「Composition API」を説明していきます。 対象読者 Vue 3の概要を把握したい方 新しいライブラリーを試してみたい方 これからVue.jsをプロジェクトに採用する予定の方 必要な環境の準備 本記事のサンプルコードは、以下の環境で動作を確認しています。 Windows 10 64bit版 Node.js v10.18.1 64bit版 Vue.js 3.0.0-beta.15 Vue C
「レスポンシブにすればPCサイトと同じ工数でPCにもスマホにも両方対応できるよね?」 - エムスリーテックブログ
できません。 こんにちは、エムスリーエンジニアリンググループの福林 (@fukubaya) です。 中村の記事で宣言したDocpediaの技術的チャレンジの記事も今回で最後です*1。 今回は、PCページとスマートフォンページで共通的に使用できるVue.jsコンポーネントをどうやったら実現できるかを考えて実装した例を紹介します。 仙台サンプラザ（せんだいサンプラザ）は、仙台市都心部東側の宮城野通に面してあるホール・ホテル・会議室などの複合施設。本文には特に関係ありません。 なぜレスポンシブにしたいのか? PCとスマホで共通のコンポーネントを使って工数を減らしたい 実例 構成 エントリー router AppModePlugin PCとスマホで処理を切り替える PCとスマホでデザインを分ける We are hiring! なぜレスポンシブにしたいのか? 冒頭のタイトルは、直接こう言われたのでは
Open standards for building event-driven applications in the cloud
Tailwindcssとは https://tailwindcss.com/ CSSライブラリの一種。 BootstrapやBulmaのような他のCSSライブラリと異なり、 .btnや.cardといったコンポーネント系のクラスは定義されておらず、 <b>1つのスタイルのみを変更するユーティリティ系のクラスがたくさん詰まっている</b>のが特徴。 Tailwindcssで定義されているクラスの例: .font-bold { font-weight: 700; } .rounded { border-radius: .25rem; } .hidden { display: none; } この特性がWeb開発で一体どんな効果をもたらすのか？ Web開発ではおなじみのBootstrapと比較しながら学んでいこう。 Bootstrap vs Tailwindcss : ボタンの例 Bootstra
この記事では、Webデザインやグラフィックデザインの制作が捗る、公開されたばかりの最新便利オンラインツール、無料デザイン素材をまとめています。 これらのツールやサービスを利用すれば、デザイン制作で面倒な作業も手軽に、短時間で行うことができ、より効果的にプロジェクトを進めることができます。制作ワークフローに取り入れてみてはいかがでしょう。 ウェブ制作が捗る！便利すぎる最新オンラインツール、無料素材まとめ 404 Illustrations ウェブサイトの404ページで利用できる、ユニークでかわいいイラストを集めた無料デザイン素材キット。 Adobe XD 19 このアップデートでは大幅に機能が強化され、より使い勝手の良さを追求したプロトタイプツールとなりました。 Amadine Mac専用のベクター描画アプリで、Illustratorの代替ツールとしても利用できそう。無料トライアルも用意され
2022年5月1日 JavaScript, React Viteは2020年に発表されたフロントエンドのビルドツールです。最初「ヴァイト」と読んでたんですが、「ヴィート」と読むみたいですね。フランス語で「速い」という意味だそうです。絶賛Reactのお勉強中なので、ViteでReactの環境を作る流れを備忘録的にまとめておきます！ ↑私が10年以上利用している会計ソフト！ この記事は動画でも解説しています。動画派の方はぜひご覧ください！ Viteとは？ Viteを使えばベースのプログラムを予め準備しておいてくれているので、開発をすぐに始められるようになります。スターターキットとか、テンプレートみたいなものですね。他にも複数のファイルをひとつにまとめたり、SassをCSSに変換するなどの作業を爆速でできるようになります。 また、ファイルを保存すると同時に、確認画面も自動的に更新されます。ホット
Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話 - spacelyのブログ
はじめに 株式会社スペースリー フロントエンドエンジニアの宮坂と申します。 ふだんは3Dビューアやその編集画面のDOM部分をReactやVueで書きつつ、たまにフロントエンド開発環境構築おじさんとして他チームへ出しゃばったりして生きています。 今回はその環境構築に関わるところ、Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話を書きます。 レガシーを生かしつつアップグレードする苦労話としてニッチに刺されば幸いです。 経緯と背景 Vue 2 のEOLまで1年を切って スペースリーはサービスインから6年以上経つこともあり、技術スタックはプロジェクトによって新しいものもあれば、今となっては古いものもあります。 リリースから日が浅いパノラマ変換3Dプレイヤーは2023年6月時点でエンドユーザー向けの部分がReact 18で、事業者向けの部分
Vue.jsアプリケーション用のインタラクティブなアニメーションを簡単に実装できるコンポーネントを紹介します。 アニメーションはユーザーの操作をトリガーに動作し、マウスをはじめ、スクロール、ジェスチャー、ジャイロスコープ、オーディオもサポートしています。
技術顧問が語る最新Ruby on Rails/Vue.js iCARE Dev Meetup #12 で話すスライドです https://icare.connpass.com/event/183716/
こちらでVue.jsのプロジェクトを作成しておいてください。 今回のレッスンの全体像 今回のレッスンは、Vue.jsとFirebaseを連携させることが目的です。 Vue.jsとFirebaseが連携できれば、Vue.jsで作成した画面から、データをFirebaseに保存したり、引き出したり、消したり出来るようになります。 つまり、皆さんが想像する一般的なウェブサービスを作れます。 Firebaseとは？ Firebaseとは、Googleが提供するモバイル・Webアプリケーション開発プラットフォームです。 様々な便利なサービスを提供してくれていますが、今回はFirestoreと言う、データベースのサービスを利用します。 Firebaseのプロジェクトを作成 まずはFirebaseのアカウントを作成してください。 Firebase アカウントができたら「プロジェクトを追加」をクリックします
ウェブカツの今後の「稼ぎ方」について、ウェブカツで学習したプログラミング「以外」のことを使って考えてみた - アラサー女のゼロからエンジニア！ #ウェブカツ #斎藤和樹
こんにちは！うかつ(@ukaprog)です。 今話題の炎上系プログラミング学習スクール「ウェブカツ！！」の女性割引部員です。 現在卒業試験中。泣いても笑ってもあと40日ちょっとでウェブカツでのプログラミング学習は終了です。10/29強制退部となりました。文末に追記があります。 初心者向けオンラインプログラミング学習 | 【入門】初心者向けプログラミング学習スクール「ウェブカツ!!」 プログラミングスクールウェブカツ 公式ブログにおける著作権侵害問題 【勝手に妄想】ウェブカツ!!の今後の「稼ぎ方」 これまでのウェブカツ ウェブカツ がやろうとしていて、まだうまく回っていないこと 最近のウェブカツ 今後の妄想 余談・中盤まではやさしいよの件 妄想のまとめ あとがき 10月30日追記 「ウェブカツを卒業されてるんですか？ なら、大丈夫ですね。採用で。」 今後確実にそうなっていく。 ゆるい気持ちで
こんにちは。技術部クックパッドサービス基盤グループのkaorun343です。我々のチームでは レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 にて紹介したとおり、レシピサービスを Next.js ベースの新システムへと移行しています。今回はこの新システムの CSS の話 です。 背景 クックパッドのレシピサービスを Next.js と TypeScript で置き換えはじめた当初、CSS については Next.js に標準で組み込まれているCSS in JS ライブラリである styled-jsx を使っていました。プロジェクトが大きくなりはじめたタイミングで 「CSS の技術選定を考えなおしてもいいかもしれない」とチームの中で話し合い、改めて技術選定をしました。 技術選定 結論として、本システムでは CSS in JS ライブラリのem
スキーマファースト開発のためのOpenAPI（Swagger）設計規約 | フューチャー技術ブログ
はじめまして。TIG DXユニット 1の亀井です。 はじめに みなさん、Swagger使ってますか？ Swaggerや周辺ツールについては 某先輩の記事 にて丁寧に解説されていますので、 本記事では実際にSwaggerのスキーマ定義を設計していく上で取り決めた規約について書いてみたいと思います。 前提私が在籍しているプロジェクトでは、REST APIは golang でフロントエンドを Vue.js + TypeScript で構築しています。 短期間・高品質での構築を実現するためにSwaggerを設計ドキュメントとしてだけではなく、コード自動生成やモックサーバーに活用させることで徹底したスキーマファーストな開発を行ってきました。 というわけで、今回は下記のツールを利用することを前提として規約を作成しています。 go-swagger: Goアプリケーションのハンドラ、リクエスト/レスポンス
【実録】WordPressサイトをAWS+Laravel+Nuxtにフルリプレイスした話 - Qiita
概要 創業2期目のスタートアップ株式会社NoSchoolにて、WordPressで開発された自社サービスを、2ヶ月掛けてAWS+Laravel+Nuxt.jsにフルリプレイスした際の技術選定について書きます。 対象読者 Laravelを使ってみたい/使えるライブラリを一通り知りたい AWS構築の全体感を知りたい Nuxt.jsやVuetifyの使用感を知りたい WordPressを脱却したい 技術選定の背景 技術選定と言っても好きな技術を選べばいいというわけではありません。自社が持っている技術力、事業の状況によるところが大きいため、まずは背景としてそのあたりを説明していきます。 先に技術が気になる方はここは読み飛ばして、あとで戻ってきてください ①自社の技術力 CTO @mejileben NoSchoolは創業2期目で2019年6月現在、フルタイムメンバーが僕と社長しかいません。 そして
同じUIコンポーネントをCSSで静的に、Vue.jsやプレーンのJavaScriptで動的に実装する -Tailwind Starter Kit
最近のWebページやスマホアプリのUIでよく使用されるさまざまなコンポーネントをCSSで静的に、Vue.jsやReact.jsやプレーンのJavaScriptで動的に実装するためのコードをまとめたTailwind Starter Kitを紹介します。 CSSは分かるけど、Vue.jsやReact.jsは苦手という人にもよいと思います。 Tailwind Starter Kit Tailwind Starter Kit -GitHub Tailwind Starter Kitの特徴 Tailwind Starter Kitのデモ Tailwind Starter Kitの使い方 Tailwind Starter Kitの特徴 Tailwind Starter Kitは、WebページやスマホアプリのUIに使用するさまざまな静的・動的コンポーネントをTailwindCSSを使って簡単に実装できま
【GAS x Vue.js】JavaScript のみで今、家計簿をつくるとしたら【ハンズオン付き！】 - Qiita
【GAS x Vue.js】JavaScript のみで今、家計簿をつくるとしたら【ハンズオン付き！】JavaScriptGoogleAppsScriptVue.jsQiita夏祭り2020_パソナテック 「JavaScriptのみ」＆「無料」＆「サーバーレス」なスプレッドシートと連携した家計簿をつくる方法を考えてみました。 実際に家計簿アプリを作るハンズオン付きです！ ※こちらの記事は一部古い内容となっております。 Zennに投稿している本を更新していますので、よければこちらをご覧ください。 https://zenn.dev/matsu7089/books/gas-account-book なにを作ったの？ Web上でデータを登録すると、スプレッドシートに反映される家計簿アプリです。 実際のページはこちら。使い方は「家計簿アプリお試し方法」で説明します。 データ追加の他に、データ編集と
Merpay Advent Calendar 2021 の 8 日目はメルペイフロントエンドチーム の @tanakaworld がお送りします。 はじめに メルペイは金融サービスであり、品質の維持・向上に日々取り組んでいます。フロントエンドチームでは、約 2 年前からリグレッションテストの自動化に取り組み始め、直近の 1 年間はインテグレーションテストの自動化にもチャレンジしてきました。本記事ではメルペイフロントエンドチームに於けるテスト自動化の方針とその全体像について振り返ってみたいと思います。 フロントエンドプロダクトに関わるテストは次のものが挙げられます。これらをひとつずつ順番に見ていきたいと思います。 ユニットテスト インテグレーションテスト シナリオテスト リグレッションテスト テストの種類とそのカバレッジ対象 1. ユニットテスト ユニットテストは Jest を用いて、主に
Kyashで開発をしている@konifarです。 先日、KyashでCRE（Customer Reliability Engineering）の募集を開始しました。 open.talentio.com CRE*1って何ぞや？という人も多いですよね。仕事内容や募集要件は簡潔に記載していますが、もう少し現状の課題や働き方のイメージを伝えた方が興味を持ってもらいやすいと思うので、より噛み砕いて説明します。 言い換えると、「もっと多くの人に興味を持ってもらえるように詳しく解説するよ！興味がわいたら応募してくれ頼む！」という趣旨の記事です。よろしくお願いします。 なぜCREチームが必要か 募集ページの仕事内容を見てみましょう。 CRE（Customer Reliability Engineering）チームは顧客の信頼の最大化がミッションです。決済や送金サービスを開発・運営しているKyashでは、顧
万葉は Hotwire を推していきます！｜万葉
こんにちは、万葉で CEO & CTO をしている田中洸一です。 Rails 7 から標準になった Hotwire を、万葉では全社をあげて推していく事にしました！ この記事では、その事について詳しく書こうと思います。 モチベーション昨今、React や Vue.js をはじめとするフロントエンド技術が目覚ましく発展しています。新しい技術の盛り上がりは楽しく、喜ばしいことです。 しかしながら、ここ最近では、少しリッチな Web アプリケーションを作成しようと思うと、フロントエンドとバックエンドの2部隊が必要になることも多くなってきました。こうなると開発自体のコストや、その後の保守・運用のコストも多くかかりますし、関わる人が多くなるとコミュニケーションコストなども増えることになります。 「この中間くらい、程よくコストをかけて、ちょっとリッチな Web アプリケーションをつくる、そういう手段が
Speaker : Yuito Kawashima ( https://github.com/yuitokawashima ) at 「Vue.js v-tokyo Meetup #20」 https://vuejs-meetup.connpass.com/event/318066/
今日では、ほぼすべてのウェブサイトにアニメーションが使われていると言っても過言ではないでしょう。派手な3Dアニメーションから、UIのマイクロインタラクションまで、その物量や時間のスケールはさまざまです。 アニメーション技術もCSSやSVG、Canvasと多岐に渡り、こんな表現まで！？ と驚くようなものも増えました。 しかし、複雑なアニメーションになるほどコードは煩雑になり人間の手には負えなくなります。イメージはあるのに具現化できない！ そんな悔しい思いを抱えたまま諦めるしかないのでしょうか？ いえ、道具です。道具を使うのです。本記事ではイメージをダイレクトに表現する手段としてのアニメーションライブラリGSAP 3について紹介します。 本記事を読むことで、以下の知識が手に入ります ウェブにおけるアニメーションの重要性 アニメーションライブラリとは？ 強力なアニメーションライブラリGSAP 3
こんにちは。ZOZOTOWN開発本部 バックエンド1ブロックの山本です。普段はZOZOTOWNのバックエンドやマイクロサービスAPIなどの開発に携わっています。 ZOZOTOWNは膨大なデータを有しており、テーブルやカラムの数も膨大です。しかし、ER図やテーブル定義に関するドキュメントは手動で更新されていたため情報遅れが生じ、信頼性が低いものとなっていました。 本記事ではその問題を解決するための取り組み、「データカタログ作成プロジェクト」について紹介します。 目次 目次 データカタログとは Dataedo dbdocs 背景・目的 課題の解決手段 内製したソフトウェアのアーキテクチャと基本機能 ER図作成UI 利用実績に基づく仮想外部キーの作成、カーディナリティの推定 リレーションシップを持っているテーブルペアの洗い出し 1:N or 1:1の推定 0以上か1以上の推定 リレーションシップ
とほほのＷＷＷ入門
はじめに ご使用上の注意 (1) 主な更新履歴 (24) 管理者へのメール (1) 自己紹介 (1) 基本編 用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (400) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (39) TypeScript (1) Java (25) Perl (4) PHP (14) Ruby (11) Python (13) Go (
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
そろそろなぜjQueryを使うのが難しいのかをちゃんとまとめようと思う。｜榊原昌彦
半年間の開発環境の改善を振り返る - メドピア開発者ブログ
駆け出しエンジニアは本当にフロントエンドエンジニアを目指すべきなのか – RのWeb制作
経年劣化に耐える ReactComponent の書き方 - Qiita
View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA
jQueryは1個の要素と複数個の要素を同じように書かせる - fsubal
Angularでの開発を快適に進めるために知っておきたいこと - Qiita
BASEのVue.jsコンポーネントの設計について登壇してきました - BASEプロダクトチームブログ
“テストコードを書く文化”をどう形成していったか 開発速度と品質の両立を支える3つの「自動テスト」とは
新Vue.js「Vue 3」でコンポーネント実装法を大きく変える「Composition API」
CSS Architecture on Vue.js
Tailwindcssは素晴らしいという話 - GitPress.io
ウェブ制作が捗る！便利すぎる最新オンラインツール、無料素材56個まとめ
Vite + React で新規プロジェクトの開発環境を作ろう
便利なのが登場！Vue.jsでインタラクティブなアニメーションを簡単に実装できる軽量コンポーネント -Kinesis
Rails6.1で新しく入る機能について
FirebaseのセッティングとVue.jsプロジェクトに組み込む
レシピサービスのフロントエンドに CSS in JS を採用した話 - クックパッド開発者ブログ
メルペイフロントエンドのテスト自動化方針 | メルカリエンジニアリング
Kyashの現状の課題とCRE募集ページの解説 - Kyash Product Blog
HeadlessなUIライブラリを利用する価値
フロントエンドから始めるアニメーション 最強のライブラリGSAP3を手に入れよう - ICS MEDIA
データカタログを作成してZOZOTOWNデータベース定義をまとめた話 - ZOZO TECH BLOG