こんにちは！ 株式会社ココナラの法律相談事業部でWebエンジニアをしている 原井 です。 ココナラ法律相談 と ココナラエージェント という2つのプロダクトのWebフロントエンド・バックエンド開発を担当しています。 この記事は、フロントエンド開発に使うUIコンポーネントライブラリの技術選定をするシーンでのお話です。 私たちが何を課題に感じていたのか、どう考えて Radix UI と Stitches の採用に至ったのか、採用してみてどうだったのかをご紹介します。 UIコンポーネントを開発していて思うこと 世の中にはUIコンポーネント集とでも呼ぶべき便利なライブラリがたくさん公開されています。 例えば以下のようなものがあり、他にも把握しきれないほどあると思います。 MUI (Material UI) Ant Design Chakra UI Vuetify これらのUIコンポーネントライブラ
NestJS を使って最速リリースを目指している話 - ROBOT PAYMENT TECH-BLOG
こんにちは。ROBOT PAYMENTでエンジニアをやっております 牧野です。 今回は新規プロダクトの立ち上げに伴い開発言語からインフラ設計まで0→1でサービスリリースするのに必要な技術選定を行いました。 その際の選定理由や、実際に開発を進めていて得た所感などを書いてみたいと思います。 私は主にバックエンド（フロントエンド以外）を中心に技術選定を行っためそちらを中心に書かせていただきます。 チーム規模 選定技術 TypeScript NestJS GraphQL PostgreSQL AWS App Runner まとめ チーム規模 バックエンドエンジニア2人 フロントエンドエンジニア1人 PM 1人 デザイナー1人 上記を１チームとして最短距離でリリースすべくスクラム開発を行なっています。 既存の請求管理ロボ開発においては、厳密ではないですがコンテナ運用や監視ツール、CICDなど機能開発
Web アプリケーション開発において TypeScript で型付けをして、 React, Vue, Angular などのフレームワークでビューを作り、 Webpack でバンドルする、という構成が当たり前のようになってから久しいですね。 フロントエンドアプリケーションの設計は洗練され、我々はまあまあ安全かつ開発しやすい環境でアプリケーションを作れるようになりました。 ところでみなさんはその開発環境の構築にどれだけのコストをかけていますか？ 新規プロダクトを作るたびに最適な Webpack の設定ファイルを作るために苦心して、気づけばその肉体にゴリゴリのウェブパッ筋を宿していませんか？ 賢い人はスターターボイラープレート的なものを自分で用意しているかもしれません。 だけどそれも頻繁な依存ライブラリのアップデートに合わせるために常にメンテナンスが必要となります。カビの生えないボイラープレー
GitHub - supertokens/supertokens-core: Open source alternative to Auth0 / Firebase Auth / AWS Cognito
Add secure login and session management to your apps. SDKs available for popular languages and front-end frameworks e.g. Node.js, Go, Python, React.js, React Native, Vanilla JS, etc. Supertokens architecture is optimized to add secure authentication for your users without compromising on user and developer experience Three building blocks of SuperTokens architecture Frontend SDK: Manages session t
はじめに こんにちは。Magic Momentでエンジニアをしている伊藤です。 いつもはMagic MomentのプロダクトであるMagic Moment Playbookの開発に携わっています。 元々はGo言語エンジニアとしてMagic Moment Playbookのバックエンド開発に参加し始めました。 ですが、今回フロントエンドエンジニアとしてフロント側の開発に参加することとなりました。 Go言語を使っていたエンジニアがReactを使い始めて驚いたこと、理解しづらかった部分などを書いていこうと思います。 これからフロントをやってみたいと思うバックエンドエンジニアの方の参考になれば幸いです。 そもそもReact.jsとは Magic Moment PlaybookのフロントエンドはReact.jsを使って構築されていますが、そもそもReactとはなんなのでしょうか。 ReactはFac
さまざまなヤフーの独自技術や業界の最先端テクノロジーに触れ、関西圏のクリエイターの成長を目的とした「Mix Leap Study」。テーマは、「React とその仲間たち」です。 登壇するのは、OptinMailPFを運用・開発するエンジニアの西仲幸太氏。内容は、家計簿アプリをReact Nativeを駆使して作成したことについて。今回は、特にReduxとFirebaseについて詳しく説明しました。関連資料はこちら。 家計簿アプリ制作の理由 西仲幸太氏：僕からは『React Nativeで家計簿アプリを作って得たもの』について共有します。 まず自己紹介を。西仲幸太と言います。担当プロダクトはメール配信管理プラットフォームというバリバリのバックエンドです。好きな言語はJavaScriptで、今回の話にも出てくるReact.jsやNode.jsをTypeScriptで書くのにハマっています。
この記事は？ 著者はReactを軸に開発をおこなってきたが、仕事の関係でVueをやることになって「emit」周りの理解が難しく、調べてもなかなかわかりづらかったので改めて記事にすることにした。 対象読者 ・Vueのemitを使う理由がわからない人 ・Vue3•TSでのemitを使い方を知りたい人 Vueの基礎(復習) この記事では以下のようなことがわかることは前提にしています。 ・ref/reactive 値が監視され、変更が検知される状態のことをリアクティブといい、refはプリミティブな値をリアクティブにし、reactiveはObjectの値をリアクティブした変数を作る。 ・props Vueでは親から個コンポーネントにpropsを経由して情報を渡す。 ・v-model Vueではデータの変更とViewが同期する双方向バインディングを提供しており、v-modelを使って変数と入力フォーム
話題の「Recoil」を使ってTodoアプリ作ってみた with TypeScript - Qiita
はじめに Facebook公式から新しいステート管理のためのライブラリが公開されました。 その名もRecoilです。 特徴としては ミニマム Hooksではお馴染みのuseStateと同じようなAPI パフォーマンス問題が解決できる(Viewの再レンダリングを抑える) が挙げられるかと思います。 早速Todoアプリを作ってみましょう。 環境構築 $ npx create-react-app todo-recoil --typescript $ cd todo-recoil $ yarn add recoil 型定義しておく 意気揚々とTSで始めようとしましたが、型定義ファイルは2020/05/15 10時現在は無いようです。 ですが、TS supportがIssueで上がっていて、既に予定しているようです。 有志が型定義ファイルを作ってくださったみたいなので、今回はとりあえずそれを利用させ
技術力を底上げする、Sansanの社内勉強会補助制度 - Sansan Tech Blog
Sansan事業部プロダクト開発部の基盤チームに所属する佐藤です。Sansanでは社員が自発的に開催する社内勉強会で会社からの支援を受けることができ、月に50種類以上の勉強会が開催されています*1。各勉強会は単発のものもありますが、週に1回、1～2ヶ月継続して開催されているものが多く、中には1年半以上続いている勉強会もあります。 今回は、社内勉強会を支える制度「Geek Seek Workshop」について紹介しつつ、社内で行われている勉強会から分野や目的の異なるものをピックアップして紹介し、Sansan社内の勉強会の雰囲気や参加によるメリットを参加者の立場から多面的に伝えたいと思います。人事制度に携わる人間ではありませんが、制度を用いた社内の技術力向上のアイデアの種になれれば嬉しいです。 Geek Seek Workshop 1人あたり1000円の補助が出る 申請のハードルが低いから開催
Follow on FacebookThis is a comprehensive tutorial on Monorepos in JavaScript/TypeScript --- which is using state of the art tools for these kind of architectures in frontend applications. You will learn about the following topics from this tutorial: What is a monorepo?How to structure a monorepo architecture?How to create a monorepo?Which tools to use for a monorepo?How to perform versioning in a
サイバーエージェントメディア事業部のメンバーが、Flutter・Kotlin Multiplatform を中心に、開発の中でのTipsを紹介する「Flutter × Kotlin Multiplatform by CyberAgent #1」。ここで伊藤氏が『読解Flutter Hooks』をテーマに登壇。Hooksの動きについて紹介します。 Hooksの動きを理解する Kyohei Ito氏：「読解Flutter Hooks」というタイトルで、発表します。簡単に自己紹介です。伊藤恭平と言います。GitHubやTwitterでは、KyoheiG3という名前で活動しています。主にiOSのアプリの開発をやっていますが、だいたい4、5ヶ月くらい前からFlutterをやり始めました。 今日の内容ですが、Hooksの使い方などはやらずに、Hooksの動きを理解するところを目標にしようかと思っていま
チャート描画ライブラリ『Plotly』をPythonで試す：インストール＆環境設定編 | DevelopersIO
データアナリティクス事業本部 サービスソリューション部 サービス開発部のしんやです。 ここまで色々な可視化におけるツールやサービスを個人的に触ってきましたが、何らかの言語でサクッとデータを可視化出来るライブラリとかないものかなーと思っていたところ、『Plotly』というプロダクトの存在を知りました。ザッと内容を確認してみたところとっつき易さと表現の幅の広さが良い感じっぽいぞ！ということで個人的にこのプロダクトを触っていってみようと思います。 ? Announcing Plotly.js 2.0! - Graphing Library / Plotly.js - Plotly Community Forum Webブラウザ上でグラフを描画できる「Plotly.js 2.0」がリリース：CodeZine（コードジン） 目次 Plotly 概要 Plotlyとは Dashとは 環境構築 導入環境
Snowpack vs. webpack: A build tool comparison - LogRocket Blog
LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns. Editor’s note: This post was updated on 14 March 2022 to include information relevant to Snowpack v3 and webpack v5. Few tools have been as central and important to the JavaScript ecosystem as webpack. Launched in 2012, the JavaScript module bundler has been a cornerstone of modern JavaScript
ブログを作りながら学ぶ、Next.jsの便利な5つのコンポーネント（Link、Image、Head、Script、レイアウト）
この連載では、現在注目のWebホスティングサービス「Vercel」をご紹介します。本記事から2回にわたって、「Next.js」の便利な9つの機能をご紹介します。今回は、「Linkコンポーネント」「Imageコンポーネント」「Headコンポーネント」「Scriptコンポーネント」「レイアウトコンポーネント」の5つのコンポーネントを紹介します。 はじめに 前回はNext.jsアプリケーションをVercelにデプロイする方法や、一緒に活用する利点などを紹介しました。今回から2回にわたって、Next.jsの便利な機能を紹介しながら、簡単なブログを表示するアプリを作成していきます。 この記事は既になんらかのプログラミング言語やWebフレームワークを学習した経験がある人向けに書いています。サンプルコードを提供しますので、サンプルコードを実際に動かしていただくことでより理解が深まると考えています。 自身
【2024年版】JavaScriptのおすすめライブラリ＆フレームワーク40選 JavaScriptのライブラリやフレームワークを使うことで、幅広い特徴と機能により、ウェブサイトやアプリケーションの開発が容易になります。これを可能にしているのが、JavaScriptの動的で柔軟であるという特性でしょう。2020年に実施されたStackOverflowの調査によると、JavaScriptは回答者の67.7%が使用しており、最もよく使われているプログラミング言語として記録を更新（8年目）しています。 その汎用性の高さから、バックエンドとフロントエンド両方の開発やテストに利用できます。その結果、さまざまな目的に対応する数多くのJavaScriptライブラリやフレームワークを見つけることができます。それゆえに、プロジェクトでどれを利用すべきかと迷ってしまうこともあるでしょう。 しかし、心配はご無用
Announcing Sandpack 2.0 and a Node.js runtime for any browser
Today, we are announcing Sandpack 2.0, which introduces Nodebox—a fast Node.js runtime that allows you to run server-side code in any browser. One year ago, we introduced Sandpack, an open-source in-browser bundler that allows you to run live running code examples on your website. We couldn’t have made a better decision. We knew how powerful Sandpack is (it's the bundler that powers CodeSandbox it
この記事でできるもの デモ https://react-pokemon-app-c3d8a.firebaseapp.com/ ※画像は非表示にしています ソースコード https://github.com/hato-taka/pokemon-app はじめに この記事の目的は React開発の楽しさを伝えることです！ 詳しい内部のロジックには触れていません。 楽しく学んでもらうために、PokeAPIというポケモンデータを集めたAPIを使用します。 https://pokeapi.co/ この記事を作成するにあたり下記２つの動画を参照しました。 【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座 Build Pokemon App Using React Js |Pokemon Api |2022 記事の対象者 Reactの
Yash Tiwari for Coursesity Posted on Jun 13, 2021 • Updated on Mar 23, 2023 React is a JavaScript library that lets you create a prime UI for both mobile and web applications. It integrates seamlessly with other JavaScript frameworks and libraries and includes small, reusable pieces of code, called components. Due to their high modularity, React component libraries not only optimize UI development
React with Typescript
At present react js has been a very popular library to build beautiful and scalable user interfaces. Today I would like to build a demo react project with typescript. Project setup We would like to use the create-react-app environment built by facebook developer team to create our project. Our project will have a form to add favorite tv series and show the list. It will be a single page website. A
最も月単価の高いプログラミング言語は何か。IT人材の紹介事業を行うレバテック（東京都渋谷区）が2月13日に発表したランキングによると、1位は「Go」（平均月単価88万円／最高単価130万円）だった。2位には「Ruby」（平均月単価87万円／最高単価150万円）、3位には「Swift」（平均月単価86万円／最高単価200万円）が入った。 Goは米Googleが開発したプログラミング言語。レバテックは「動作が軽く、扱えるデータ量も多いためブロックチェーンや広告、ゲームなどスピードが求められる分野のサービス開発でよく使われている」と解説。スピーディーな開発を行いたい企業を中心に導入が進み、今後も需要は伸びていくのではないかと予想している。 2位のRubyは、短期間で開発ができるため、スタートアップ企業などのWebサービスを迅速に立ち上げたい企業でよく使われているという。案件数は安定して多いが、R
はじめに VSCodeでのコーディング時にスニペットを使っている方はどれくらい居るのでしょうか。恐らくほとんどはプリセットに備わっているものか、適当な拡張機能をインストールしていると思われます。 自作する機能もありますが、少し前までは必要性を感じていませんでした。 できるだけ共通の環境に慣れておきたい 多数派に合わせておきたい タイピングとコーディングの能力があれば、少し構文が長くても苦痛ではない しかし、定型的に書くコードが決まっても手間が変わらないことに面倒臭さを感じていました。 そこで考えを改めてスニペットを作り込んしたら作業効率が飛躍的に上がりました。 なぜスニペットを自作した方がいいのか これ以降はJavaScript, TypeScript, React.jsの前提とします。 他言語の場合は当てはまらない可能性があります。 1. 拡張機能は網羅されていない かなりダウンロードさ
コードと向き合い組織と向き合い自分と向き合うこと (あるいはノハナからLayerXへ転職のご報告)｜Yuki Takeichi
インターネットにあこがれた何も知らない若者が東京に出てきてWebベンチャーに飛び込みもがきながら仕事をして経験したこと。思わぬ形でCTOになり、手探りでプロダクトと向き合い、ソフトウェアアーキテクチャと向き合い、組織と向き合い、人と向き合い、最後は自分と向き合う必要があることに気がついた。そして今は社会の大きな変化を感じ、今チャレンジしたい領域に思い切って飛び込んだ。 tl;dr こんにちは。エンジニアの武市融紀と申します。これまで株式会社ノハナでCTOをしておりましたが、この度1月末付で退職し3月1日にLayerXに入社しました。今日はこの場をお借りして少しだけ僕のこれまでのキャリアと今考えていることについて書こうと思います。 Webアプリケーションとインターネットに熱中した学生時代キャリアの始まりは、小4のとき家にISDN回線が引かれたことでした。HTMLとJavaScriptの本を買
ヘッドレスCMSの全体観を掴む | ヘッドレスCMSの本質
コンテンツ管理システムの歴史 なぜ、このような新しい性質を持つコンテンツ管理システム（CMS）が求められるようになったのでしょうか。その理由を知るためには、CMSの歴史と時代背景について知ることが一番の近道になります。 1990年代中頃: CMSの誕生 1990年にWorld Wide Webが登場してから、しばらくの間、WebサイトはHTMLの手動編集によってのみ管理されていました。しかし、次第にWebサイトの規模や複雑性が増していき、手作業でのコンテンツ管理が困難になります。 そして、1990年代中頃、HTMLの手動編集によるWebサイト運営の非効率を解消するためのソリューションとして、最初のCMSが登場します。この時、多くの企業が自作のカスタムCMSを作り、いくつかのエンタープライズ向けCMSも登場しました。 2000年代初頭: オープソース化による急速な普及 2000年代前半になる
「Offersエージェント」では、業界で活躍するプロフェッショナルがあなたの転職を徹底サポート。CxO経験者を含む現役エンジニア・デザイナー・プロダクトマネージャーが在籍し、職種に特化した専門的なアドバイスをご提供・非公開求人の紹介も可能です。 →【かんたん30秒】無料登録で転職相談する ▲イベント登壇時の写真 これまで本業の傍ら、フロントエンドの副業を複数受けてきました。今回はその経験から得られたものや、これから副業を検討される方に向けての注意点を紹介します。 まず私が副業を始めた理由は2つ。家賃を副業の収入でまかなえるようにすることと、本業では経験できないことに挑戦してスキルアップを図りたいと思ってのことでした。 副業を始めようと思った当時、私はクライアントワークをメインとしているWeb制作会社に所属していました。クライアントワーク自体は楽しかったのですが、納品して終わりという業務を
トップ ニュース 注目・速報 新着一覧 相場分析 プレスリリース 銘柄情報 BTC ETH SOL BNB ASTR OAS PLT XRP DOT ADA AVAX APT SUI XYM NEAR HBAR MATIC OP ARB AXS GMT SAND MANA ENJ GALA MONA DOGE SHIB BONK WIF RNDR LINK WLD GRT TON JUP 学習 時価総額ランクTOP10｜銘柄別の注目点 ビットコインの特徴｜投資メリット、リスク イーサリアムの特徴｜投資メリット、リスク 銘柄・テーマ別特集 レバレッジ取引｜ショート戦略の活用法 分散投資の考え方：仮想通貨投資家向け お得情報 ビットコインを無料で入手する方法5選 取引所キャンペーンで投資を始める ステーキングで仮想通貨を増やす 仮想通貨の貸し出しで利益を得る 求人 WebX ソラナ日本人エンジ
プログラミングを学ぶにあたって詰まったことと、そこから学んだこと - 我が名はなんとか菜である！
mizchi.hatenablog.com みんなも何に詰まったか、書いてみてください わかりました。 プログラミング歴 12歳 簡単にホームページを作れるみたいなサービスを使っていた僕は、なんかとりあえずサイトを賑やかにしたくて色々探していたら「ホームページの背景に雪を降らす」というやつがあり、そのときに出てきた JavaScript というものは一体なんぞや？というところから JavaScript というプログラミング言語を知った。で、プログラミング言語を使いこなすとゲームが作れると聞いて、ゲームばっかりやっていたクソガキの僕は、早速ブロック崩しの作り方を解説しているサイトを見ながら見様見真似で作った。完成はしなかった。（理由は後述） 挫折したあと、こんなものを見つけて、あ、これも JavaScript じゃん、ということで手を出してみたりもした。これは一応動いた。 nico.ms 中
HTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワーク・「Alpine.js」
Alpine.jsはHTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワークです vue.jsやreact.jsといったフレームワークのリアクティブ且つ宣言的な性質を低コストで提供してくれる、というもの 開発者はTailwind.cssのJS版のようなもの、と説明しています Alpine.jsでは13のディレクティブと、5のマジックプロパティと呼ばれるものを使う事が出来ます。Vue.jsとほぼ同じ機能を使える、という認識で良いと思います <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.10.1/dist/alpine.js" defer></script>↑ まずはスクリプトを読みこみます 試しに何か作ってみましょう <div x-data="{selected:null
BOXIL SaaSのフロントエンドをモノリポ構成 + Reactで仕切り直した話 - SMARTCAMP Engineer Blog
こんにちは!! スマートキャンプでエンジニアをしている吉永(@__GGEasy)です！ 自己紹介記事はこちら 前回の記事はこちら 私は現在、スマートキャンプの主力サービスであるBOXIL SaaSの開発にフロントエンド、バックエンド問わず携わっています。 今回は、弊社で新規サービスとしてリリースしたBOXIL SaaS質問箱(以下SaaS質問箱)にて、React.js(以下React)を私の主導で採用しました。 この記事では、フロントエンド整備に至った経緯や、今後のBOXIL SaaSにおけるフロントエンドの技術的な展望についてお話します。 BOXIL SaaSのフロントエンドで抱えていた課題感 さまざまな技術が同居している Vue + Atomic Designでの課題 構成変更の検討 どのようにフロントエンド構成を整備したのか SaaS質問箱のフロントエンド技術選定 React + T
iOSエンジニア歴も早5年目となりました。 その経験を活かして、iOSアプリのテスト自動化サービス「SmartQA」を作りました！ 今回の開発では、Firebaseが大活躍してくれました。 SmartQAをリリースする上で、AppiumやFirebaseの技術的な知見をここに残せたらと思います。 概要 SmartQA - E2Eテスト自動化をノーコードで ビルドをアップロードするだけで、ブラウザ上で簡単にテストの自動化ができます。 UIが変わってしまった場合でも、要素探索を自動で修復してくれます。 複数端末対応しているので、「iPhone SEやiPadだとクラッシュしてしまった」なんてことも検知できます。 現在はiOSアプリのみ対応しております。 私について 10歳の頃にアセンブリに出会ったのがきっかけで、プログラミングの世界にのめり込みました。 どんなプログラムも足し算・引き算・比較・
デザインチーム内でJavaScript勉強会を開催した話 - 弁護士ドットコム株式会社 Creators’ blog
こんにちは。弁護士ドットコム デザイン部の林（@taka_piya ）です。普段は弁護士向けの業務システムのデザインをしています。 10月から3月まで週1回、デザイン部内でJavaScript勉強会を開催しました。この記事ではその具体的な内容と成果、振り返り、頂いたフィードバックをご紹介します。ぜひ社内勉強会のネタに！ JavaScript勉強会をはじめたきっかけ （1）作るプロトタイプの幅が広がる （2）漏れのないUI設計ができるようになる 勉強会の内容 基礎編 基本を一歩ずつ学ぶ 身近なお題を取り入れた演習をやる 周辺知識にも触れる 応用編 （１）Vue.jsの基本を学ぶ （2）作りたいミニアプリを構想から実装まで一人で作る 成果発表会 みんなのミニアプリを紹介 どのような成果が生まれたか 改善点 想定した期間より長くなってしまった 途中からレベル差が生まれてしまった 双方向のコミュニ
April 25, 2022 Four Eras of JavaScript Frameworks April 25, 2022 I started coding primarily in JavaScript back in 2012. I had built a PHP app for a local business from the ground up, a basic CMS and website, and they decided that they wanted to rewrite it and add a bunch of features. The manager of the project wanted me to use .NET, partially because it’s what he knew, but also because he wanted i
今お世話になっているスタートアップの会社さんで、フロントエンドのVue2アプリケーションをマイクロフロントエンド化しました。 今後、Vue.jsを取り巻く環境が急激に変わった場合を想定し、React.jsもしくはVue3にアップデートしていくために、マイクロフロントエンドアーキテクチャを採用しました。 圧倒的な速度で進化していくフロントエンドのツールおよびライブラリ、これら全てにキャッチアップをして、技術的負債を取り除いていくためには、すでにマイクロフロントエンド以外の選択肢を除いてないと思います。 今回紹介するicestarkを実際に使ってみた上で、より多くの人にこのicestarkを知ってほしい！と思ったので、まとめてみました。 ハンズオン記事はこちら: 更新履歴 Whyマイクロフロントエンド 今回はVue2.XからVue3.xのアップデートを漸進的に行うための決断でしたが、そもそもな
JSer.info #488 - TypeScript 3.9がリリースされました。 Announcing TypeScript 3.9 | TypeScript Promise.allの型推論がされています。 また3.9 β時点では導入される予定だったawaitedは問題が見つかったため、3.9時点では導入されないことになりました。 その他にはビルドパフォーマンスの改善、Type Errorとなることを期待する// @ts-expect-errorコメントの追加などが行われています。 JSへとコード変換における非互換な変更として、クラスのGetter/Setterをenumerable: trueに変換するのではなく、enumerable: falseに変換する変更が含まれています。 これは、ECMAScriptの仕様で定義されているのと同じ挙動で、Babelも同様の挙動です。 Type
はじめに 昨日今日と JSConf JP 2019 に参加してきたので、聴講したセッションの内容を紹介します。 本記事は Recruit Engineers Advent Calendar 2019 1日目の記事です。 JSConf JP 2019 とは JSConf JP は世界的な JavaScript Conference である JSConf の日本開催です。昨年まで日本Node.jsアソシエーションがNode学園祭として開催していた大規模JavaScript イベントが、Node.js に限らず JavaScript に関する内容のお祭りとして変化を遂げ、今年からJSConf JP となった形です。今年は、2019年11月30日、12月1日の二日間で開催されました。リクルートテクノロジーズは、イベントのプラチナスポンサーの１つです。 以下、公式ページからの引用です。 jsconf
Rails: webpack(er)に乗り換える25の理由（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: 25 reasons to switch to Webpack(er) - rossta.net 原文公開日: 2020/03/02 著者: I'm Ross Kaffenberger サイト: rossta.net webpack/Webpackerで使える有用なツールも本記事で多数紹介されています。 画像は元記事からの引用です。 最近こんなことをよく聞かれます。「webpackとかWebpackerで頑張る価値ってあるの？」 よい質問だと思います。そして私の短い回答は「イエス」です。 近年JavaScriptコミュニティにおける認知度が急上昇していることで、フロントエンド開発用のツール、開発エクスペリエンス、最適化に巨大なイノベーションが続いています。 Railsはかつて最前線に躍り出ていました。登場した当時のRailsアセッ
React+Redux環境に『Jest』と『 Enzyme』を導入し、フロントエンドでのテスト環境を構築しました - Zeals TECH BLOG
みなさんこんにちは！ Zealsでフロントエンドエンジニアとしてインターンをしている栂瀬といいます。 この度Zealsで、テスティングフレームワークのJestを導入しました！ 背景や導入にあたっての取り組みなど、何を行なったかを詳しくご紹介していきたいと思います！ Jest & Enzyme とは 背景 実際に動かしてみた 【準備】React Componentをテストしよう 実際のテストコードをご紹介 タグの有無をテスト イベントのテスト Reduxのテスト reducerのテスト テストコード勉強会 勉強会のコンテンツ：shallow is faster than mount ?? 検証結果 勉強会の成果 テスト導入のメリット 今後の展望 まとめ Jest & Enzyme とは JestとはFacebookが開発しており、細かい設定なしで簡単にフロントエンドのユニットテストを行うこと
こんにちは、技術部でバックエンドエンジニアをしている金子です。 某メーカから、エンジニアに転職して早3年が経ち、前回のブログからも1年が経ちました。 昨今のコロナ禍の影響で、皆さんも生活や仕事に影響が出ていると思います。 そんな中、5/1にロコガイドはテイクアウト・デリバリー情報サービス「トクバイ テイクアウト」をリリースしました。 「トクバイ テイクアウト」とは? まず、作成したサービスの紹介をさせてください。 トクバイ テイクアウトはご自宅近くの テイクアウト情報を見つけることができるサービスです。 飲食店の店先貼り紙などの情報を、スマートフォン等を使って素早く・簡単に・無料で、情報検索することが可能です。 こちらから、ぜひお近くのテイクアウト情報をゲットしてみてください 🙏 サービス開始時は約1,000店からのスタートでしたが、現在(2020/08/07)時点で50,000件を超え
延べ年間1万人以上の参加者を集める、技術イベント集大成【RAKUS Tech Conference 2022を開催します】 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは、技術広報のyayawowoです。 株式会社ラクスは、継続して技術イベントを開催し日々の業務で培った技術コンテンツの発信を行っております。 有難いことに、connpass上で開催しているイベント参加者は、延べ年間1万人を超えており、多くのエンジニア/デザイナーの皆様からも反響をいただいております。 そして・・・今回ついに！ その集大成として2/8(火)に「RAKUS Tech Conference2022」を開催させていただきます！ ◆こんな方にオススメ！ ・ ラクスの開発における挑戦や現状の課題、今後のビジョンを知りたい方 ・ ラクスの開発組織戦略/インフラ戦略を知りたい方 ・ 新技術を取り入れたい方（フロンエンド分離,React.js,TypeScript,GraphQL) ・ レガシーシステムのバージョンアップ対応をされる方（PHP8,Laravel） ・ モダンな開発スタ
April 8, 2020 Today, we'll look at measuring React component render performance with the React Profiler API, measuring interactions with React's new experimental Interaction Tracing API and measuring custom metrics using the User Timing API. For demonstration purposes, we'll be using a Movie queueing app. The React Profiler API The React Profiler API measures renders and the cost of rendering to h
GitHub Actions の登場により GitHub Pages へのデプロイがとても簡単になりました。手順を書いた YAML ファイルを Push するだけでビルド・デプロイの CI/CD を構築できます。この記事では GitHub Actions を用いて GitHub Pages へのデプロイを自動化する方法を紹介します。 Hugo のブログ・サイトの場合 具体的には以下のような YAML ファイルをデフォルトブランチに .github/workflows/gh-pages.yml として Push するだけで GitHub Pages へのデプロイが始まり、サイトが公開されます。 name: GitHub Pages on: push: branches: - main # Set a branch name to trigger deployment pull_request
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ヘッドレスUIコンポーネントでいこう -- Radix UI + Stitches がいい感じ
Snowpack で実現する未来のフロントエンド開発 - Qiita
GoエンジニアがReactにチャレンジして驚いた5つのこと
「React Native」「Expo」「Firestore」でアプリ開発を高速に バックエンドエンジニアが家計簿アプリを作ってみた
【Vue.js/TypeScript】 emitで理解するVue.jsの本質
Monorepos in JavaScript & TypeScript
Flutter Hooksで開発を便利に iOSアプリエンジニアが語る活用術
【2024年版】JavaScriptのおすすめライブラリ＆フレームワーク40選
【初学者歓迎🔰】 Reactでつくるポケモン図鑑📖 - Qiita
React Libraries To Use In 2023: 17 Top Picks
月単価の高いプログラミング言語ランキング 2位は「Ruby」で87万円、1位は？ レバテック調べ
【React】爆速コーディングが捗る自作スニペットのすすめ
Vue.js を使った副業のリアル。スタートアップでの働き方と注意点 | Offers Magazine
Solana Labs唯一の日本人エンジニアが語る、ソラナの魅力
【NoCode】5年目iOSエンジニアが、アプリのE2Eテスト自動化サービスを作った話 - Qiita
pzuraq | Four Eras of JavaScript Frameworks
マイクロフロントエンドフレームワークicestarkが最高すぎる件
2020-05-18のJS: TypeScript 3.9、Deno 1.0、Playwright 1.0
JSConf JP 2019 参加報告 - とろろこんぶろぐ
「トクバイ テイクアウト」を最速でリリースした話 - ロコガイド テックブログ
Profiling React.js Performance
GitHub Actions による GitHub Pages への自動デプロイ - Qiita