はじめに 昨日今日と 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
コミュニケーションでプロダクトを前へ。 アジャイル開発の現場から #1: フロントエンドエンジニア & デザイナー編 | SEEDS COMPANY (パーソルプロセス＆テクノロジー株式会社)
コミュニケーションでプロダクトを前へ。 アジャイル開発の現場から #1: フロントエンドエンジニア & デザイナー編 SEEDS COMPANYは新プロダクトx:eee を先日公式リリースしました。 （ニュースリリース：https://www.persol-pt.co.jp/news/2019/10/29/3977/） x:eeeは、アルバイト・パート採用の煩雑な業務をスマートフォンで カンタンに行うことができる、業界初のスマホ特化型のスマート採用支援ツール。登録無料で、飲食店の店長様などがスキマ時間にスマホのブラウザで利用することができます。 x:eeeの開発はアジャイルで行っており、エンジニアだけでなく、デザイナーや企画職も、ひとつのアジャイルチームとしてプロダクト開発を行っています。 x:eeeリリース記念として、wantedlyにて開発現場のリアルをお伝えします。 使いやすいUI・
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. GistPad 📘 GistPad is a Visual Studio Code extension that allows you to edit GitHub Gists and repositories from the comfort of your favorite editor. You can open, create, delete, fork and star gists and repositories, and then seamlessly begin editing files as if they were local, without ever cloning, pushing or pulli
これはno plan inc.の Advent Calendar 2022の3日目の記事です。 どうも〜！no plan株式会社 代表のおかむーです。 この記事では弊社の2023年からの取り組み技術スペックについて書かせていただきます。 (この記事は2022年12月時点でのことなので、時代の流れによっては異なることが予想されますので、そのつもりで見ていただければと思います) no plan株式会社の創業メンバー 元面白法人カヤック アプリエンジニア: おかむー(@okamu_ro) 元面白法人カヤック サーバーサイドエンジニア: セリヌンティウス(@_serununtius) のエンジニア2名で起業した会社になります。 現在はフリーランスエンジニアさん10~15名程度でやっています!! no plan株式会社について no plan株式会社は、ブロックチェーン技術、Webサイト開発、ネイテ
まだ完結していないシリーズの途中ではあるのですが、ちょっと早めに自分の備忘録としてまとめておきたかったので先にこちらを書いてしまいました。 相変わらずの文章量なのですが(ちゃんと読むのに15分は確実にかかります)、お時間ある方は読んでいただけると嬉しいです。そして、内容についてはまだ実験段階な部分が多いので、フィードバックを貰えると非常に助かります🙏 1.命名規則とコンポーネントの単位について命名規則とコンポーネントの単位はプロジェクトで使用される技術によって少し状況が変わってくるように思います。 そもそもコンポーネントという概念が開発にほぼ必要ない普通のWebサイトなどであれば、多少実装しにくいと思われるかもしれませんが、あまりデザイナー側が気にする事ではないかなとも思います。 ただ、今回はReact.jsやVue.jsなどのフレームワークを使ったWebアプリケーション/サービス、また
Next.jsとTypescriptが奏でるUniversal JSの世界 ~commmune を支えるアーキテクチャ~ - Commune Engineer Blog
commmuneとは？ アーキテクチャの全体像 概観 組織アーキテクチャ おもな要素技術のご紹介 バックエンド Express + Passport + Sequelize Cloud SQL（MySQL） nginx (Let's Encrypt) SendGrid Elasticsearch BigQuery imgix フロントエンド Next.js Redux redux-saga プロジェクト基盤 Typescript Circle CI Cloud Functions Cloud DNS （参考）Universal / Isomorphic JavaScript 1. 型定義ファイル、定数ファイルを楽に共有できる 2. 未知の領域への不安を和らげることができる APIサーバのアーキテクチャ commmuneとは？ 企業独自の「ユーザーコミュニティ」のカンタンな構築と、効果的な運
At Replit, our mission is to make programming more accessible. We provide people with free compute in the cloud so that they can build apps on any device. Among the most popular ways to create apps on the web today is React. Historically, however, React tooling has been slow on Replit. While the JavaScript ecosystem has produced excellent tools for professional developers, many of the most popular
tl;dr ブラウザで文字列を表示する場合画面幅に応じて自動で改行されることがあります。英文などは分かち書きされているためブラウザは単語の区切りなどで改行することができますが、和文は文節が明確ではなく単語の途中で改行されてしまうことがあります。 この記事では、ECMA402 の Intl.Segmenter を用いて和文を分かち書きし、ブラウザに改行可能箇所を教えることでより読みやすいレイアウトを目指します。 (2023/04/14 追記) NPM package として公開しました 🚀 背景 ラテン文字を使用する多くの言語では語と語が空白で区切られていますが(以降分かち書き)、通常、日本語や中国語は分かち書きされていません。 一般的なブラウザでは表示領域(横幅)に対して表示させたい文字列が一行に収まらない場合自動で改行するような挙動になっています。英語のように既に分かち書きされた文の場
フロントエンドとバックエンドを改めて整理する - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに みなさんこんにちは。フジサワです。 「フロントエンド」や「フロントエンドエンジニア」という単語を耳にするようになって久しいですが、自他共に認めるバックエンドエンジニアを出自に持つ私にとって フロントエンド界隈の移り変わりは激しく、追いかけるのもなかなか大変です。 そこで今回は、改めてフロントエンドとは、またフロントエンドエンジニアに必要なスキルとは、といったあたりを整理してみたいと思います。 フロントエンドエンジニアに興味を持ったものの、あまりよくわかっていないと言う方の参考になれば幸いです。 はじめに フロントエンドとは フロントエンドエンジニアとは バックエンドとは バックエンドエンジニアとは フロントエンドエンジニアが押さえておいた方が良い技術要素 フロントエンド基本三要素 パッケージマネージャ ビルドツール群 JavaScriptフレームワーク SPAと状態管理 WebC
こんにちは！はのめぐみです。キッチハイクというサービスでデザイナーをしています。 2019年9月19日に開催された React.js meetup #9 にて、デザインシステムをテーマに登壇しました。トークタイムとパネルディスカッションの2部構成で、私はイベント前半部分のトークを担当させていただきました。この記事は、そのフォローアップを含んだ紹介記事です。 スライド資料は全編公開しています 登壇テーマはデザインシステムを持たない組織の取り組み今回の React.js meetup では「デザインシステム」がイベントテーマでした。デザインシステムを持たない組織として、ふたつのテーマを軸にお話しました。 デザインシステムとは一般的には、ユーザーに一貫した体験を届けるために必要なものをすべて含んだ存在と言われています。 デザインシステムを支えるものは様々です。「原則」「形状」「実装」の3つに分類
2022-07-2221 年新卒入社エンジニアと座談会で振り返る新卒研修はじめにみなさん、こんにちは。エンジニアの新居です。 今回は 2021 年新卒入社のエンジニア 5 人に対し、新卒研修を終えてからこれまでにプロダクト開発業務を進めている中で、どのように新卒研修が活きているのかを振り返ってもらおうという座談会の様子をお送りしようと思います。 今までブログでお伝えしてきた新卒研修はメンター側の立場で書かれていましたが、当時メンティーだった 2021 年新卒メンバーの紹介をしながら、初めての試みとしてメンティー側はどのようなことを当時考えていたのかをお伝えできればと思います。 2021 年新卒入社メンバー紹介 (左から)筆者 / 内田さん / 高橋さん / 堀内さん / 佐々岡さん / 寺内さん 高橋さん医療プラットフォーム第一本部 プロダクト開発室 第二開発グループ所属。CLINICS
この記事は、Vue #2 Advent Calendar 2019の4日目。 @nagimaruxxxさんのフロントエンド開発をjQueryからVue.jsへ乗り換えたので比較してみるの次の記事です。 この記事でわかること jQueryからVue.jsにはじめて移行したとき、「thisのなんちゃらを書き換えると動くんだー！」とか「computedって、依存する値が更新されたら自動で更新されてすごい！」というのが感想でした。 今回は、vue-nextという、いわば、「次世代のvue」でそういった「自動で更新されてすごい」がどのように実装されているか、を解説します。 普段Vue.jsを使っている人は、その裏の仕組みに感銘を受けるでしょう。日々の実装を少しだけ、いつもと違う視点で見れるようになると思います。 普段React.jsを使っている人はきっと、Vue.jsを使いたくなることでしょう。 皆
はじめにはじめまして、2019年4月入社の丸野です。フロントエンドでシステム開発を2年半続けてハマったことから得た教訓3つ の記事を書いた柏木さんと同じチームに所属しています。 研修修了後PJにアサインされて約4ヶ月ほどReact.jsを使って開発を行ってきましたが、Reduxの理解にとても苦しみました。そこで今回はReduxの概要を噛み砕いて説明していきます。同じ悩みを持つ人の理解の助けになればと思います。 (Redux公式ドキュメントはこちらです。) 開発で使用している技術要素 React.js（16.4.1） Redux（3.7.2） そもそもReduxって何かReduxとは、React.jsで使用するstateつまりアプリケーションの状態を管理するフレームワークです 簡単にReduxの概念の下記に図式化してみました State：アプリケーションの状態 Action：ユーザーが何押し
React is easily one of the single most popular libraries in use today. Given that it was made within a juggernaut like Facebook, you might have assumed it was always destined for success. But what if we told you that React’s first brush with the public sphere was anything but glamorous? React.js: The Documentary brings you the full story behind the early days of React, focusing on the dedicated gr
Ruby on Rails: The DocumentaryはRuby on Railsの誕生に纏わる44分のドキュメンタリー映像作品。 37signalsの関係者やShopifyのTobias LütkeなどのRailsコアチームの人々のインタビューが中心 www.youtube.com JasonとDavidの出会いからRailsの誕生、広く普及するまでを駆け足でおさらいした。React.js: The Documentaryなんやと比べるとあっさり目な内容。 僕も含め、周りでは「How to build a blog in 15 minutes with Rails」の動画でRailsを知った人が多くて、その動画も出てきて懐しかった。 www.youtube.com 中盤で触れられてる「RailsはスケールしないFUD」な話も、Rubyが遅いとかエンプラには早いとか色々評価があったと
2019年1月31日、React.js meetupが主催するイベント、「React.js meetup #6」が開催されました。ReactにまつわるさまざまなテーマでLTを行う本イベント。様々な知見を持ったエンジニアたちが、自身の経験などをもとに発表を行います。プレゼンテーション「読みやすいコードの書き方のススメ」に登壇したのは、わたなべゆう氏。講演資料はこちら 読みやすいコードの書き方のススメ わたなべゆう氏：こんばんは。わたなべゆうと言います。今日は「読みやすいコードの書き方のススメ」ということで、読みやすいかどうかを気をつけていこうという内容のLTとなっております。 （スライドを指して）こちらが概要で、あとで見ていただければと思います。ちなみに先ほどTwitterのハッシュタグと、connpassの管理ページにもスライドのURLを貼っておいたので、もしよろしければあわせてご覧にな
« mongoose ウェブサーバと TensorFlow Lite を使った Object Detection API サーバを書いた。 | Main | Microsoft Word を Markdown に変換するコマンド「docx2md」を作った。 » 「.NET Core 3.0」正式版が登場。Windowsデスクトップアプリ開発可能、exeファイルを生成、マイクロサービス対応など － Publickey 最新記事10本 Kafka開発元のConfluentに聞いた。エンタープライズ市場への道筋、大手クラウドとの現在の関係について 最大32コアのAMD EPYCプロセッサを搭載、コストパフォーマンスを高... https://www.publickey1.jp/blog/19/net_core_30windowsexe.html これまで通り、dotnet コマンドで SDK テ
※本記事はWordPress自体を否定しているのではなく、WordPressを使ったメディア開発が一般的なSPA開発に比べてDX（開発体験）が悪いので、フロントエンドエンジニアとしてはそういった現場を減らしていきたいという気持ちがあります。WordPress大好きな方や、今後も当分WordPressを生業として行くつもりな方はもしかしたら気分悪いかもしれないので回れ右してください。 ※フロントエンドエンジニアと一口に言ってもデザイナー的な人もWebpack職人も色々いるので、その中でも特にSPA開発に特化している人を一旦この記事内ではSPAエンジニアと呼びます。でも別に一般的なワードじゃないのでこの記事以外では呼ばんぞ はじめに WordPressは世界のサイトの30%以上で使われているらしい。シェアすごい！ 昨今の"Webメディア開発に携わるSPAエンジニア"の口癖は「これからのメディア
4x smaller, 50x faster Published on 22 Nov 2021 by Marcin Kulik It’s been a while since asciinema-player 2.6 was released and a lot has changed since. Version 3.0 is around the corner with so much good stuff, that even though it’s not released yet, I couldn’t wait any longer to share. Long story short: asciinema-player has been reimplemented from scratch in JavaScript and Rust, resulting in 50x fa
ShopifyのStorefront APIを使用してNext.js製のECフロントを構築した | EringiDev
タイトルのとおり、ShopifyのStorefront APIを使用してNext.js製のECフロントを構築しました。 仕事でECサイトのフロントエンドを構築しているので、そこで培った技術とかノウハウを完全に自分のものとして公開できる何かがほしいなと思ったのが作り始めたきっかけです。 できあがったものCSSをほぼ書いていない状態なので、見た目に関してはご容赦ください。。 https://eringiv3-shopify-store-front-with-nextjs.vercel.app/ リポジトリhttps://github.com/EringiV3/shopify-store-front-with-nextjs 出来上がったものの解説商品一覧、商品詳細、カートトップのECサイトに必要だと思われる最低限の機能を持つ3ページを備えた構成ログインはできない購入確定画面はShopifyが提供
Node.js での devServer の構築では初手 unjs/get-port-please の導入が便利2022/11/14 業務で複数の devServer を同時に立ち上げたいケースがあり、チーム内で「React.jsプロジェクト(APP_A)を起動してからNext.jsプロジェクト(APP_B)を起動するとNextが気を利かせてくれるが、Nextを起動してからReactだとポートが専有されていてエラーになっていて地味に不便」という声が上がっていた。 かねてから課題ではあったものの、それぞれ実装を進めることから、同時に立ち上げる機会がそこまで多くなくこれまで放置されていた。しかしそうは言っても不便ではあった中、get-port-please の存在を思い出したので試しに導入してみることにした。 結果として、好感触でなかなか良いライブラリだったので本記事で紹介したいと思う。 un
「jQueryでもアプリは作れるのになぜjQueryではいけないのか？Vue.jsを学ぶ理由を知りたい」RUNTEQの生徒さんから出たこの疑問についてjQuery脱却の歴史的背景とVue.jsとの比較について説明します。サーバとクライアントの役割がどう変遷してきたか、それによってJavaScriptの役割がどう変遷してきたかなどメリット・デメリットをわかりやすく解説。 RUNTEQではVue.jsのカリキュラムを用意しています。先日生徒さんから『jQueryでもアプリは作れるのになぜjQueryではいけないのか？Vue.jsを学ぶ理由を知りたい』との声を頂いたのでこの記事を書くに至りました。 それを説明するには事前知識としてフロントエンドの歴史を知っておかなければいけないので、そこから簡単に解説します。 フロントエンドの歴史 ＊注）初心者向けの記事になるので、以下厳密性に欠ける部分はあると
フリーランスになって1年半経ったので、絶対にやっておくべきことをまとめた - Qiita
業務委託に便利な稼動管理システムをリリースしました topicを書いて「購読ファン」を増やせます https://i-ssue.com/users/knIVlAt80UaXrYmIZfVWLwmcnu13 タイマー押すだけで稼動管理可能なシステム https://i-ssue.com/reports はじめに フリーランスとして働き始めてから1年半が経ちました。 その中で、どのように案件を受けていけばいいのか、どのような働き方をすればいいのかがイメージできてきました。 これから、独立するまたは現在フリーランスとして働き方に悩んでいる方の参考になれば思い、記事を書いてみました。 フリーランスにとって重要なこと 市場価値 個人で仕事を獲得するためには企業というバックグラウンドがない分、シビアにあなたの市場価値が見られます。 常にエンジニアとしての市場価値を意識しておくといいと思います。 保険を
新しいアンケートシステムをつくった(Go / App Engine SPA 開発環境編) - エムスリーテックブログ
ibisは日本語でトキ(鳥)。我々のチームではシステムに動物の名前をつけています。 エムスリーエンジニアリンググループの木村です。 今回は「新しいアンケートシステムをつくった（Go とシステム概要編）]」、「新しいアンケートシステムをつくった（Digdag・Embulk・BigQuery データ同期編）」に引き続き、新しいアンケートシステム「Ibis」について説明します。環境構成編です。 概要 Ibis は開発言語としてフロントエンドに TypeScript + React.js、バックエンドに Go 言語を使った SPA(Single Page Application)として開発しています。 また、前回の Ibis についての記事「新しいアンケートシステムをつくった（Digdag・Embulk・BigQuery データ同期編）」でも軽く触れられていますが、Ibis のアプリケーション基盤
Windows 11を試したいけど、インストールはしたくない、そんな人にUIを手軽に試せるReactで実装されたWindows 11を紹介します。 Windows 11 in ReactはブラウザでWindowsのUIが再現されており、さまざまな操作やアプリを楽しめます。 Windows 11 in React Windows 11 in React Js 💻 🌈 Windows 11 in Reactは標準的なWebテクノロジ（HTML, CSS, JavaScript, React）を使用して、Web上でWindows11のデスクトップエクスペリエンスを複製することを目的として作成されたものです。 Windwos 11をインストールせずに、ブラウザ上でWindows 11のUIを試せます。 Windows 11 in Reactは、下記ページから。 ログイン画面は、パスワードなしで
ep.17 LINE Front-End Tooling Survey 2019 | UIT INSIDE
オンラインで行われている世界的なフロントエンドのアンケート 5000 人以上から集計したアンケートによって、その年のフロントエンドのトレンドが分かるようになっている https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019 昨年も行われている UIT での Front-End Tooling Survey について きっかけは東京以外のエンジニアも増えた中での技術スタックが知りたくなった 東京, 福岡, 京都, 韓国, 台湾, タイと組織全体での集計のきっかけに UIT では 2018 年から実施 質問内容は基本的にグローバル向けのアンケートと同じ内容 2019 年のアンケート概要 アンケート回答者が 55 人に増加。参加率40%程度。 全体として経験層年数の増加が見られる 去年は 2~5 年の経験者がボリュームゾーン 今年は
About Blog Article 駆け出しエンジニアの皆様へ はじめに 概要 本記事では、駆け出しエンジニアの皆様に向けて、エンジニアという職種についての説明、初めて収入を得るまでの道筋の提案、エンジニアとしての価値の高め方、独学で技術力を向上するためのロードマップ案等について記述する。 定義 本記事における「エンジニア」というワードは「ソフトウェア開発を業務とする者」という意味で扱う。ソフトウェアエンジニア以外のエンジニアもあるだとか、IEAの認定が必要だとか、そういうことは一旦忘れて読み進めてほしい。多少 web の分野に偏った記事になるが、そこは文脈で判断してほしい。 前記事 1年ほど前に本ブログで web系エンジニアのキャリアチェンジについて という記事を書いた。この記事は、私のキャリアパスの紹介と、web系エンジニアを目指す方への道筋の提案を行ったもので、今も多くの駆け出しエ
TL;DR GraphQLはクライアント側とサーバー側の双方の複雑化を解決するために利用されてる フロントエンドにとってGraphQLはHTTP上で動く信頼できる唯一のリソースとして振る舞う フロントエンドの状態管理のベストプラクティスとしてのApollo Client クライアントファーストなAPI, GraphQLはWeb APIのベストプラクティスになり得る クラシックアプリケーションを改修することなくGraphQLとモダンフロントエンドで今どきのアプリを作れる はじめに GraphQLは非常に良く出来たソフトウェア(の仕様)ですが、複数の側面を持つことからすぐに理解することが難しくまだ日本ではあまり受け入れられていない印象があります。GraphQLを端的に何と言われると "全てのフロントエンドのためのAPI BFF" なのですが、それだけで理解出来る人はなかなか居ないように思います
続編記事を投稿しました 🥳🎉 (2023/06/08) CodeSpaces の紹介の他に実際の開発で活用している Dev Container 設定のサンプルも紹介します。 Dev Container で MySQL や LocalStack などのサービスを起動する方法や、ローカル環境と Dev Container 環境での開発の共存方法など実際の開発で活用しているものから抜粋したものを紹介しています。 [続！Dev Container] GitHub Codespaces でクラウド開発環境を構築 はじめに こんにちは。共通サービス開発グループで複数のサービスが利用する決済プラットフォームの開発チーム[^1][^2]に所属している鳥居です。 この記事をご覧の皆さんは、ローカル開発環境の構築時にこんな経験ありませんか？IDE の設定を環境構築手順書に従って構築したが動かなかったり、プ
2023年のふりかえり - laiso
TL;DR 2023年に学んだ知識で2024年はマネーを獲得 2022年のふりかえり 2023年にやったこと After ChatGPT ChatGPTの使い方 コーディング自動化 アプリケーション開発 クラウドプラットフォーム関連 技術系の動画 フレームワーク関連 AWSコスト最適化大作戦 オライリー本 メインエディタをVSCodeに乗り換えた AndroidからiPhone 15 Proに乗り換えた OSSへの寄付 2023年にやりたかったこと 2024年にやりたいこと LLMを活用したアプリケーションを開発する 技術書を書く ニュースレターを配信する 動画を作る 事業を作る 2022年のふりかえり laiso.hatenablog.com laiso.hatenablog.com 2023年にやったこと After ChatGPT Chat Completions APIのリリースを
2019/02/16 11:00 当ブログでも使用されているReact用の静的サイトジェネレータGatsbyJsのコンセプト、技術的な仕組みや、�使い方について紹介します。 GatsbyJsとは GatsbyJsは、React用に作られたモダンで高速なサイトを作成できる静的サイトジェネレータです。 当ブログもGatsbyJsで構築されていますが、GatsbyJsのサイトのトップページに書かれている様に、驚くほど簡単に爆速モダンWebサイトを構築できます。 Build modern, beautiful, secure, blazing fast, apps and websites with React. そんなGatsbyJsは大きく分けると以下の4つのコンセプトに基づいて実装されています。 モダンなWeb技術を手軽に超絶パフォーマンス豊富なデータソースへの対応安価でスケーラブル・セキュ
React Hook Form を使って、チェックボックスで1つ以上のチェックを必須とするフォームを作ってみよう - ANDPAD Tech Blog
この記事は ANDPAD Advent Calendar 2022 の 22日目の記事です。 はじめまして、私フロントエンドエンジニアのはつし（蓮子）と申します。盟友＆尊敬するマネージャーの櫻井賢司こと KJ からバトンを受け取り、22日目を担当させていただきます。slack上のニックネームは 824 で、メンションつける時は1秒で済むのがメリットです。あだ名を聞かれたら一応「はっちゃん」と呼ばれてましたと言うようにしていますが、ちゃん付けがとても似合わないスキンヘッド＆髭面なので、ヒゲおじさんとかでもOKです。 最近の趣味は、オフィスのある秋葉原で、路地裏の美味しいの食事処を探すことです。仲間募集中。 アンドパッドに2021年12月に入社して、ちょうど1年が経とうとしたタイミングでブログを書くことになったのは何かの縁なのかもしれません。そんな記念すべき日に何を書こうか悩みましたが、まずは
はじめに 無料、会員登録不要、データをアップせずオフラインでも使えるブラウザベースの機械学習ツールを作りました。 空飛ぶニューラルネット https://soratobu-nn.net/ 目次 なにこれ 特徴 基本的な使い方 ちょっと高度な使い方 今後について 空飛ぶニューラルネット なにこれ 主にReact.jsとTensorflow.jsで構成された簡易的な機械学習ツールです。 世の中には多機能・高性能な機械学習プラットフォームがゴマンとありますが、利用料が高額、利用開始まで時間がかかる、使い方が難しい、データをサーバーにアップロードする必要があるなど意外とハードルが高いものです。 ちょっと手元のデータでAI使えるか試したい、PoCしたい 趣味や業務で統計・機械学習モデル作ったけど普通どのぐらいの精度が出るか見てみたい 外注とかする前に自分でもデータ見てみたい クラウドにデータをアップ
どうも、三町哲平です。 Ruby on RailsでWebアプリを開発中なのですが、どんなプログラミング言語やフレームワークを使っていてもJavaScriptが絡んできます。 正直な話、HTMLやCSSは分からない部分はその都度調べていけば、よっぽど手の込んだアプリケーションではない限りは素人でもそれなりのクオリティに仕上げれるという感覚があるのですが、JavaScriptが予想以上の難敵なんですよね。 しかも調べていくうちにどうも、フロントエンドだけではなくバックエンドでも使えるらしいじゃないですか...てことは、JavaScriptが最強なのでは...!?という疑問から色々とJavaScriptに調べてみましたので、少しばかりお付き合い下さい...。 では、どうぞ！ 一番身近なのは、Webサイトを表示するブラウザ上で動くプログラム（クライアントサイド・スクリプト）です。無くてもWebサ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSConf JP 2019 参加報告 - とろろこんぶろぐ
「トクバイ テイクアウト」を最速でリリースした話 - ロコガイド テックブログ
Profiling React.js Performance
GitHub Actions による GitHub Pages への自動デプロイ - Qiita
GistPad - Visual Studio Marketplace
技術スペックを大公開〜no plan株式会社〜2023年からの取り組み - Qiita
Figmaにおけるコンポーネントとバージョンの管理について考える｜Nao Komura｜note
Replit — Why We Switched From Webpack To Vite
Intl.Segmenter で和文の改行をいい感じにしてみる
デザインシステムを持たない組織のこれまでの取り組みとこれからを考える｜はのめぐみ
21 年新卒入社エンジニアと座談会で振り返る新卒研修 | MEDLEY Developer Portal
きたるべきvue-nextのコアを理解する - Qiita
Reduxを分かりやすく解説してみた | フューチャー技術ブログ
React.js: The Documentary - YouTube
Ruby on Rails: The Documentary - laiso
Reactで読みやすいコードを書くための心得
Big Sky :: .NET Core 3.0 が gRPC をサポートした。
【雑記】打倒WordPressなJAMstackメディアの未来 - フロントエンドの地獄
4x smaller, 50x faster · asciinema blog
Node.js での devServer の構築では初手 unjs/get-port-please の導入が便利
Vue.jsとjQueryの違いは メリット・デメリットを歴史的に比較 | RUNTEQ - 公式ブログ｜未経験からWebエンジニアへ RUNTEQ BLOG
Windows 11をインストールせずに、UIを試せる！Reactで実装されたWindows 11
駆け出しエンジニアの皆様へ | Ogihara Ryo
GraphQLの全体像とWebApp開発のこれから - Qiita
VSCode Dev Containerを使った開発環境構築
爆速静的サイトジェネレーターのGatsbyJs入門 | #TSUKAMON
無料で登録不要、オフラインでも使える機械学習ツールを作ってみた - Qiita
【JavaScript】分からない部分まとめてみたら最強だった件 - Qiita