Deno: Will It Replace Node.JS?
A decade after Node.js was first announced, JavaScript and the web platform have evolved, and TypeScript has changed the way JS applications are developed. Deno is a new JavaScript/TypeScript runtime that was designed with all those new capabilities in mind. EVENT: dotJS 2019 SPEAKER: Bert Belder PUBLICATION PERMISSIONS: Original video was published with the Creative Commons Attribution license
静的なHTMLのためのコンポーネント駆動開発―その導入を振り返って
ここ数年で、「デザインシステム」はウェブ開発やデザインのコミュニティでとても人気の話題になりました。そして「コンポーネント」として定義される一連のデザイン成果物を開発・メンテナンスするために、StyleguidistやStorybookといったツールが多くのプロジェクトで一般的に使われています。このプロセスはデザインシステムという概念の一部として、コンポーネント駆動開発（Component Driven Development）と定義することができるでしょう。 さて、コンポーネント駆動開発にまつわる資料のほとんどは、ReactやVue、Angularといった、フロントエンドのビューのためのメジャーなライブラリを利用することについてのものです。しかしもっとトラディショナルな技術スタックの場合はどうすればいいでしょう？ 例えば私たちスタンダードデザインユニットでは、静的なHTMLとCSSのアセ
【初心者〜中上級者向け】JavaScriptの学習サービスと書籍27選 -
こんにちは。倉内です。 WebサイトやWebサービスの開発に欠かせないJavaScriptは、人気も高く習得したいと考えている方も多いのではないでしょうか。エンジニアへの就職活動をしている学生や、未経験からエンジニアになろうという方にとっても、JavaScriptは習得しておきたい言語の1つです。 動的なWebページの作成といったフロントエンドで用いられるのはもちろん、Node.jsに代表されるようにサーバサイドプログラミングでも存在感を増しています。また、jQueryやReact、Vue.jsなどフレームワークも豊富です。 初めて学ぶプログラミング言語としてJavaScriptを選ぶ方も多いと思いますので、今回は基本・基礎を学びたい初心者の方へ向けたコンテンツから、しっかり学びを深めたい中上級者向けのものまで、JavaScriptを学びたいすべての方へ向けて、学習コンテンツと書籍をご紹介
クライアント側のフォーム検証 - ウェブ開発の学習 | MDN
クライアント側の検証は最初のチェックであり、ユーザーの使い勝手を良くするために重要な機能ですクライアント側で不当なデータを捕捉することで、ユーザーはすぐに修正できます。 もしも無効なデータがサーバーに送られてから拒否された場合、サーバーへの往復とクライアント側に戻ってユーザーにデータを修正するように指示することになり、かなり時間を浪費します。 しかし、クライアント側の検証はセキュリティ対策とは考えられません。アプリは常にサーバー側でもクライアント側と同様に送信されたデータのセキュリティをチェックしてください。なぜならクライアント側の検証は容易に回避することができて、悪意のユーザーは簡単に、サーバーへ不正なデータを送信できます。 有名なサイトの登録フォームに行き、データを求められている書式で入力しないと、フィードバックがあることに気づくでしょう。 次のようなメッセージが表示されます。 「この
rel=preload
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
JavaScriptチュートリアルBeginner's tutorialsYour first website: Adding interactivityDynamic scripting with JavaScriptJavaScript frameworks and librariesJavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子数値と文字列日付と時刻の表現正規表現インデックス付きコレクションキー付きコレクションオブジェクトの利用クラスの使用プロミスの使用JavaScript 型付き配列イテレーターとジェネレーターリソース管理国際化JavaScript モジュール中級編Advanced JavaScript objectsAsynchronous JavaScriptClient-side web APIs言語概要JavaScr
今こそ伝えたい！@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で提供するサービスを厳選してみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webサービスやアプリ開発などで便利に使える機能をAPIで提供しているサービスを厳選してみたのでご紹介いたします。 画像系、ストレージ、CMS、認証系、APIモック…など、さまざまな用途に使えるサービスの特徴や基本的な使い方も合わせて解説しています。いずれも無料で使えるものばかりなので、ご興味ある方はぜひ参考にしてみてください！ ■イラスト風のアバター画像を取得できるAPI 【 Joe Schmoe 】 Webサイト、ブログ、SNSなどに利用可能なアバター画像を取得できるAPIです。 イラスト風の人物画像を取得できるのが特徴で、Webサイトのチームページにアバターとして利用できるほか、自分のプロフィール画像やブログに挿入する画像など無料で利用できます。 使い方は簡単で、以下のような構成のエンドポイントを実行するだけです。 https:/
超初心者がwebpackerについて調べてみたぞ - Qiita
Ruby on Rails を使って開発を始めた今日この頃。 サーバーサイドはそれとなく出来てきたからそろそろフロントも固めて行こうかしら。なんて思っていた僕はBootstrapをRailsで使おうと考えた。Bootstrapを使うのはいたって簡単。htmlのhead内に以下のリンクをぶち込めばいいだけ。 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> なんて便利だこと。 しかし、Bootstrapを使うには他にも方法は
JavaScript プロトタイプ継承の仕組みをGIFアニメで分かりやすく解説
JavaScriptにはどのオブジェクトにもプロトタイプと呼ばれる便利な隠しプロパティがあります。プロトタイプ継承の仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🎉👨👩👧👧 JavaScript Visualized: Prototypal Inheritance by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: プロトタイプ継承 文字列や配列、オブジェクトに対して.length, .split(), .join()のような組み込みメソッドを使用できるのか、疑問に思ったことはありませんか？ それらを明示的に指定したことはありませんが、どこからきたものでしょうか？ これは、プロトタイプ継承（prototypal in
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マルウェア「Emotet」に関する被害報告が昨年10月から増加、ウェブサイト改ざんや標的型攻撃にも注意、JPCERT/CCインデント報告対応レポート 
Enterprise-grade Node.js on Azure | BRK3067
Creating a classic game using HTML & Javascript - Part 1 (Hindi/Urdu)