今までのJavaScriptには言語レベルでのモジュール管理機能がなく、ライブラリとして提供されているのみでした。それが遂に、ES2015では言語仕様レベルでモジュール管理に関する機能が追加されました。まだ実装されているブラウザはありません（2017年4月現在）が、トランスパイラを導入すれば使用することは可能なので、この機会に学んでいきましょう。 CommonJSとは ES2015のモジュール管理を学んでいく前に、今までのJavaScriptにおけるモジュール管理がどのように行われてきたかという背景を理解していきましょう。 元々JavaScriptはブラウザ上で動く言語として開発されていました。そのため、サーバーサイドなどのWebブラウザ以外で動作させるためのAPIがなく、仕様についても存在していない状態でした。そこで、この仕様を策定するために発足したプロジェクトがCommonJSプロジェ

脱jQuery その1 です。 本日より25日間連続で「脱jQuery」についての記事を「アドベントカレンダー」に投稿していきます。つたない文章力ですが、わかりやすく書くよう頑張りますのでよろしくお願いします。 方針本題の前に方針を少し。 jQuery の利用を否定するものではありません。 正確に jQuery ⇒ JavaScript を書き換えることよりも、「わかりやすく書き換える」に主眼を置きます。 間違った書き換えを行うというのではなく、jQuery オブジェクトと JavaScript の通常のオブジェクトの違いまでは考慮しないといった感じになります。 「jQuery のように JavaScript を扱う」を主眼においてなるべく JavaScript 独特な表現は避け、コピペでも使えちゃうよ、ぐらいの勢いで書いていきます。「jQuery は書けるのに JavaScript は書

jQueryやその他ライブラリを使わない、素のJavaScriptでのDOM操作関連をまとめてみました。 要素の検索 //id指定 document.getElementById('id'); //class指定 document.getElementsByClassName('class'); //タグ指定 document.getElementsByTagName('div'); //cssセレクタで指定 document.querySelector('#main .posts h1'); //最初の一つを取得 document.querySelectorAll('a'); //すべて取得 //親要素 element.parentNode; //子要素 element.firstElementChild; //最初の子要素 element.lastElementChild; //最後の

チャーリーです。 追記：ビジネスモデルを図解できるツールキットを販売中です。この記事にあるような図解を自分でもやってみたいという方はぜひ。 もう2018年も1/4が終わったというにわかに信じがたい状況ですが、ビジネスモデルを図解し続けたものがたまってきたのでここらで13個一挙公開します。 - 目次 -俺のフレンチ サマリーポケット 未来食堂 Cansell プチローソン Unipos SCOUTER ポプテピピック ZOZOSUIT Optoro Fundbox PillPack Farmers Business Network 100の事例を図解した「ビジネスモデル2.0図鑑」という本を発売しています（本記事の事例ふくむ）。予約開始と同時にnoteで全文無料公開という試みをやっています。本記事に興味を持ったらそちらもどうぞ！ 俺のフレンチ俺の株式会社は2012年創業、あのブックオフの創業

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

移行ガイド abouthiroppy.hatenablog.jp ドワンゴのアドベントカレンダーの17日が空いているので本来その予定で書かれた記事ではないですが、そこに埋めます。 2日連続になってしまった。。 qiita.com Happy Xmas, Noders! #Nodejs pic.twitter.com/Rsxr8SbeUz— hiroppy😶 (@about_hiroppy) 2017年12月24日 さて、今年は、webpack3.0.0が2017/06にリリースされました🎉 (現在、3.10.0) medium.com After we released webpack v2, we made some promises to the community. We promised that we would deliver the features you voted

