[B! javascript] machatakaのブックマーク

machataka id:machataka

javascriptに関するmachatakaのブックマーク (44)

Next.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代
どうも、@yuyaaar です。最近は Next.js アプリを見ることが多くなってきました。もはや JAM スタックの王道、と言っても過言ではないかもしれません。ですが、やっぱりフルスタックとなると、データベースや認証などが必要になってきて、その辺のやり方がいまいちよくわからない、という人も多いのではないでしょうか。自分もその一人でした。😅 いろいろ調べたり作ったりした結果、今現在もっとも最強コンビであろう、 Next.jsPrismaNextAuth.jsReact Queryでのフルスタックアプリケーションの作り方をこの記事では書いていきます。今回は、チュートリアルアプリでよくある Todo アプリを作って、vercel にデプロイ、というのをやってみたいと思います。まずは最初に Next.js ボイラープレートアプリを作りましょう。作成できたら、まずは TypeScr
machataka 2020/12/25
next.js

react

javascript

開発
リンク
プロダクトコードの静的解析にhorusecを入れた話 - freee Developers Hub
この記事はfreee アドベントカレンダー16日目です。みなさんこんにちは。PSIRTというチームでエンジニアをしているlivaです。PSIRTという聞き慣れない単語ですが﹁Product Security Incident Response Team﹂の略で、文字通りプロダクトのセキュリティにフォーカスしたチームです。元はCSIRT(Computer Security Incident Response Team)でまとめてやっていたんですが、今年の夏頃から分かれて動いています。業務内容は今までと何一つ変わっておらず、AWS触ったりGCP触ったりプロダクトチームへセキュリティ関係のことで首突っ込んだりとプロダクトのセキュリティに関することは色々やっています。さて、今回の話題はタイトル通り﹁プロダクトコードの静的解析﹂についてです。今まで各プロダクトごとにツールが運用されていたりいな
machataka 2020/12/17
ツール

セキュリティ

javascript
リンク
2019 JavaScript Rising Stars
Welcome to the 4th edition of JavaScript Rising Stars! Let's see by the numbers the projects that got traction on GitHub in 2019. The following graphs compare the number of stars added on GitHub over the last 12 months. We analyzed projects coming from Best of JS, a curated list of the best projects related to the web platform. Note that you can click on a project to get more info.
machataka 2020/01/13
javascript
リンク
WebRTCやるのに最低限必要なJavaScriptのAPIについて - console.lealog();
JavaScriptでWebRTCやるための基礎知識 - console.lealog(); 春なので書きました。言うなれば、これの2019年度版です。はじめに最低限のJavaScriptでWebRTCを扱うにあたり、どういうクラスがあって、どういうAPIを、どう使うのかについての記事です。いわゆるフロントエンドのエンジニアがWebRTCを使ったサービスを作るなどの場合は、だいたい何かしらのSDKを使うと思います。その場合はそのSDKのDocsを読めばそれで十分で、その先の仕組みを知る必要はないかなーと思います。ただし、 SDKの中で何が行われてるか知っておきたい WebRTCのSDKを作る側であるみたいな場合は、一読の価値ありかもです。ようするに、弊社の新入社員のような人材のための記事です！基本的なWebRTCの仕組みみたいなパートはざっくり軽めにして、JavaScri
machataka 2019/04/22
WebRTC

javascript
リンク
これさえ見れば脱・JavaScript初心者！海外のYouTube動画を一挙大公開 - paiza times
どうも、まさとらん︵@0310lan︶です！今回は、基本的なJavaScriptプログラミングが出来るようになった人向けに、さらなるステップアップを目指せる﹁YouTubeチャンネル﹂を厳選してまとめてみました！海外のプログラミング系YouTube動画は、有料でもおかしくない﹁質﹂の高さと豊富なコンテンツ量に魅力があり、確実にレベルアップが期待できるのでぜひ参考にしてみてください。 ■JavaScriptの勘所を勉強できるYouTubeチャンネル！︻ Fun Fun Function ︼プログラミング動画とは思えない超ハイテンションなノリで、JavaScriptを学ぶうえで欠かせない勘所を分かりやすく教えてくれるのがコチラのチャンネル！﹁Spotify﹂の開発にも携わっていたというプログラマーの彼は、得意のJavaScript言語を分かりやすく伝えることに情熱を注いでおり、それは
machataka 2017/10/13
javascript

動画

チュートリアル
リンク
amakanのフロントエンドを色々改善した - ✘╹◡╹✘
https://amakan.net/ のこの辺の改善の続き。 amakanをUnicornからPumaに移行した - ✘╹◡╹✘ amakanでyarnを使うようにした - ✘╹◡╹✘ amakanでRuby 2.3.3を使うようにした - ✘╹◡╹✘ amakanを Ruby 2.3.3 から 2.4.0-preview3 に移行した - ✘╹◡╹✘ react_on_rails amakan ではサーバサイドで React.js で記述したコードを使ってHTMLを生成していて、このために react_on_rails というライブラリを使っている。このライブラリの最新バージョンが v5 から v6 に上がっていたので、まず v6 を使うように変更を加えた。 v5 までは、サーバサイドとクライアントサイドで別々の Webpack の設定ファイルを用意するような設計になっていたが。しかし
machataka 2016/12/14
webpack

