レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログ
技術部の外村（@hokaccha）です。今回はクックパッドのウェブサイトのフロントエンドを Next.js などを使って作り直している話を書きます。 この記事で紹介する新システムは、スマートフォン向けのレシピページで確認することができます。もし興味があるかたはレシピページをスマートフォンのユーザーエージェントで開いて DevTools などで確認してみてください。 Next.js と GraphQL で動いているのがわかると思います。 ご存じの方も多いかもしれませんが、クックパッドのウェブサイトはモノリシックな Rails で作られていて、10年以上 Rails で開発を続けてきました。10 年以上同じシステムで開発を重ねれば当然レガシーな部分が大量に生まれてきますが、特にフロントエンドはその影響が顕著でした。 どこから使われているかわからない CSS が大量にある、JS のコードは昔なが
TypeScript + Node.jsプロジェクトにESLint + Prettierを導入する手順2020 - Qiita
TL;DR 完成形のソースコードはこちら↑ この記事の趣旨 TypeScript + Node.js プロジェクトのはじめかた2020 で作成したTypeScript + Node.jsのプロジェクトに ESLint / Pretiter / husky & lint-staged を導入する手順を紹介します。 今回導入するツールとバージョンは以下になります。 項目 バージョン
一から作るモダンフロントエンド環境【Webpack & Babel編】 - Qiita
どうも、ディベロッパーの羽田です。 最近業務でモダンJSフレームワークやwebpackを使うことが多くなってきたので開発環境の構築手順をまとめてみます。 概要 ウェブ開発のデファクトスタンダードとなりつつあるWebpackとモダンJSフレームワークを使用したフロント開発環境構築の手順をまとめました。 自分用のメモも兼ねてるので雑な部分や端折ったりしてる部分があります。 対象者 ある程度JSの知識がある人 モダンJSフレームワークに興味がある人 Webpackを使用した開発環境構築に興味ある人 章節 【基本構築編】 【Webpack & Babel編】←イマココ 【css & sass編】(執筆中) 【React & React Router編】(執筆中) 【Redux編】(執筆中) Webpack周辺を構築 パッケージ名 説明
JavaScriptでGPUを簡単に扱えるライブラリ「GPU.js」レビュー、並列処理で多次元の演算が爆速に
GPUを用いた並列演算に利用されるプログラミング言語といえば、機械学習の研究などに利用されるPythonが一般的ですが、JavaScriptによるウェブアプリでもGPUを用いたい場合があるはず。オープンソースのJavaScriptライブラリ「GPU.js」を使うと、スクリプトを実行するコンピューターのGPUを利用して並列処理を行うことで、多次元の演算などを高速に行うことができます。 GPU.js - GPU accelerated JavaScript https://gpu.rocks 今回GPU.jsを動かすシステムは以下。CPUはIntel Core i5-4570、GPUはAMD Radeon RX480、OSはUbuntu 20.04、ウィンドウシステムはWaylandを使用しています。 カーネルバージョンは5.4.0-42 ロードしているドライバーはこんな感じ。Linuxに標準
Selecto.js - Web上でドラッグで選択するUXを実現 MOONGIFT
Webアプリケーションが広く使われるようになり、さもローカルアプリケーションと同じように操作できるようになっています。しかし、デスクトップの操作に近づけば近づくほど、ちょっとした操作性の違いに違和感を感じるようになります。 今回はドラッグして選択する操作をサポートするSelecto.jsを紹介します。この操作、デスクトップでは当たり前なのでWebでもできるようになると便利でしょう。 Selecto.jsの使い方 下にあるタイルが選択された状態です。 マウスでドラッグして選択できます。 キーボードとの組み合わせで複数回の選択もできます。 選択してドラッグ移動といった使い方もできます。 Selecto.jsが使われそうなのはExplorerやFinderといったファイル管理を提供する場合でしょう。同様に複数のファイルやオブジェクトをまとめて選択させたり、それを移動したりするのにSelecto.
豆になるJS: イベントリスナーとthisと引数と - メヘンニミン
JavaScriptに関する初級～中級Tipsをいくつか書いていたのですが， 話題が膨らんじゃったので分離しました． はじめに thisを理解する 本題 thisを退避させる 無名関数を用いる call, apply, bindメソッドを用いる removeEventListenerを使用する場合 おわりに はじめに ブラウザで動作するJavaScriptでthisを用いた場合， 基本的にはグローバルオブジェクトであるwindowオブジェクトを指します． しかし，たま～～にthisの中身が異なる場合があります． 例えば，Web制作に扱われやすいマウスのイベントリスナー内のお話． イベントリスナーといえば，引数もどう設定するんだ！という疑問も出てくるんじゃないかと思います． 今回の議題を整理しましょう． イベントリスナー内のthisを制御するには？ イベントリスナーに引数を与えるには？ th
Next.js + esa.io + VercelでJAMStackな爆速ブログを構築する - パンダのプログラミングブログ
追記: 本記事がesa.ioの公式Twitterに取り上げられました！ esaに書いた記事をNext.jsで公開する Next.jsのバージョン9.3から、ビルド時に外部ソースからデータを取得するgetStaticPropsというAPIが公開されました。 ブログは静的なコンテンツです。ブログの内容はユーザーに応じて動的に変わるということはありません。そして、getStaticPropsは静的なページを構築するために最適なAPIです。 そこで、esaにmarkdownで書いた記事をNext.jsで表示するサイトを構築しました。 実際にサイトにアクセスして記事を開いてみてください。爆速で遷移するのが体験できます。Lighthouseの成績もバツグンです。（blog-starterをベースに利用したため、コンテンツはそのレポジトリの内容を踏襲しています） デモサイトのコードはGitHubにアップ
[Javascript] Moment.jsを使って日付を扱おう - YoheiM .NET
こんにちは、@yoheiMuneです。 JavaScriptで日付を扱う場合に、デフォルトではDateクラスくらいしかなくて使いづらい。その問題を解消するライブラリはいくつか存在しますが、その中でMoment.jsが非常に使いやすいので、今日はその使い方をブログに書きたいと思います。 目次 はじめに 本記事は、moment.jsを用いた日付処理について記述しています。ライブラリを用いない日付処理については「[JavaScript] 今日、明日、昨日、月末、月初などを取得する」でブログを書いたので、もし良ければご参考ください。 Moment.jsとは Moment.jsは、Javascriptで日付を扱うためのライブラリです。文字列からパースしたり、月末月初を求める演算ができたり、任意のフォーマットで出力できたり、と様々な機能があります。日付の演算やパース処理をする際には、必ず使いたいライブ
![[Javascript] Moment.jsを使って日付を扱おう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/8ff07b584b30f63c077826ee31a64f6815fcdba3/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F544.jpg)
JSONの代わりにYAMLを使う
JSONはいいですね。扱いやすくて。 でもコメントが書けないとか、ネストが深くなると可読性が悪くなるとか色々問題があります。 そういった問題を解決するためにJSON5やらCSONやらいろんなaltJSONが存在します。 使ったことはないけどコメントが書けるっていうだけでも全然違いますね。 ただ、自分はコメントはもちろん配列やらオブジェクトの記号([]とか{})も極力書きたくないし、なんならダブルクォーテーションやカンマも書きたくない。 そんなワガママを実現するためにYAMLをよく使います。 PHPのSymfonyとかを触ったことがある人には馴染みがあると思います。 YAMLとは「人間が読みやすいように最適化された、すべてのプログラミング言語のための標準的なデータシリアライゼーション」と公式サイトがおっしゃっております。 YAMLの書き方 記述方法はいくつかありますが、下記はよく使う書き方で
ScrollReveal.jsを使ってスクロールしたらふわっと表示される動きを作ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
JavaScript library to animate elements as they scroll into view. スクロールして表示される要素をアニメーション化するJavaScriptライブラリ 要素が画面に表示されたら、指定したアニメーションを実行してくれる優れものです。 「ふわっと表示」「下から表示」「遅れて表示」など簡単に実装することができます。 公式サイト：https://scrollrevealjs.org/ ScrollRevealの使い方 ライブラリ読み込み 使い方は簡単。ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。 CDNは公式サイトのインストールから読み込みます。 // 最新バージョンの場合 <script src="https://unpkg.com/scrollreveal
Node.jsへのコントリビュート解説、そしてOSSへ貢献するということ - 別にしんどくないブログ
この記事は Node.js Advent Calendar 2019 - Qiita の2日目の記事です。遅くなってしまいました。 Node.js本体へのコントリビュート解説記事です。この記事は不足している情報や更新があれば、モチベーションが続く限り更新していきたいと思っています。 JSConf JPのスタッフの打ち上げのときに日本人のNode.jsへのコミットしている人が少ないという話がでました。 Node.jsに限らずOSSへのコミット経験があるという人は私の周りには少ないです。 もちろんOSSにコミットしているから良い悪いという話ではなく、Node.jsやOSSにコミットしてみたいと相談いただくことが時々あるので僕の経験でよければ伝えたいと思いました。 私の経験からNode.jsへのコントリビュート方法の解説とOSSへの貢献を通じて得たものについて書き残しておきたいと思います。 言葉
Reactの最強フレームワークGatsby.jsの良さを伝えたい！！ - Qiita
Gatsby.jsって？ この記事はGatsby.js Advent Calendar 2019 1日目の記事です。 2日目の記事は@aimofさんのJSの文法すら怪しいフロント初心者がblog用のgatsby starter（っぽいもの）を自作・公開してみたです!! Gatsby.jsはReactで作られた静的サイトジェネレーターです。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。 静的サイトジェネレーターが何かと言うと、何かしらの言語で書かれたソースから、静的なHTML/CSS & JavaScriptを生成するツールのことを言います。 今現在どの静的サイトジェネレーターが人気かというのを一覧で見れるStaticGenサイトもあります。 Starの数を見るとあのnuxtよりも多いんですよね、日本で使っている方をあ
JSConf JP 2019 参加報告 - とろろこんぶろぐ
はじめに 昨日今日と 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
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
Node.js,Python,RubyなどのWebアプリを完全無料でホスティング可能な「Unubo」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、フロントエンドによる静的なWebページだけでなく、Node.jsなどのサーバサイドも含めた動的なWebアプリを無料でホスティングしてくれるサービスをご紹介します。 GitHubのリポジトリと連携することで、とにかくWebアプリを公開するまでの作業が簡単かつ高速に実現できるのが大きな特徴です。 サーバレスによる実行も可能なので、ご興味ある方はぜひ参考にしてみてください！ 【 Unubo 】 ■「Unubo」の使い方 それでは、「Unubo」をどのように使っていけば良いのか見ていきましょう！ まずは、サイトにアクセスしたら【SIGN UP】ボタンをクリックします。 無料のユーザー登録画面が表示されるので、ユーザー名・メールアドレス・パスワードを入力しましょう。 登録したメールアドレス宛にリンクが送られてくるので、それをクリックすれば登録完了
Reactを使ったモダンなフロントエンド開発の環境構築 - Qiita
はじめに Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。 UIライブラリとしてReact 型のある言語としてTypeScript スタイル定義としてstyled-components コンポーネントの開発環境としてStorybook LinterとしてESLint FormatterとしてPrettier この記事では、各種ライブラリについて紹介したのち、それらを使う場合の環境構築についてハンズオン形式で説明します。 ※ アプリケーションを開発する際に必要になる設定が抜けていたので、追記しました。 各種ライブラリの紹介 まず、各ライブラリがどのようなものなのかを簡単に紹介します。 ライブラリの使い方などは公式ドキュメントなどを参照するようにしてください。 ドキュメント ReactはUI(ボタンやフォームなど)コンポーネントを作成するための
遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js
画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。 要素が境界に1px交差した、全部が入ったなどを正確に検出。他のJavaScriptへの依存はなく、単体で動作します。 Bounds.js -GitHub Bounds.jsの特徴 Bounds.jsのデモ Bounds.jsの使い方 Bounds.jsの特徴 画像の遅延読み込み、無限スクロールなどの実装には、境界を設定することが重要です。通常は、イベントハンドラ、ループ、getBoundingClientRectの呼び出しの組み合わせが必要でしたが、これらはメインスレッドで実行されるため、パフォーマンスが低下します。Bounds.jsは要素と境界の交差を非同期に検出し、パフォ
Node.js v12で使えるJavaScriptの新機能 - 別にしんどくないブログ
Node.js v12が4/23にリリースされました 🚀 Node.jsのCoreにも新しい機能が入りました。 また、APIの追加以外にもTLS1.3のサポートやhttp_parserがllhttpに代わったりしています。 詳しくは以下をご覧ください！ github.com JavaScriptエンジンであるV8もバージョンアップしています。 Node.js v10のV8のバージョンは6.8でしたが、Node.js v12では7.4に大幅アップデートしています。 V8のバージョンが上がることによりJavaScriptの使える機能や構文が増えます。 今回はMathias氏のツイートをもとにNode.js v12から使えるJavaScript(ECMAScript)の新機能について紹介したいと思います。 New JavaScript features in Node.js v12: ➡️ A
WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
Visual Studio CodeでJavascriptの開発環境を構築する - Qiita
概要 Visual Studio CodeでJavascript(Node.js)の開発環境を構築したメモです。 環境 Windows7 (64bit) Visual Studio Code 0.10.1 Node.js v4.2.2 参考 Visual Studio Code TSD DefinitelyTyped/tsd - Github ESLint Rules How to Import Intellisense files into vsCode (Visual Studio Code) Visual Studio Code for Node.js Development 準備 Visual Studio Codeよりインストーラをダウンロードしてインストールします。 設定 Visual Studio Codeを起動しメニューバーの"File" → "Preferences" →
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
