ES Modules入門 - JavaScriptのモジュールを使う方法 - ICS MEDIA
JavaScriptには、モジュールという仕組みがあります。ECMAScript 2015のModulesに標準仕様として策定されており、現在はすべてのブラウザで利用できます。この機能は、ECMAScript Modules、ES Modules、ESMなどと呼ばれています（以下、ES Modulesと記載します）。 Viteやwebpackなどのフロントエンドのツールを通して、ES Modulesを使っているエンジニアは多いでしょう。本記事では、ブラウザネイティブで使えるES Modulesに焦点をあて、ES Modulesで解決できる課題と利点を紹介します。 HTML+JSではモジュールの仕組みがなかった 昔（2010年代前半）のJavaScriptには他のJSファイルを取り込む仕様が昔は存在しませんでした。外部JSファイルを読み込みたい時には、HTMLファイルにscriptタグを書き
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita
概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロンドエンドアプリかいているけど、「何となく」理解している人 来年の新人教育係 キーワード 本投稿では、以下のようなキーワードが出てきます。 Node.js、npm、ES6(ECMAScript6
JavaScriptユーザのための関数型プログラミング(後編) | POSTD
この記事の前編はこちら： JavaScriptユーザのための関数型プログラミング(前編) 遅延評価 遅延評価 は、 サンク や ジェネレータ などのもっと具体的な概念をカバーする一般的な用語の一種です。遅延評価は、その言葉が表すとおりのことを行います。つまり、値が必要になるまで評価しません。可能な限りずるずると、先延ばしにします。例えば、洗わなければならない食器が大量に、もしかすると無限にあるとします。食器を全て流しに置いて一度に洗うのではなく、ゆっくり、一度に1つずつ取って洗うのに似ています。 遅延評価の本質を少しでも理解しやすくするために、Haskellを使って説明したいと思います。まず、 プログラムがどのように評価を行うか を理解する必要があります。皆さんが慣れているほとんど全ての言語は、 最内簡約 を用いています。最内簡約とは、次のようなものです。
JavaScriptユーザのための関数型プログラミング(前編) | POSTD
私が関数型プログラミングについて度々耳にするようになったのは、数カ月前からです。でも当時は、それが何なのか見当もつかず、単なるバズワードだと思っていました。皆さんの中にも、そのような方は多いでしょう。それ以来、私は関数型プログラミングについて深く学び、この言葉を日々聞いてはいるものの内容を理解していない初心者の方のために、分かりやすく説明しようと思い立ちました。 関数型プログラミング言語の話になると、「 Haskell と Lisp は どちらが優れているのか 」という 議論 が 白熱する 傾向にあります。HaskellとLispはどちらも関数型言語ですが、実際には大きな違いがあって、それぞれに長所と短所があります。その具体的な内容については、この記事を読み終える頃には深く理解していただけると思います。この2つの言語には、それぞれから派生した言語があります。その中で恐らく皆さんが耳にしたこ
継続渡しによる停止・再開可能な反復処理 - JavaScriptライブラリでお馴染みの$関数を関数スタイルで実装してみる
ここ最近の Scheme プログラミングで得た感覚を踏まえ、各種 JavaScript ライブラリでお馴染みの $ 関数 (ID による要素検索) を、ごく簡易にですが、関数スタイルで実装してみました。 まずは実装を見ていただく前に、このような例を考えてみてください。 $("id").do_something(); ここで、"id" 要素が確実に見つかるかどうかが保証されていない (do_something が失敗するかもしれない) とします。すると、 var o = $("id"); if (o) { o.do_something(); } のように、いちいちテストをしなければいけませんよね。 これが、関数スタイルでは $("id", do_something); と書くだけで済みます。つまり、$ 関数自身が成否のチェックを行い、成功していればコールバック関数にオブジェクトを渡すように設
無限数列、無限級数、円周率 - (new Hatena).blog()
SICP ネタです。 SICP ３章のストリームの節に、ライプニッツ級数というものが紹介されています。 pi/4 = 1 - 1/3 + 1/5 - 1/7 + ...という式です。項毎に符号が入れ替わる奇数の逆数の無限列、その総和が、パイの４分の１に収束する、というものです。 一見理解しがたい話ですが、このことの理論的背景については Wikipedia の解説を参照していただきたいと思います。 理論はさて置き、本を読んでいて「なんか簡単に JavaScript でも出来そう」と思ったので、やってみました (本文最後にデモページへのリンクがあります)。 以下、コードは全て Scheme からの翻訳です。 Stream in JavaScript まずストリームの実装を考えましょう。 ストリームとは、遅延リストとも言い、コンピュータの有限リソースの中で無限列の表現を可能にするものです (有限
Class構文について - JS.next
概要 待ち焦がれた人も多いことだろう。ES2015の一番の目玉機能とも言えるクラス構文が、ついにV8でサポートされた。 Class構文は、『関数（コンストラクタ）定義』＋『.prototypeへのメソッド定義』の糖衣構文である。 JSで今まで様々に工夫されてきたクラスの書き方を、綺麗に統一してくれる可能性を秘めている。 クラスを作る 従来、Catクラスを作ろうとした場合このように書いてきた。 function Cat(name) { this.name = name } Cat.prototype.meow = function () { alert( this.name + 'はミャオと鳴きました' ) } しかしこの書き方だとどうしても、コンストラクタとメソッドの定義が分離されているため、クラスとしてまとまりがなく分かりづらく感じる。 メソッドが増えてきた時も、Cat.prototyp
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section5 ～ES2015文法を覚えよう(前編)～ - Qiita
はじめに この記事は「旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門」の5つ目の記事です。 シリーズの最初から読みたい方は 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ へどうぞ。 また、このシリーズではECMAScript5を概ね対応するブラウザを対象としています。 もっと平たくいうと、IE8以下は切り捨てます。ご了承ください。 このシリーズを通して、原則として厳密さよりも分かりやすさを優先するためこのようにします。予めご了承ください。 目次 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ Section2 ～CommonJSモジュールと仲良くなろう～ Section3 ～Browserifyをマスターしよう～ Se
いまどきなフロントエンド開発者になる！JSのモジュール管理ってこういうこと
Browserify、Webpackなど、ここ数年耳にするようになったフロントエンド開発ツール。結局何をやってるの？ いまどきのフロントエンド開発者になるために欠かせない、JavaScriptのモジュール管理についての少し長いまとめ。 本記事はDan PrinceとRavi Kiranが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 開発者はモジュール、依存関係の管理、最新のプログラミング言語の基本的要件の動的ロードについて考えています。重要ないくつかの機能は、2015年にJavaScriptに追加されたものです。 モジュールはNode.jsで広く使われていますが、この記事ではモジュールをブラウザーで使う方法について焦点をあてていきます。少し過去を振り返り、混乱しがちな現在の状況までの歩みを紹介しながら、将来の見通
Node.jsのexportsについて - 30歳からのプログラミング
Node.jsにはモジュール機能があり、他のファイルの内容を読み込むことが出来る。 だが、何となくでしか使い方を理解していなかったので、調べてみた。 このエントリのコードは全て、v4.4.3で動かした。 基本 まず、呼び出される側のファイルで、モジュール化する値やオブジェクトをexportsしておく。 そうすることで、その値やオブジェクトに外部からアクセスすることが可能になる。 呼び出す側ではrequire()関数を使い、ファイルを読み込む。 読み込んだファイルから、exportsされている値やオブジェクトにアクセスできるようになる。 // parts.js var value = '値'; var foo = 'foo'; exports.value = value; // index.js var parts = require('./parts.js'); console.log(p
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
やっぱりサーバーサイドレンダリングなんかしなくていいやという気持ち - console.lealog();
個人の意見 aka ポエムです。 界隈的には今さら感がすごいけど。 そんな今さらポエった事情としては、 とある案件でSPAをReactで作りつつサーバーサイドレンダリング（以下SSR）をすることになるかも SPAじゃないページもまとめてReactでSSRすることになるかも ただ個人的にはSPA+SSR不要論者 サーバーサイドのテンプレートとしてのReactも冗長なだけやろ派 でも仕事なのでしゃーない（お客様がそう申されるなら・・ なのでやるからには再考察してみて、前向きにやれる要素を見つけたい！ けどどんだけ考えてもやっぱり意義が見つけられなーい( ´Д｀)=3 という感じで、SSR自体の是非はまあどうでもよくて、ただ個人的に「しなくていい」と思ってる気持ちをまとめたものです。 技術に是も非もないです。大事なのはどう使うかなのです。 ちなみにやってみた結果・・とかいう話ではなく、やってない
Universal / Isomorphic JavaScript について - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近聞かれなくなってきた Isomorphic JavaScript ですが、気付けば今は Universal JavaScript と呼ばれているらしいです。 そもそも日本語の記事が少なくて困ったので、色々調べたものを整理するために書きます。 とても簡単にふわっとまとめると、以下のような感じ。 SPA で問題となるのがSEO対策、初回ロード時間 SSR はこれを解決してくれるが、クライアントとサーバでロジックの重複が発生 同じコードをクライアントとサーバで実行しよう = Isomophic! 同じコードをネイティブアプリやデスクトップ
@mizchiのマイページ - Qiita
posted articles:React:21%JavaScript:19%flowtype:8%CoffeeScript:6%Node.js:4%
俺のJSライブラリの世界観(2014末版) - Qiita
概論 ここ近年のモダンJSは特に理由がなければcommon.jsのrequireスタイルで記述され、webpack/browserifyでビルド/読み込むことを前提にしてよい。今やビュー層を除いてブラウザとnodeのライブラリの境界は非常に曖昧である。 識者諸君においては常にどちらの環境でも読み込めるようなライブラリを提供するように心がけることを切に願う。 今日はライブラリの名前しか出さないんで各自ググるように。 立場 サーバサイド~ゲームプログラミング出身node寄りフロントエンドエンジニア このサイトのスタッフだけど他のことに手一杯でQiitaのフロントはまだそんなにいじってない すまんな 他ってなんだろうな 言語 CoffeeScript TypeScript 最近DDDっぽい構成を目指しているのだけど、コアドメインをTypeScriptで書いて、それをUI層からCoffeeScri
BabelでES6で書いて、webpackでビルドして、mochaでテスト書いて、power-assertでassertの出力を見やすくして、karmaで複数ブラウザのテストを自動化して、カバレッジを出力するようにした - UUUMエンジニアブログ
おはこんばんちは!! 尾藤 a.k.a. BTOです。 UUUMでは業務の効率改善に kintone を導入しようとしているのですが、kintone の機能を拡張するには Javascript でプログラムを書く必要があります。 そこで、Javascript の開発環境を構築したので、何をやったのかをまとめてみました。 具体的には、 BabelでES6で書いて、webpackでビルドして、mochaでテスト書いて、power-assertでassertの出力を見やすくして、karmaで複数ブラウザのテストを自動化して、カバレッジを出力するようにしました。 お前は何を言っているんだと思うかもしれませんが、僕も何を言っているのかわかりません。 Babel 言わずと知れた ES6 用のトランスパイルツールです。 ご存知の方も多いと思うので、詳細は割愛しますね。 Babel の導入は npm でイ
ECMAScript 2015（ECMAScript 6th edition）とトランスパイラとAltJS（Alternative JavaScript）と - ts0818のブログ
ECMAScriptとは? JavaScriptは1995年にWebで実行できるスクリプト言語として開発されたそうですが、ブラウザベンダーによる独自の拡張が多く互換性が低かったので、ブラウザ間で動いたり動かなかったりがあったのではないかと。 そこで、Ecmaインターナショナルが中心となり、JavaScriptの中核仕様を抜き出して標準化したのがECMAScriptのようです。 ・ECMAScript 2015(ES6)の概要と次世代JavaScriptの新たな機能 | HTML5Experts.jp 言語仕様を整理していきましょうということみたいです。 ES2015（ES6）で追加された仕様 ECMAScript 6th editionの6を取ってECMAScript 6（ES6）と呼ばれていますが、正確な呼称はECMAScript 2015（ES2015）というようです。 let・con
最強オブジェクト指向言語 JavaScript 再入門！
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to omit specific properties from an object in JavaScript
[JavaScript] そんな継承はイヤだ - クラス定義 - オブジェクト作成 - Qiita![[JavaScript] そんな継承はイヤだ - クラス定義 - オブジェクト作成 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a171e90918652a4a41b2b9efd7cb2369dbaa2562/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTYxMjglMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODE3Nzg_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9MjAwMGE5MTAzMzIyMDk0M2M3ZjQ3NjQ3OTEyM2VmNjM%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D675f62b48b0f92263d3cf310a1ce071a%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFMyU4MSU5RCVFMyU4MiU5MyVFMyU4MSVBQSVFNyVCNiU5OSVFNiU4OSVCRiVFMyU4MSVBRiVFMyU4MiVBNCVFMyU4MyVBNCVFMyU4MSVBMCUyMC0lMjAlRTMlODIlQUYlRTMlODMlQTklRTMlODIlQjklRTUlQUUlOUElRTclQkUlQTklMjAtJTIwJUUzJTgyJUFBJUUzJTgzJTk2JUUzJTgyJUI4JUUzJTgyJUE3JUUzJTgyJUFGJUUzJTgzJTg4JUU0JUJEJTlDJUU2JTg4JTkwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NDExZWU5NmEwYWFhY2FiZTVhMmY4MGM1ZDA5MzgwMWU%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBMaWdodFNwZWVkQyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWFjN2FmMTI0YjNkN2I4NWFjZjAxZjNmODNkMDJiZTE1%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D5caf1823a806063e9c48c8cf2728a08d)
