マルウェア「Emotet」に関する被害報告が昨年10月から増加、ウェブサイト改ざんや標的型攻撃にも注意、JPCERT/CCインデント報告対応レポート 
クライアント側のフォーム検証 - ウェブ開発の学習 | MDN
クライアント側の検証は最初のチェックであり、ユーザーの使い勝手を良くするために重要な機能ですクライアント側で不当なデータを捕捉することで、ユーザーはすぐに修正できます。 もしも無効なデータがサーバーに送られてから拒否された場合、サーバーへの往復とクライアント側に戻ってユーザーにデータを修正するように指示することになり、かなり時間を浪費します。 しかし、クライアント側の検証はセキュリティ対策とは考えられません。アプリは常にサーバー側でもクライアント側と同様に送信されたデータのセキュリティをチェックしてください。なぜならクライアント側の検証は容易に回避することができて、悪意のユーザーは簡単に、サーバーへ不正なデータを送信できます。 フォーム検証とは何か 有名なサイトの登録フォームに行き、データを求められている書式で入力しないと、フィードバックがあることに気づくでしょう。 次のようなメッセージが
rel=preload - HTML | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年1月. * Some parts of this feature may have varying levels of support. Learn more See full compatibility Report feedback preload は <link> 要素の rel 属性の値で、その HTML の <head> の中で読み取りリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み取りを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソ
同じUIコンポーネントをCSSで静的に、Vue.jsやプレーンのJavaScriptで動的に実装する -Tailwind Starter Kit
最近のWebページやスマホアプリのUIでよく使用されるさまざまなコンポーネントをCSSで静的に、Vue.jsやReact.jsやプレーンのJavaScriptで動的に実装するためのコードをまとめたTailwind Starter Kitを紹介します。 CSSは分かるけど、Vue.jsやReact.jsは苦手という人にもよいと思います。 Tailwind Starter Kit Tailwind Starter Kit -GitHub Tailwind Starter Kitの特徴 Tailwind Starter Kitのデモ Tailwind Starter Kitの使い方 Tailwind Starter Kitの特徴 Tailwind Starter Kitは、WebページやスマホアプリのUIに使用するさまざまな静的・動的コンポーネントをTailwindCSSを使って簡単に実装できま
Sweetconfirm.js - 送信を思いとどまらせるボタン MOONGIFT
送信フォームを押してしまって後悔した経験はないでしょうか。Gmailなどでは送信後にキャンセルできる機能が追加されました。押す前に熟考したはずなのに、押すとアラが見つかる、なんてことはよくあります。 今回紹介するSweetconfirm.jsは送信完了するまでに少し猶予をくれる、そんなライブラリです。 Sweetconfirm.jsの使い方 押すのを途中でやめるとキャンセルされます。 しばらく押し続けていると送信完了します。 Sweetconfirm.jsは一度押すだけでは送信されず、ボタンを押し続けないといけません。その仕組みが通常とは違うので、説明をきちんとしないと使い方に戸惑う人もいそうです。とはいえミスを減らすための仕組みとして面白いです。 Sweetconfirm.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 koddr/sweetc
式と演算子 - JavaScript | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 ��Z ��View in English аJ ��Always switch to English 前のページ 次のページ この章では JavaScript の式 (expression) や演算子 (operator) について、代入、比較、算術、ビット、論理、文字列、三項演算子などを説明しています。 高いレベルでは、式 は値に解決するコードの有効な単位です。式には （値を代入するなどの）副作用があるものと、純粋に 評価 を行うものの 2 種類があります。 x = 7 という式は前者の例です。この式は = 演算子 を使用して、変数 x に値 7 を代入しています。この式自体は 7 と評価されます。 3 + 4 という式は後者の例です。この式
今こそ伝えたい！@ts-ignoreの魅力 - terrierscript: 保存済みの下書き
#TypeScript #react 2019/10/05 この記事のミッションステートメント TSの型に疲れて生JSに戻ろうとしている人の足首を掴み、世の中にある生JSを一つでも減らす 対象読者 JSよりはちょっと硬いものを使いたい人 TSのd.ts定義で疲れてしまった人 TSは面倒と思っている人 非対象読者 「なんでこんなもの必要なの？」と思った人 多分それは幸せな環境です。大切にしましょう。 @ts-ignoreとは あらゆる型の不整合を握りつぶす。 // @ts-ignoreとコメント形式で書くことで、次の行の型チェックがスルーされる eslint-ignoreなどに近い 構文エラーは潰せない babelなどを通してどうしてもOptional Chainingを使おうとしたことがあるが、やっぱりこれは無理 危険なのでは？ 安全でないのは間違い無い 用法用量を守って正しく使いましょう
Tone.jsとp5.jsで音の発生を可視化する - 虎の穴ラボ技術ブログ
こんにちは、年末年始に新しくWindows10の自作PCを組んだ虎の穴ラボのおっくんです。 昨年から、Web audioを取り扱うライブラリとしてTone.jsを使って、 ブラウザで音を鳴らしたりということをしていたのですが、一歩進んで再生する音を可視化したいと思いました。 可視化の方法としては、発生させる音を文字で表示するということもできるのですが、 今回は音楽再生ソフトの視覚エフェクトをイメージして作成することにしました。 Web audioを扱うTone.jsとCanvasを扱うp5.jsの2つライブラリを使用して、円環状に配置した音程に対応したバーが伸び縮みするアニメーションをCanvasに表示させます。 完成したページは以下のようになります。 音楽再生アプリの画面 完成品はこちらアップロードしておりますので、ぜひ見てみてください。 開発環境 OS MacOS Mojave バージ
v-kansai Vue.js/Nuxt.js meetup #13 に参加してきました | DevelopersIO
今回は関西の Vue.js / Nuxt.js 関連のイベントを開催するコミュニティ v-kansai 様が主催するmeetupに参加してきました 西田@大阪です 今回は関西の Vue.js / Nuxt.js 関連のイベントを開催するコミュニティ v-kansai 様が主催する meetupに参加してきました！ Vue.Draggable で手軽にリストを ドラッグ&ドロップで並び替え Torello のようなアプリを作る時に使える Vue.draggable バインドしておけば、リアクティブに並び替え可能 Soratable.jsの機能を利用している 並び替えが容易 導入と使い方 v-model ディレクティブで配列を指定 D & Dして並び替えが行われたら、dataも変更される groupを合わせると複数列にまたがるの要素の入れ替えも可能 タグはデフォルト div だが ul にも変
実践形式で学ぶ！JavaScript Bootcamp2019を開催しました！ | フロントエンドエンジニア
ニジボックスでは、社員のスキルアップを全力で応援！そんな取り組みの一つとして、社員であれば職種や職域に関係なく誰でも参加できるさまざまな勉強会を開催しています。 それらの勉強会では、スペシャルゲストが講師として指導をしてくださることも！ 昨年の年末、12月23日に行われたJavaScript Bootcamp2019では、株式会社リクルートホールディングスの本社ビルの会議室を借りて、株式会社リクルートテクノロジーズのアプリケーションソリューショングループのグループマネジャーをされている古川陽介さんにご指導いただきました。 講師は、Node.jsグループコミュニティの代表 古川陽介さん 今回、JavaScript Bootcamp2019の講師としてニジボックス社員を指導してくださったのは、リクルートテクノロジーズの古川陽介さん。エンジニアの方であれば、名前を聞いたことがあるという方も多いの
Codepenのようにブラウザでコードを書いて実行テストできる・「Blnq Studio」 - かちびと.net
Blnq StudioはCodepenのようにブラウザ上でコードを書いて実行テストを行えるWebアプリです 同じようにHTML、CSS、JavaScriptの動作テストが可能なのですが、少し違う点はJSONタブがある点、スマホモードなどモニタサイズをいつでも変更できる点、ルーラー機能があったりブラウザのインスペクタライクなモードがある点、パフォーマンスチェックを行える点、ローカルのものも含む任意のフォントを手軽に読み込める点でしょうか エディターペインにミニマップを追加できるのも地味に便利な気がしました デザインも無駄がなくスッキリしたUIで、プロトタイプを作ってクライアントに見せるのにも使えるよ、との事です 逆に、CodepenにあってBlnqにない機能もいっぱいあるので別用途のアプリとして考えると良いかもですね。EmbedとかSASS、Pugなどで書くことも出来ないしコメントやシェアな
最新のJavaScript: ES2016からES2019までの知るべき全て - Qiita
訳者前書き 本記事は、InspiredWebDevの原文記事(英語)について、自身の理解を深める為に日本語翻訳したものです。 はじめに JavaScriptは絶えず進化している言語であり、過去数年で多くの新機能がECMAScriptの仕様に追加されました。 この記事は、Alberto氏の著書「最新のJavaScriptの完全ガイド(Complete Guide to Modern JavaScript)」の抜粋です。 同書では、ES2016、ES2017、ES2018、ES2019の新規追加要素について説明しています。 記事の最後に、すべてを要約したチートシートをダウンロードするためのリンクがあります。 1. ES2016の新機能 ES2016で導入された２つの新機能について説明します。 Array.prototype.includes() 指数演算子(べき乗) 2. Array.prot
思わずWeb開発で使いたくなる便利機能をAPIで提供するサービスを厳選してみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、Webサービスやアプリ開発などで便利に使える機能をAPIで提供しているサービスを厳選してみたのでご紹介いたします。 画像系、ストレージ、CMS、認証系、APIモック…など、さまざまな用途に使えるサービスの特徴や基本的な使い方も合わせて解説しています。いずれも無料で使えるものばかりなので、ご興味ある方はぜひ参考にしてみてください！ ■イラスト風のアバター画像を取得できるAPI 【 Joe Schmoe 】 Webサイト、ブログ、SNSなどに利用可能なアバター画像を取得できるAPIです。 イラスト風の人物画像を取得できるのが特徴で、Webサイトのチームページにアバターとして利用できるほか、自分のプロフィール画像やブログに挿入する画像など無料で利用できます。 使い方は簡単で、以下のような構成のエンドポイントを実行するだけです。 https:/
超初心者がwebpackerについて調べてみたぞ - Qiita
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> なんて便利だこと。 しかし、Bootstrapを使うには他にも方法はある。それは以下のリンクにある通りだ。 https://qiita.com/rhistoba/items/f724dae231d7e28bf477 つまり、railsにBootstrapをインストールしてしまう方法である。 基本的には、リンクの記事通りに手順を踏めばインストールできるのであるが、超初心者の僕
JavaScript プロトタイプ継承の仕組みをGIFアニメで分かりやすく解説
JavaScriptにはどのオブジェクトにもプロトタイプと呼ばれる便利な隠しプロパティがあります。プロトタイプ継承の仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🎉👨👩👧👧 JavaScript Visualized: Prototypal Inheritance by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: プロトタイプ継承 文字列や配列、オブジェクトに対して.length, .split(), .join()のような組み込みメソッドを使用できるのか、疑問に思ったことはありませんか？ それらを明示的に指定したことはありませんが、どこからきたものでしょうか？ これは、プロトタイプ継承（prototypal in
Chromium版Microsoft Edge、明日1月15日に予定通り正式公開の見通し
マイクロソフトが開発中の新しいWebブラウザ、いわゆるChromium版Microsoft Edgeが、明日1月15日に予定通り正式版となり、公開される見通しです（おそらく日本時間で15日深夜頃からではないかと予想されます） 同社は2019年11月に行われたイベント「Microsoft Ignite 2019」で、1月15日がChromium版Microsoft Edgeの正式リリース日になると発表していました。 The new Microsoft Edge is coming January 15 -- with improved performance, security, and privacy. Download the Beta to check it out today! https://t.co/juVlca7jk3 pic.twitter.com/WQIz0KIb44 —
JavaScriptの「継承」はどう定義されるのか？ 仕様書を読んで理解する - Qiita
継承は、クラスベースのオブジェクト指向における基本的な概念のひとつであると信じられています。JavaScriptにもES2015以降はclass構文があり、extendsを用いてクラスの継承を記述することができます。また、それより以前もprototypeを通じてオブジェクト指向的なプログラムが書かれてきました。 この記事では、JavaScriptにおける「継承」がどのようなものであり、どのように定義されるのかを解説します。タイトルにある通り、今回はECMAScript仕様書に対する解説を中心とします。 仕様書はJavaScriptというプログラミング言語がどのようなものかを定義する文書であり、あなたが書いたJavaScriptプログラムは仕様書に書かれた通りの動きをすることになります1。したがって、たとえあなたが自分自身で書いたものだったとしても、JavaScriptプログラムの意味を完全
JavaScriptのUIライブラリ ReactのHook使用してToDoアプリを作成してみました - Qiita
はじめに この記事ではJavaScriptのライブラリであるReactとReactの機能であるhookを使用して簡単なToDoアプリの実装を行います。 以前に書いた記事をベースに書き換えるので、そちらも参考にしてみてください。 JavaScriptのUIライブラリ ReactでToDoアプリを作成してみました Reactのドキュメントやチュートリアル（三目並べ）を一通り行った後の練習になるように書きたいと思います。 環境構築に関しては、create-react-appを使用して作成しています。 環境構築に関しては以前書いた記事があります。 ソースコード 目次 コンポーネントの確認 各コンポーネントの解説 まとめ 1. コンポーネントの確認 すぐに動かせる環境を置いておきます。 See the Pen ReactToDo with Hook by oq-Yuki-po (@oq-yuki-p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Enterprise-grade Node.js on Azure | BRK3067
Creating a classic game using HTML & Javascript - Part 1 (Hindi/Urdu)