Googleが「Accelerated Mobile Pages(モバイル環境でのページ表示を高速化しよう)」という目的で始めたAMPプロジェクト。AMPに対応したウェブページを作成する方法を、初心者の私が勉強をしながらまとめていきます。 Q&A対応するとどうなるの？カルーセルに掲載されるモバイルでのGoogleの検索結果にカルーセル形式で表示されます。ただし、AMPに対応した全てのページがカルーセルで表示されるとは限りません。 AMPのマークが付くモバイルでのGoogleの検索結果に雷のマークが付きます。そして検索結果からのアクセスは全てAMPのページになります。開発者もユーザーも、通常のページかAMPのページかを選択することができません。 アクセスは増える？増えると思います。AMPに対応するとカルーセルに表示されるかもしれません。カルーセルは確かに検索結果ページの上部にありますが、その

今回は <script>要素 を使ってみましょう。 <script>要素は、HTMLファイルに Javascript などのスクリプトを読み込む要素。 メタデータ・コンテンツの1つです。 <script>要素だけで ・外部スクリプトファイルの読み込み ・HTML上にじかにスクリプトを記述 の両方ともできます。 スクリプトが無効なときに代替コンテンツを表示する <noscript>要素もあります。 これは単独で使わず、<script>要素を使ったときだけ使用します。 使用する要素 本日のINDEX <script>要素のルール 外部ファイルを読み込む（src属性あり） 「コメント文」なら中に入れられる type属性は省略可能 HTML上にじかにスクリプトを書く（src属性なし） <script>要素はどこにでも置ける <script>要素の属性一覧 async・defer属性のスクリプト読み

トラッキング ローダー/プラグイン作者向け 変更一覧 簡単なマイグレーションガイド #0CJS(Zero-Config JS) 環境 Node4のサポートが切れました webpack-cliへの分離 ローダー/プラグインのアップデートが必要 side-effects(old: pure-module) configファイル mode loadersからrulesへ プラグイン 変更 uglifyJS extract-text-webpack-plugin その他 コード System.import() webpackInclude/webpackExcludeのサポート モジュールタイプ CJSとESMについて 前提知識 javascript/esm さいごに まだ、公式の方で作成中の段階ですので、一旦ここにまとめます。 この記事では、loader/plugin開発側の話はしません。 me

この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに

お支払イメージ 無金利残価設定払いで、Mac 本体金額の最大35％(2年プラン)を据え置き、 残額を月々低負担でお支払い頂ける新しい買い方です。 ※金額は全て税込です。比較対象のショッピングローン（最長24回まで無金利）の詳細は こちら をご覧ください。最終回支払額の再分割は金利が発生します。またクレジット会社所定の審査があります。３年プランと４年プランはノートMac本体・AppleCare＋・ガラスコーティングの３点が最小構成となります。 AppleCare+ 付きで安心｡ Mac の購入時には、購入から1年間のハードウェア製品限定保証と90日間の無償テクニカルサポートがついていますが、AppleCare+ 付きにより3年間に延長されます。 また、過失や事故による損傷に対する修理サービスが、1回につき画面または外部筐体の損傷は12,900円（税込）、そのほかの損傷は37,100円（税込）

お知らせ（2020/08/25 追記） Udemy で「webpack 最速入門（10,800 円 -> 2,000 円）という講座を公開しました。 本来の価格は10,800円ですが、上記リンクからアクセスすると2,400円で購入できます。 どんな内容？ webpack を利用したフロントエンド開発環境が構築できるようになる、ハンズオン形式の講座です。 詳細は上記のリンクのプレビュー動画で詳しく説明しています。 記事との内容の違い 記事の内容に、以下の内容や特徴が追加された感じです。 実務で利用できる開発環境を徐々に構築していくので、記事と比べて実践的な内容 ハンズオン形式の講座なので、手を動かしながら webpack を学習できる webpack の設定ファイルに追加する値の詳細をすべて解説 記事では解説していない細かい補足や、機能のご紹介 なぜ npm scripts を利用するのか

