Reactの状態を理解して適切にHooksを利用する
Reactと状態は切っても切れない関係です。なぜなら、Reactは状態に基づいて画面を更新するコンポーネントベースのUIライブラリだからです🤝🏻 そんなReactの状態を管理・操作しやすくしてくれているのが、React 16.8から登場したフックです。それゆえ、フックを正しく利用するにあたってReactの状態の理解は非常に重要であり、Reactの状態の理解があやふやだと、予期せぬ挙動やバグのもとになりかねません。 今回の記事では、Reactの状態を理解しながら適切な箇所で適切なHooksを選択していくプロセスを再確認できた！自信を持ってReactをコントロールできるようになりそう！と言えることをゴールとしています🎉 今回使用した即席匿名メモアプリのコードベースです。 サークルでは、コミットに沿って説明をしていきました。（あくまで即席なので細かいこと気にしながら作ってませんorz） 【
Webフロントエンド入門
まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ
Admin.jsを使って面倒な管理画面をサクッと作ろう | DevelopersIO
こんにちは、CX事業本部Delivery部サーバーサイドチームのmorimorkochanです。 突然ですが「あぁ〜管理画面作るのめんどくせ〜」って思うことはないですか？ 例えばRDBと接続されたRESTfulなAPIサーバーを作っていて、一部の管理者向けに管理画面を作りたいが管理画面にこだわりがない場合などなど。 そんな時に便利なのが、Admin.jsです。Admin.jsは管理画面を簡単に作成できるフレームワークです。オープンソースとして公開されており、クラウドにデプロイされているサービスを利用する場合は月額料金がかかりますが手動でサーバーに組み込んでデプロイする場合は無料です。 Admin.jsを使うと、RDBで管理される各テーブルごとにCRUD画面を簡単に作成することができます。これによってRDBと同じプロパティを何度も定義したり同じようなCRUDコードを何度も記述する必要はありま
Circuit Simulator
Building your very first circuit it's easy as 1..2..3 Design circuits quickly and easily with a modern and intuitive user interface with drag-and-drop, copy/paste, zoom and more. One function that makes the internet of Things. The internet of Things is the remote control of devices, which can trigger action from a remote location. With Electra Academy, you can edit and run your digital circuit sim
20+ JavaScript libraries to draw your own diagrams (2022 edition)
20+ JavaScript libraries to draw your own diagrams (2022 edition) by Hamza Ed-douibi | Feb 23, 2022 | tools, cloud & web engineering, Model-driven Engineering | 52 comments You can render anything you want in your browser with JavaScript. Good examples are this list of online modeling tools that help you to easily create UML (or ER, BPMN, …) diagrams directly in the browser. Most of these tools u
2020年にJavaScriptフレームワークをちゃんとはじめるために。｜榊原昌彦
結論を先に書くと、2015年あたりの混沌としたJavaScriptフレームワーク戦争は終わりを迎え、メジャーなフレームワークはどれも成熟してきているので、使いたいフレームワーク使ってください。 ただ技術選定においてはどれかひとつを選ばないといけないというリアルはあるので、理解を深めるための視座をいくつか紹介したいと思います。 JavaScriptフレームワークの簡易比較有名かつドキュメントが日本語化されており、入門書もでているJavaScriptフレームワークにはAngular、React、Vueがあります。 で、それぞれの違いなのですが、すごくシンプルに言ってしまうと、HTMLとJavaScriptの関係がそれぞれ違います。 ・ Angularは、HTMLとJavaScript（TypeScript）を分割してかきます。 ・ Reactは、JavaScriptの中にHTMLを書きます。
【interview】アプリインストールが不要で誰でも簡単にARが体験できるアプリレス AR の実用性 | Techable(テッカブル)
AR（拡張技術）を使ったサービスは、従来であれば専用のアプリを用いて自社のARコンテンツが作れるのが主流だった。しかし、今回紹介するアプリレスARは、アプリを使わずにAR技術を誰でも体験できる画期的なサービスだ。開発の経緯や今後の展望について、オムニバス・ジャパンの担当者に伺った。誰でも簡単にAR体験ができるQ1.アプリレス AR のサービスについて教えてください。アプリレスARは、オムニバス・ジャパンが開発したウェブブラウザで楽しむ AR(拡張現実)サービスです。アプリレスなので、専用アプリのインストールや事前登録などは一切不要で、QRコードを読み取り、ウェブサイトにアクセスさえできれば、誰でも簡単にARを体験することができます。 Q2.アプリレス AR の開発に至った経緯についてお伺いできますか。 オムニバス・ジャパンは
Google、スマートフォン含むWebブラウザでリアルタイムに人間の姿勢推定を可能にする機械学習モデルPoseNet：TensorFlow.jsバーション発表
Google、スマートフォン含むWebブラウザでリアルタイムに人間の姿勢推定を可能にする機械学習モデルPoseNet：TensorFlow.jsバーション発表 2018-05-08 Googleは、Webブラウザでリアルタイムに人間の姿勢推定を可能にする機械学習モデル「PoseNet」TensorFlow.jsバーションを発表しました。 GitHub：tfjs-models/posenet at master · tensorflow/tfjs-models PoseNetは、映像中の人物から1つのポーズまたは複数のポーズを検出できる技術です。ToseorFlow.jsは、Webブラウザで実行できるオープンソースの機械学習ライブラリで、Googleがオープンソースとして公開している機械学習ライブラリ「TensorFlow」のJavaScript版です。 今回、その2つを組み合わせたTose
Vue.js ではじめるシングルページアプリケーションの開発 - HDE BLOG
Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力すると、 デザインしたページの特定のDIV要素がリアルタイムに更新されるといったデータ反映の仕組みを備えています。 また、JavaScript で大規模なユーザーインターフェイスの開発を行う場合、HTMLファイルのテンプレート化、 JSファイルの依存関係、グローバル変数汚染など様々な課題に直面します。 Vue.js は、コンポーネントという仕組みと Webpack というモジュール管理ツールと組み合わせることで、 これらの課題にうまく対処できるようになっています。 今まで jQuery
BootLeaf - Bootstrap/Leafletを使った地図テンプレート MOONGIFT
地図とWebは相性が良いです。移動中に地図を見たいと思うことは多いですし、旅行や出張前に計画を立てる上でも地図が必要です。それもあり、Googleマップをマッシュアップする地図サービスは無数に存在します。 今回紹介するBootLeafはそんな地図マッシュアップのベースになるようなソフトウェアです。様々な情報を地図に載せやすくなっています。 BootLeafの使い方 地図が右側に、表示している情報が左側に一覧になっています。 メイン画面 左のリストから選ぶと該当するデータがハイライトします。 データ選択 さらに詳細なデータはモーダルで表示されます。 モーダル表示 データは検索でインクリメンタルに絞り込めます。 検索 ラインデータの表示もサポートされています。 ラインデータ表示 データはチェックボックスで表示/非表示が切り替えられます。 データの追加表示 BootLeafを使えば地図と独自のデ
レトロエンジニアのための近代Webフロントエンド事情 - Qiita
フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には新しい気付きが与えられるかもしれない。 詳しい人の添削・ツッコミは大歓迎。 詳細はリンク先に任せ、私が思う「わかりやすい順序」で、調べたことをざっと紹介していく。 きっかけ 読み飛ばしてもよい。 Reactを使うとなぜjQueryが要らなくなるのか 数年前、
映像から顔を見つけ出す！ JavaScriptでお手軽フェイストラッキングに挑戦 - ICS MEDIA
今、スマホアプリ「SNOW」で、顔写真に動物のパーツをデコったり複数人の顔を入れ替えて、おもしろい写真へ編集することが若い女性の間で流行っています。 このアプリには、画像から顔を検出できるフェイストラッキングという技術が使われています。この技術を使うと、画像から顔のパーツの位置や大きさを特定できるようになり、静止画やアニメーションを重ねるといった演出を加えられます。 フェイストラッキングの技術は昔からありましたが、高度な画像解析の知識が必要なため導入するにはハードルの高いものでした。今回は、JavaScriptライブラリを使って、HTML5でフェイストラッキングを実現する方法を紹介します。 Webテクノロジーでフェイストラッキングに挑戦しよう Webテクノロジーで簡単にフェイストラキングを実現するには、JSライブラリ「clmtrackr」がオススメです。このライブラリでは、負荷が高いフェイ
JSFeat - JavaScript Computer Vision Library.
Data structures Most of JSFEAT methods relies on custom data structures. There are just few provided at the moment but I'm sure its number will increase with new functionality. matrix_t The core and starting structure for any project is most likely matrix_t: var my_matrix = new jsfeat.matrix_t(columns, rows, data_type, data_buffer = undefined); matrix_t is quite flexible structure, it can be used
ConvNetJS: Deep Learning in your browser
Description The library allows you to formulate and solve Neural Networks in Javascript, and was originally written by @karpathy (I am a PhD student at Stanford). However, the library has since been extended by contributions from the community and more are warmly welcome. Current support includes: Common Neural Network modules (fully connected layers, non-linearities) Classification (SVM/Softmax)
レッツトライ！パーツまで認識できる顔認識·Face Tracker MOONGIFT
Face TrackerはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 OpenCVで人の顔を認識するデモは多数ありますが、さらに一歩進めて目、口、鼻、輪郭の認識までできてしまうソフトウェアがFace Trackerです。Webカメラをお持ちの方は遊んでみてください。 こちらはデモの画像。 認識を実行しました。目、眉毛、輪郭、鼻、口が認識されています。精度は高いように見えます。 同様にWebカメラでトライ。このレベルで検出するのは相当な時間と微妙な角度を要しました…。 アイアンマンのマスクを被らせるデモ。 女優さんの顔。口の開き具合も認識できます。 こちらは顔認識した後、パラメータを変更できるデモです。 回転したり…。 口を半開きにしたり…。 Lukeというフィルタ。もはや別人。 Face Trackerの認識精度はまだまだそう高くはありません。特に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Draw2d JS Documentation
GitHub - freegroup/draw2d: Create Visio like drawings, diagrams or workflows with JavaScript and HTML5
GitHub - naptha/tesseract.js: Pure Javascript OCR for more than 100 Languages 📖🎉🖥
IDEA * IDEA
GitHub - auduno/clmtrackr: Javascript library for precise tracking of facial features via Constrained Local Models
