JavaScriptのスコープチェーン・変数参照の仕組みをGIFアニメで分かりやすく解説
JavaScriptのスコープチェーン・変数参照の仕組み、グローバルスコープ、ローカルスコープ、ブロックスコープについてGIFアニメーションで分かりやすく解説された記事を紹介します。 ⚡️⛓JavaScript Visualized: Scope (Chain) by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptのスコープチェーンの仕組みをGIFアニメで分かりやすく解説 JavaScriptのスコープチェーンについてこの記事では解説します。 私は視覚学習者なので、GIFアニメで視覚的に説明することで、あなたの手助けをしようと思います😃 まずは、下記のコードを見てみましょう。 const name = "Lydia" const age = 21 const city = "Sa
プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法
プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法 2020年でJavaScript学ぶならきっとブラウザ向けJSガン無視していきなり初手node.js（ただし暫く何も足さない）がいいんじゃないかというメモ - min.t (ミント) Node.js を教えることについて、自分は賛成なんですが、その学習パスが整理されてないなと思っていたのと、学習パスがなぜ整理されていないかについて書きます。 はじめに 問題意識として、今のプログラミングスクールや独学勢が Ruby on Rails に偏っていて、 Node.js の人間としては、歯がゆく感じているんですが、実際 Node.js を教えるとしても問題も多いと認識しています。 歴史の話は、当時の実情や政治を省いて結果だけを書きます。具体的には第一次ブラウザ戦争、第二次ブラウザ戦争を言及しませ
バックエンドエンジニアのためのVue.js、React、Angular入門 - Qiita
WEBシステム、WEBプログラム開発において昨今ではjQueryではなくVue.js、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれています。その原因はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事は、jQueryを多用するWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説です。 ちなみに自分はサーバ構築からバックエンドまでこなしているワンオペエンジニア（フリーランス、非正規雇用に非ず）です。 コンポーネント、ルーティング、スタイル周りの続編を作成しました（編集が困難になるほど容量圧迫してたので、それぞれで独立させています）。また、Vueは3.2から採用されたscript setup、Angularは14から採用されたスタンドアロン
無料とは思えない多機能っぷりなWikiインフラ「Wiki.js」レビュー、自前でホスト＆外部サービスと連携可能
社内のノウハウ蓄積やソフトウェアの説明書としてWikiを導入する場合、Confluenceなどの有料サービスが第一候補としてあげられますが、決して安くはないライセンス料金を支払う必要があります。無料で利用できるオープンソースソフトウェア「Wiki.js」は、Dockerで手軽に構築でき、権限管理や外部サービスの連携も可能な、無料とは思えないほど多機能なWikiシステムです。 Wiki.js https://wiki.js.org/ Wiki.jsはDockerイメージが公開されているので、今回はLinux上のDockerでWiki.jsを構築してみます。まずは下記コマンドを実行してDockerとDocker Composeを導入。 curl -fsSL get.docker.com -o get-docker.sh sudo sh get-docker.sh sudo curl -L "h
JavaScript学習ロードマップ - Qiita
JavaScript苦手・・という状況からJavaScript好きになれるロードマップ（多分） 全編ほぼ動画なので、とっても見やすい。挫折しづらい。 全体的な流れとしては、動画見る ▶︎ コードを書いて学習の流れです 個人的に好きなエンジニア系Youtuberのお二人の動画がメインになります Yahoo!出身のエンジニア しまぶーのIT大学さん Web万屋エンジニアチャンネルさん LEVEL ☆ JavaScriptってなに？ そもそもJavaScriptって何？フロントエンドって何してるの？ってレベルを解消 フロントエンド基礎編 / 約40分 LEVEL ★ JavaScript入門編 JavaScriptをマスターするならHTMLを知っておかないかん by 弊社マネージャー HTMLの基礎から、JavaScriptの全体像を学習できます。 HTML入門編 / 約43分 JavaScri
PHP って JavaScript に変換できるの？できるわけないだろ！ babel-preset-php ってのが今日リリースされた？これまさか・・・。ファーーーーーーーーーーーwwwwwwwwwwww - Qiita
PHP って JavaScript に変換できるの？できるわけないだろ！ babel-preset-php ってのが今日リリースされた？これまさか・・・。ファーーーーーーーーーーーwwwwwwwwwwwwPHPJavaScriptbabel PHP (7) を Javascript (ES7) に変換するための Babel プリセット babel-preset-php が本日 (2017-7-12) リリースされたみたいです 正直、「は？凄すぎだろ (小並感) 」という言葉しか出てきませんww とりあえず面白そうなので試してみます！ 使い方 公式の通りですが、プロジェクトを作成し babel-cli と babel-preset-php をインストールします。
10年遅れたJavaScriptの知識をざっくり10分でアップデートしよう
久しぶりにJavaScriptを勉強しようと思ったら、すっかり浦島太郎状態だった……なんて人も多いのでは？ モダンなJavaScriptの知識をコンパクトにまとめました。 JavaScriptを取り巻く環境がどんどん変化しています。新たなツールやフレームワークが生み出されているだけでなく、言語そのものがES2015（ES6）の登場で大きく変わりました。JavaScript開発の学習がいかに難しいか愚痴をこぼす記事がたくさんありますが、無理もないことです。 本記事ではモダンJavaScriptを紹介します。JavaScriptの進展を解説し、フロントエンドWebアプリケーションを作るために使われているツールや手法の全体像を確認します。JavaScriptを学び始めたばかりの人や、以前は使っていて数年間離れたため変化を知りたい人はぜひ読んでください。 Node.jsについて Node.jsは
2016年にJavaScriptを学んでどう感じたか.md
2016年にJavaScriptを学んでどう感じたか.md 2016年にJavaScriptを学んでどう感じたか ※この記事は"How it feels to learn JavaScript in 2016"著者であるJose Aguinaga氏による、以下のツイートの本文を確認して記事を翻訳しています。 https://twitter.com/jjperezaguinaga/status/784058480613322752?lang=ja As long as you reference the original article, please feel free to translate/quote “How it feels to learn JavaScript in 2016” in any media. また、このような素晴らしい記事を書いて頂いたJose Aguinaga
koboでhtmlアプリ?
楽天の電書リーダkobo、盛り上がってますね。いろんな意味で。 koboは、USBストレージとして中身が直接見え、そこにファイルを放り込むだけで書籍として認識される、という自由度の高いところが一つの素晴らしいところです。 書籍として認識されるファイルとして、htmlも有効なんです。普通の使い方としては、テキストファイルをhtml化して入れると、ページネーションをして読めるということなんですが、このhtmlはjavascriptが動くんですね。 というわけで、アプリっぽいものが作れるんじゃないかと試してみよう、というのがこのページです。 javascriptが動くといっても、普通のブラウザに比べればいろいろ制約があります。 ちょっと調べた結果、いままでわかってるのは以下の様な感じです。 html単独ファイルのみで構成される必要があり、外部の画像やcss,jsファイルはとりこまれない。 フォー
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
JSX のアレな所 - ぐるぐる～
注意！このエントリは既に古いので、JSX の進化速度が半端ない - ぐるぐる〜もあわせて読んでください。最新のコードを参照するのが手っ取り早いです。 JSX なる言語がリリースされました。 この言語が謳っているのが、 高速 安全 簡単(生産性が高い、とも) という 3 点です。 高速と安全はまぁいいでしょう*1。 問題は、はたしてこの言語は簡単なのか？という点です。 簡単かどうかは人によるのでアレなのですが、まぁ一部の人にとっては簡単とは言えない (というか書く気がしない) 書き方を強制されるのです。 関数型 数値を受け取って文字列を返す関数を表す型は、JSX では以下のように書きます。 function(:number):string これ単体で見ると分かりやすそうな気配はします。 では、これ読めますか？ function f(g: function(:number):number):
JavaScriptみたいな最近噂の新言語、JSXのお話を聞いてきたよ！ | Ginpen.com
これ行ってきました。 Web先端技術味見部#4 （仮テーマはJSX！） : ATND JSXなにそれ JavaScriptっぽい新言語。本日DeNAが発表。 JavaScript風の記述 って言ってたけどそうでもないと思った。ActionScriptに近い？ 静的型付け →高速 クラスベース →高速 JavaScriptに変換しても →高速 玄人が書いたJavaScript並 クライアントサイドでもサーバーサイドでも動く というかJavaScriptが動く環境なら動く JavaScriptを置き換えるのが目標 リンク DeNA開発、高速なJavascriptコードを生成できる新言語「jsx」への反応まとめ – Togetter JSX – a faster, safer, easier alternative to JavaScript 公式サイト JSX – Statically-typ
node.jsは普及しそうに無い
ここ一ヶ月ぐらいからJavaScriptが注目されているようだ。理由は簡単で、GoogleのJavaScriptエンジンを使ったアプリケーション・サーバーであるnode.jsの性能が高いと主張されているからだ。 地味にブームになりつつあり、Ajaxのようにウェブ開発の現場に定着するかも知れない。多数のブログで紹介がされている。現状のその特徴を振り返りつつ、node.jsが普及するかを考察してみた。 1. JavaScriptは、ブラウザ発の人気スクリプト言語 JavaScriptは、LiveScriptとして1995年にNetscape Navigatorというウェブ・ブラウザに搭載されたのが始まりで、すぐに政治的な理由でJavaScriptに改名された。1996年には、その基本的な文法がECMAScriptとして、ECMA-262とISO/IEC 16262で定義されている。言語仕様が簡
あまり知られていない脆弱性：DOM Based XSSにご用心｜アークウェブのブログ
こんにちは、SEの進地です。 XSS（Cross Site Scripting）脆弱性の中であまり注意を払われていないタイプにDOM Based XSSというものがあります。アナウンス自体は随分と昔から行われており、webappsec.orgでも2005/7/4にAmit Klein氏が"DOM Based Cross Site Scripting or XSS of the Third Kind"を発表しています。 Web 2.0的アプリなどでのAjaxの普及でJavaScriptが多用される現在のWeb開発では、DOM Based XSSが入り込む可能性は従来よりも高まっています。そこで、今回はこのDOM Based XSSについて説明しようと思います。 DOM Based XSSとは何か？ 一般的にXSS脆弱性と聞いて思い浮かべるのは、攻撃者の悪意ある入力データ（JavaScript
jQuery初心者向けの基礎をしっかり学べるサイト
【ｊQueryって何からjQueryの基本まで】... / 【jQueryの使い方から動作デモまで】jQue... / 【jQueryでのアニメーションからイージングま...他...全6件
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
JavaScriptで配列をLINQにより処理できるライブラリ「linq.js」を利用するには？ - ＠IT
ちなみに、2つ目の<script>要素内に記述されているのは、最もシンプルなlinq.jsを用いたJavaScriptコードの例である。EnumerableオブジェクトのFromメソッドのパラメータにより配列データを受け取り、ToArrayメソッドにより配列オブジェクトに変換し、元の配列のコピーを作成している。なお、linq.jsが提供する関数を本稿では「メソッド」と呼んでいる。 ファイル「linq.js」はライブラリ本体で、これを参照することでlinq.jsを利用できる。また、ファイル容量を削減したい場合は「linq.js」の代わりに「linq.min.js」（＝JavaScriptコードが圧縮されたもの）を参照してもよい。なお、Visual Studioを利用している場合は、同一ディレクトリに「linq-vsdoc.js」も配置することで、IntelliSenseによる入力補完を働かせ
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
初心者にも分かる Node.js と WebSocket についての解釈まとめ
解釈が間違っている点がある可能性が御座いますのでご了承くださいませ。記事の内容としては「Node.js なら他のサーバよりもこんなに簡単に WebSocket が扱える(ライブラリがある)」というような内容となっていますので、ご了承いただければと思います。 Node.js って何？ Node.js についてよくわからず最初は以下のページを読んでました。 Node.jsに関する基礎や開発・チュートリアルのまとめ:phpspot開発日誌 例えば、ログイン中の2人がいて、1人がチャットのリクエストをしたとします。でもラグが30秒ほどあって、気付かずに閉じちゃうなんてことがなくなります。 メンバーAのブラウザがメンバーBのブラウザに直接プッシュするってことかと最初は思っていましたが違いました。この点について深く考えていくこととなります。 Node.js を使うと何ができるのか node.js を使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