昨年のAdvent Calendarを眺めたり、JS周りの記事を見ていると、RequireJSとか、CommonJSとか、AMD、Browserify、webpackあたりが、同じような文脈で登場するんですが、それぞれ何を指しているのかよくわからなかったため、今更ながらまとめてみます。 前提 小規模にしかJavaScriptを使っていないWebサイトでは、jQueryを使ってDomイベントで色んな処理をして、Domに反映させる。というような処理が、ごちゃっとまとめて書くことが多いかと思います。ごちゃっととは、特にDomにしか情報を保持していない状態を指していて、イメージとしてはこのようなコードです。 $(function() { # イベントハンドラ $("#btn").on("click", function(){ $.ajax({ url: "api/resources", dataT

ReduxのGithubドキュメントを基に入門用記事として書いたものを、簡潔にまとめました。 もと記事はこちらです。 Redux入門 1日目 Reduxとは Redux入門 2日目 Reduxの基本・Actions Redux入門 3日目 Reduxの基本・Reducers Redux入門 4日目 Reduxの基本・Stores Redux入門 5日目 Reduxの基本・Data Flow Redux入門 6日目 ReduxとReactの連携 Reduxとは Reduxは、ReactJSが扱うUIのstate(状態)を管理をするためのフレームワークです。Reactではstateの管理するデータフローにFluxを提案していますが、ReduxはFluxの概念を拡張してより扱いやすく設計されています。 Reduxはstateを管理するためのライブラリーなので、React以外にもAngularJS

安全なウェブサイトを公開するため、無料で利用可能な Let's Encrypt の証明書を使う方法をご紹介します。Let's Encrypt の背景とSSL証明書の自動発行をはじめ、CentOS 7 上の Nginx ウェブサーバを SSL に対応する方法、そして、証明書を自動更新する方法を見ていきましょう（所要時間10～20分）。 なお、Let's Encrypt については既に中津川さんの記事「すべてのWebサイトの暗号化を目指すLet's Encryptを試す」で取り上げられていますが、今回は新しいクライアント certbot-auto を使う方法や、証明書の自動更新の仕方をとりあげます。 こんにちは！こんにちは！ みなさん、はじめまして。さくらインターネットの前佛雅人（ぜんぶつまさひと）です。さくらのナレッジに何か書け（業務命令）ということで、皆さんがサーバをより活用できるよう、ナ

Let's Encrypt 最新情報 ・ワイルドカード証明書と ACME v2 へ対応が完了しました（2018年03月15日 更新） ※技術的な詳細については ACME v2 とワイルドカード証明書の技術情報 をご覧ください。 ※ワイルドカード証明書の取得には、ACME v2 プロトコルに対応したクライアントと DNS による認証が必要です。証明書の取得・更新の際に、DNS の「TXT レコード」にワンタイムトークンを登録する必要があります。 ※サブジェクトの代替名（SAN : Subject Alternative Name）を使用した 複数のドメイン名・サブドメイン名に対して有効な証明書 も引き続き取得可能です。 Let's Encrypt について Let's Encrypt は、認証局（CA）として「SSL/TLSサーバ証明書」を無料で発行するとともに、証明書の発行・インストール・

<ul> <li id="first">テキストテキストテキスト</li> <li id="second">テキストテキストテキスト</li> <li id="third">テキストテキストテキスト</li> <li id="fourth">テキストテキストテキスト</li> </ul> <ul> <li class="first">テキスト<strong>テキスト</strong>テキスト</li> <li class="second">テキスト<em>テキスト</em>テキスト</li> <li class="third">テキスト<span>テキスト</span>テキスト</li> <li class="fourth">テキストテキストテキスト</li> </ul> <ul> <li lang="en">テキストテキストテキスト</li> <li></li> <li><span>テキ

OracleのJDK9-eaのJavaDoc を参照して since:9 の表記があるクラスの一部について記載しています。 JDK9は未リリースであり、実際のリリースではこの記事とは異なる可能性があります。 Package java.lang 編 Integer の章 parseInt public static int parseInt(CharSequence s, int beginIndex, int endIndex, int radix) throws NumberFormatException // 16進数で表記したカラーコード String cssColor = "#4dba16"; int red = Integer.parseInt(cssColor.substring(1, 3), 16); int green = Integer.parseInt(cssColor