rails

javascript
リンク
Continuous Integration Using WebPagetest and Webpack – Engineering @ Housing – Medium
When we talked about Housing Go at JSFoo, there were a lot of queries about how we maintain the performance of our app over the time. Below is a description of how we do it. We started development of Housing Go with the focus on metrics like sizes of the chunks generated using Webpack, Time to First Byte, First Paint, Speed Index etc. We knew to keep the app performant we have to make sure that we
machataka 2016/11/19
webpack

JavaScript

webpagetest
リンク
webpack-dev-serverの基本的な使い方とポイント - dackdive's blog
はじめに︵2017/08/10追記︶この記事では webpack-dev-server を独立したサーバーとして使う場合の方法です。また webpack1系の情報になっており少々古いです。最新の設定についてはこちらの GitHub リポジトリを参考にしてください。 https://github.com/zaki-yama/redux-express-template ︵追記ここまで︶ JavaScript のビルドに webpack を使っている場合、ローカルでの開発には webpack-dev-server を使うと便利です。通常の webpack コマンドも --watch ︵または -w︶オプションつきで実行することによりファイルの変更を検知して自動でリビルドを行うことが可能ですが、 webpack-dev-server は上記に加えてローカルサーバーも起動してくれ
machataka 2016/09/23
webpack

javascript

webpack-dev-server
リンク
BabelでES6で書いて、webpackでビルドして、mochaでテスト書いて、power-assertでassertの出力を見やすくして、karmaで複数ブラウザのテストを自動化して、カバレッジを出力するようにした - UUUMエンジニアブログ
おはこんばんちは!!尾藤 a.k.a. BTOです。 UUUMでは業務の効率改善に kintone を導入しようとしているのですが、kintone の機能を拡張するには Javascript でプログラムを書く必要があります。そこで、Javascript の開発環境を構築したので、何をやったのかをまとめてみました。具体的には、 BabelでES6で書いて、webpackでビルドして、mochaでテスト書いて、power-assertでassertの出力を見やすくして、karmaで複数ブラウザのテストを自動化して、カバレッジを出力するようにしました。お前は何を言っているんだと思うかもしれませんが、僕も何を言っているのかわかりません。 Babel 言わずと知れた ES6 用のトランスパイルツールです。ご存知の方も多いと思うので、詳細は割愛しますね。 Babel の導入はnpm でイ
machataka 2016/09/18
javascript

power-assert

mocha
リンク
フロントエンドにテストを導入 - Qiita
2016-8-8 ※webpack単体の記事を書きました。よろしければこちらもどうぞ step by stepで始めるwebpack 2016-5-16 ※karma単体の記事を書きました。よろしければこちらもどうぞ step by stepで始めるKarma 本記事は画面のJavaScriptのテストとかまったくやったことない方 Mocha？webpack？karma？それぞれの解説記事はよく見るけど全体像がよくわからんという方向けです。︵数日前の自分です︶全体を通して導入の流れを解説した記事があると全体像が理解しやすいのではと思い書いてみました。前提 Nodejs,npm,chromeが導入済みであること流れ Step 表題目的
machataka 2016/09/06
javascript

test

tdd

テスト

mocha

karma
リンク
JavaScriptのテスト環境構築(Mocha + power-assert + Karma + babel + webpack) - Qiita
JavaScriptのテスト環境構築(Mocha + power-assert + Karma + babel + webpack)JavaScriptmochakarmapower-assert この記事は、初めてJavaScriptのテスト環境を作ってみたおじさんによる、これからJavaScriptのテストを書いていきたいけど、登場人物が多すぎてなにやらめんどくさそうと思っている方に向けた記事兼備忘録です。初めてのJavaScriptテスト環境構築で一応公式ドキュメントに目を通したけど英語の意味をちゃんと読み取れておらず、ツールやライブラリの理解や使い方が間違っている場合がありますのでアドバイスいただけると幸いです。各テストツールやライブラリの紹介 JavaScriptのテスト環境を構築するときの一つ目の壁がツールやライブラリがたくさん出てきて、どれを使っていいかわからない/それぞ
machataka 2016/09/06
mocha

power-assert

javascript
リンク
Reactの最新動向とベストプラクティス
HTML5 Conference 2016 http://events.html5j.org/conference/2016/9/session/#session_id_h1
machataka 2016/09/03
react

slide

javascript
リンク
まだ手動でやってない？UIテストを爆速で自動化できるNightwatch.jsが便利すぎ
Webアプリのクオリティアップに役立つのが、フロントエンドのテスト。実装したはずの機能がある条件で動かなかったり、期待どおりに操作できなかったりするとガッカリですね。Nightwatch.jsならテストがだいぶ捗りそうです。少し前に、Eric Elliottが「JavaScript Testing: Unit vs Functional vs Integration Tests」でJavaScriptのテストについて比較しました。本記事では、JavaScriptの機能テストについてもう少し掘り下げます。Nightwatch.jsライブラリーを詳しく探りながら、機能テストを実施してみましょう。解説する前に、機能テストとはなにか、なぜ重要なのか説明します。おおまかに言うと、機能テストとはユーザーの観点から予測されるとおりにアプリケーションが動作しているか確認するためのプロセスです。ユニ
machataka 2016/08/31
javascript

