このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 `-QપView in English Always switch to English 前のページ 次のページ この章では JavaScript の式 (expression) や演算子 (operator) について、代入、比較、算術、ビット、論理、文字列、三項演算子などを説明しています。 高いレベルでは、式 は値に解決するコードの有効な単位です。式には (値を代入するなどの)副作用があるものと、純粋に 評価 を行うものの 2 種類があります。 x = 7 という式は前者の例です。この式は = 演算子 を使用して、変数 x に値 7 を代入しています。この式自体は 7 と評価されます。 3 + 4 という式は後者の例です。この式は + 演算子
#TypeScript #react 2019/10/05 この記事のミッションステートメント TSの型に疲れて生JSに戻ろうとしている人の足首を掴み、世の中にある生JSを一つでも減らす 対象読者 JSよりはちょっと硬いものを使いたい人 TSのd.ts定義で疲れてしまった人 TSは面倒と思っている人 非対象読者 「なんでこんなもの必要なの?」と思った人 多分それは幸せな環境です。大切にしましょう。 @ts-ignoreとは あらゆる型の不整合を握りつぶす。 // @ts-ignoreとコメント形式で書くことで、次の行の型チェックがスルーされる eslint-ignoreなどに近い 構文エラーは潰せない babelなどを通してどうしてもOptional Chainingを使おうとしたことがあるが、やっぱりこれは無理 危険なのでは? 安全でないのは間違い無い 用法用量を守って正しく使いましょう
こんにちは、年末年始に新しくWindows10の自作PCを組んだ虎の穴ラボのおっくんです。 昨年から、Web audioを取り扱うライブラリとしてTone.jsを使って、 ブラウザで音を鳴らしたりということをしていたのですが、一歩進んで再生する音を可視化したいと思いました。 可視化の方法としては、発生させる音を文字で表示するということもできるのですが、 今回は音楽再生ソフトの視覚エフェクトをイメージして作成することにしました。 Web audioを扱うTone.jsとCanvasを扱うp5.jsの2つライブラリを使用して、円環状に配置した音程に対応したバーが伸び縮みするアニメーションをCanvasに表示させます。 完成したページは以下のようになります。 音楽再生アプリの画面 完成品はこちらアップロードしておりますので、ぜひ見てみてください。 開発環境 OS MacOS Mojave バージ
今回は関西の 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 にも変
ニジボックスでは、社員のスキルアップを全力で応援!そんな取り組みの一つとして、社員であれば職種や職域に関係なく誰でも参加できるさまざまな勉強会を開催しています。 それらの勉強会では、スペシャルゲストが講師として指導をしてくださることも! 昨年の年末、12月23日に行われたJavaScript Bootcamp2019では、株式会社リクルートホールディングスの本社ビルの会議室を借りて、株式会社リクルートテクノロジーズのアプリケーションソリューショングループのグループマネジャーをされている古川陽介さんにご指導いただきました。 講師は、Node.jsグループコミュニティの代表 古川陽介さん 今回、JavaScript Bootcamp2019の講師としてニジボックス社員を指導してくださったのは、リクルートテクノロジーズの古川陽介さん。エンジニアの方であれば、名前を聞いたことがあるという方も多いの
Blnq StudioはCodepenのようにブラウザ上でコードを書いて実行テストを行えるWebアプリです 同じようにHTML、CSS、JavaScriptの動作テストが可能なのですが、少し違う点はJSONタブがある点、スマホモードなどモニタサイズをいつでも変更できる点、ルーラー機能があったりブラウザのインスペクタライクなモードがある点、パフォーマンスチェックを行える点、ローカルのものも含む任意のフォントを手軽に読み込める点でしょうか エディターペインにミニマップを追加できるのも地味に便利な気がしました デザインも無駄がなくスッキリしたUIで、プロトタイプを作ってクライアントに見せるのにも使えるよ、との事です 逆に、CodepenにあってBlnqにない機能もいっぱいあるので別用途のアプリとして考えると良いかもですね。EmbedとかSASS、Pugなどで書くことも出来ないしコメントやシェアな
訳者前書き 本記事は、InspiredWebDevの原文記事(英語)について、自身の理解を深める為に日本語翻訳したものです。 はじめに JavaScriptは絶えず進化している言語であり、過去数年で多くの新機能がECMAScriptの仕様に追加されました。 この記事は、Alberto氏の著書「最新のJavaScriptの完全ガイド(Complete Guide to Modern JavaScript)」の抜粋です。 同書では、ES2016、ES2017、ES2018、ES2019の新規追加要素について説明しています。 記事の最後に、すべてを要約したチートシートをダウンロードするためのリンクがあります。 1. ES2016の新機能 ES2016で導入された2つの新機能について説明します。 Array.prototype.includes() 指数演算子(べき乗) 2. Array.prot
どうも、まさとらん(@0310lan)です! 今回は、Webサービスやアプリ開発などで便利に使える機能をAPIで提供しているサービスを厳選してみたのでご紹介いたします。 画像系、ストレージ、CMS、認証系、APIモック…など、さまざまな用途に使えるサービスの特徴や基本的な使い方も合わせて解説しています。いずれも無料で使えるものばかりなので、ご興味ある方はぜひ参考にしてみてください! ■イラスト風のアバター画像を取得できるAPI 【 Joe Schmoe 】 Webサイト、ブログ、SNSなどに利用可能なアバター画像を取得できるAPIです。 イラスト風の人物画像を取得できるのが特徴で、Webサイトのチームページにアバターとして利用できるほか、自分のプロフィール画像やブログに挿入する画像など無料で利用できます。 使い方は簡単で、以下のような構成のエンドポイントを実行するだけです。 https:/
<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 Visualized: Prototypal Inheritance by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: プロトタイプ継承 文字列や配列、オブジェクトに対して.length, .split(), .join()のような組み込みメソッドを使用できるのか、疑問に思ったことはありませんか? それらを明示的に指定したことはありませんが、どこからきたものでしょうか? これは、プロトタイプ継承(prototypal in
マイクロソフトが開発中の新しい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にもES2015以降はclass構文があり、extendsを用いてクラスの継承を記述することができます。また、それより以前もprototypeを通じてオブジェクト指向的なプログラムが書かれてきました。 この記事では、JavaScriptにおける「継承」がどのようなものであり、どのように定義されるのかを解説します。タイトルにある通り、今回はECMAScript仕様書に対する解説を中心とします。 仕様書はJavaScriptというプログラミング言語がどのようなものかを定義する文書であり、あなたが書いたJavaScriptプログラムは仕様書に書かれた通りの動きをすることになります1。したがって、たとえあなたが自分自身で書いたものだったとしても、JavaScriptプログラムの意味を完全
はじめに この記事では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
pastak.iconPasta-K @ Kyoto.js 17 こんにちは 誰 京都大学工学部情報学科7回生 株式会社はてな アルバイト TypeScript Nota Inc Gyazo開発チーム アルバイト JavaScript / React / Ruby on Rails / Browser Extension ビール仕入れ業 / ビールサーバー運用エンジニア 趣味: ビール🍻 今日のトークテーマ 先月ブログに書いた ウェブページの表示を遅くなくしたい時の道標 - ぱすたけ日記 の話をします 主にウェブページの表示に関するパフォーマンスの話 ウェブページのパフォーマンス 阿部寛のホームページは高速 素朴なHTML CSS無し テーブルレイアウト ウェブアプリケーションを作っていると、素朴だったページも雪だるま式に色んなものがくっついてくる 画像 JS/CSS あらゆるモジュール
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに JavaScriptの基礎をある程度終え、次の開発環境がReactをTypeScriptで書くということだったので一通り学んでみました。 今回は羽山 博さんのTypeScriptで学ぶJavaScript入門を参考にしてまとめました。文章やコードはサイトから引用したものになります。2014年から2015年に連載されたものなので情報が古い点があるかもしれません。プログラミング初学者向けに書かれた記事だったので大変わかりやすかったです。 詳しい内容などは、サイトを参考にしてください。全部まとめたので結構長いです。 3、4日かけて読
AWS事業本部の梶原@福岡オフィスです。去年のre:Inventで実施されていたWorkshopを今年に入って実施しようとすると見事に Node.js 8.10を使用するAWS Lambdaがランタイムサポートポリシーにより新規作成ができない状況となっていましたので移行しました ランタイムサポートポリシー https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/runtime-support-policy.html 自分でAWS Lambdaを作成して修正できるものはいいんですが、公開されているS3などからソースを取得して、ワークショップで使用する環境をCloudFormation一発で作るワークショップなどではStackがエラーするケースがあります。(Bootstrapやカスタムリソースなど) ということで、該当するCloudFormatio
TypeScript の Promise の型 だと、型パラメータが Promise#then 側しかなくて、 Promise#catch 側の型が any になってしまって不便だ。 もし、catch 側の型についても型引数で指定できたなら、より安全なプログラミングができる。 そこで、catch 側の型を指定していない理由について考察してみた。 理想 const promise: IdealPromise<T, E> = getPromise(); promise .then((x) => { /* x は T 型 */ }); promise .catch((e) => { /* e は E 型 */ }); 実際 const promise: Promise<T> = getPromise(); promise .then((x) => { /* x は T 型 */ }); prom
はじめに 未経験からNode.jsの現場に配属された2019年新卒エンジニアが、学習の振り返りとしてJavaScriptの基礎の基礎をまとめます。 今回は、JavaScriptの変数宣言についてあらためて整理し、なぜ近年のJavaScriptではvarの使用が推奨されていないのかをまとめたいと思います。 こういう人に読んでもらいたい JavaScriptを勉強したてで、ひとまず変数にはvarを使ってる人 letやconstを使っているけど、改めて訊かれると理由を上手く説明できない人 JavaScriptにおける変数宣言をおさらい 本題に入る前に、まずJavaScriptの宣言に関する基本的な挙動を整理します。 宣言の種類は? 2019/12月現在、JavaScriptの変数宣言キーワードにはvar, let, constの3つがある。 元々はvarしかなかったところに、ECMAScript
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く