nightwatch

テスト

Selenium
リンク
mocha + enzyme + power-assertの環境構築メモ - Qiita
npm install -D babel babel-register babel-preset-latest babel-preset-react babel-plugin-espower mocha power-assert enzyme react-addons-test-utils jsdom jsdom-global npm install -S react
machataka 2016/08/31
babel

power-assert

mocha

javascript
リンク
映像から顔を見つけ出す！ JavaScriptでお手軽フェイストラッキングに挑戦 - ICS MEDIA
今、スマホアプリ﹁SNOW﹂で、顔写真に動物のパーツをデコったり複数人の顔を入れ替えて、おもしろい写真へ編集することが若い女性の間で流行っています。このアプリには、画像から顔を検出できるフェイストラッキングという技術が使われています。この技術を使うと、画像から顔のパーツの位置や大きさを特定できるようになり、静止画やアニメーションを重ねるといった演出を加えられます。フェイストラッキングの技術は昔からありましたが、高度な画像解析の知識が必要なため導入するにはハードルの高いものでした。今回は、JavaScriptライブラリを使って、HTML5でフェイストラッキングを実現する方法を紹介します。 Webテクノロジーでフェイストラッキングに挑戦しよう Webテクノロジーで簡単にフェイストラキングを実現するには、JSライブラリ﹁clmtrackr﹂がオススメです。このライブラリでは、負荷が高いフェイ
machataka 2016/08/03
javascript

face recognition
リンク
Retiring the Nuclide Open Source Project
A unified developer experience for software development Nuclide is built as a single package on top of Atom to provide hackability and the support of an active community. It provides a first-class development environment for React Native, Hack and Flow projects. Retiring the Nuclide Open Source Project A few years ago, we introduced Nuclide to provide a first-class IDE experience. We’ve made treme
machataka 2016/07/23
javascript

editor

atom

react
リンク
【書評】JavaScriptによるデータビジュアライゼーション入門 | IT業界の歩き方
machataka 2016/07/15
javascript

graph

グラフ
リンク
Rails + モダンJS環境(Webpack)で新規アプリ作成 - Qiita
Rails5の正式版でましたね！早速触ろう！でも、フロントはWebpackでブラウザの自動更新といった環境で開発したい！ということでRails5 + フロントはwebpackでビルドするサンプルアプリを作ってみました。なお、今回のコードは以下においておきましたので、ご参考に。 https://github.com/ufotsuboi/rails-webpack-sample ︵追記︶続きを書きました。上記のリポジトリは次のコードも含まれていますのでご注意ください。 SassのビルドもWebpackでHot Module Replacementしたい方針 RailsでモダンなJS環境にするにはいくつか方法があって、下記URLがわかりやすく、参考にさせていただきました。モダンJavaScript開発環境onRails 上記の記事ではざっくり言うと直接ビルドしたものをpublic
machataka 2016/07/09
webpack

rails

react

javascript
リンク
フロントエンドエンジニアが暇なときにやると良いかもしれないこと - Qiita
︵ゆるいスキルアップ的な意味で︶フロントエンドエンジニアが暇なときにやると良いかもしれないこと。主観です。﹁これが良いよ！﹂というのがありましたら、ぜひ教えて下さい🙇 W3Cを読む whatwgを眺める。 ↑のissueを見る MDNを読む JavaScript CSS Web API NodeのAPIを読む caniuseを見るnpmパッケージを眺める starが多い順パッケージ一覧 ↑で1位のexpressが使っているパッケージスライドを読む node学園 React.js Meetup Mediumを読む JavaScriptタグの記事 FrontEndタグの記事 Twitterで著名人をフォローする TBD @addyosmani @LeaVerou @paul_irish @BrendanEich Podcastを聞く Mozaic.fm Front-end Five
machataka 2016/06/26
javascript

エンジニア
リンク
すべてのプログラマーが知っておきたいReactの7つの強み
JavaScriptはこの6年で大きくその地位を向上させてきました。JavaScriptは有名なサーバーサイド言語になり、オフラインファーストSPAは用語として定着し、そしてJavaScriptは他の言語のための有名なコンパイル先となりました。 JavaScriptは、ElectronやReact Nativeのような技術やハイブリッドアプリを通して、ついにはデスクトップとモバイルのプラットフォームとなってきています。この3年でもう一つ革命が起こり始めました。FacebookのプログラマーであるJordan WalkeがReact.jsを生み出しました。Reactはそれ以来、数百ないし数千ものプログラマーのJavaScriptのコードの書き方を変えてきました。 Reactの途方もない成功の裏にはそれなりの理由があります。 1. バグが出にくいよりシンプルなコードReactはユーザーインタ
machataka 2016/06/26
react

javascript
リンク
1 2 3 次のページ