新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(Git/Node.js/ES6/webpack4/Babel7)JavaScriptNode.jses6webpackbabel 概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者=今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか) Node.jsの環境をつかってフロン
はじめに 政府や行政サイトの「IE縛り」に代表されるように、IE汚染国である日本で仕事としてJavaScriptを書く場合、IEと共存するしなければならない場合が多いです。 with コロナならぬwith IEです。 IE生活様式 Transpile Bundle Polyfill TranspileとBundle は、ES5の書き方で1つのファイルに書いていれば不要です。 エンジニアが不便を我慢すれば必要ない工程ではありますが、そんな我慢はしたくありません。 コロナで言えばマスク、消毒、手洗い、うがい、密を避ける、換気のような個人でできる対策に当たると思います。 Polyfillは、もともとIE11が対応していない機能に対応させるもので、コロナでいえば治療薬ともいえるものだと思いますが、薬なのでリスクもあります。 コロナと違って、みんなでIEやめる合意が取れればIE対応せずに済む世界にな
2020年3月18日に行われたイベント「UIT meetup vol.8 online『We Are TypeScripters!』」に、LINE株式会社のフロントエンドエンジニアであるAkinori Inoue氏が登壇しました。セッション内容は「LINE NEWSをTypeScript化したい!」。「LINE NEWS」のTypeScript化にあたって実際に行ったことやそこから得た知見を共有しました。講演資料はこちら LINE NEWSをTypeScript化 Akinori Inoue氏(以下、Inoue):ご紹介に預かりました井上と申します。「LINE NEWSをTypeScript化したい!」ということで、発表していきたいと思います。よろしくお願いします。 僕自身の紹介なんですけど、去年の2019年の4月にLINEに新卒で入社して、フロントエンドエンジニアとしてUIT室に所属いた
(2017/08/28追記) この記事は webpack v1 系での config について書かれています。 v2 系以降は一部の項目名などに変更があります。 Migrating from v1 to v2 を読んで v2 系への移行を行うか、または私のリポジトリを参考にしてください。 https://github.com/zaki-yama/react-redux-template https://github.com/zaki-yama/redux-express-template (追記ここまで) はじめに webpack を使った JS/CSS のビルドを行う場合、webpack.config.js という設定ファイルを用意してコマンド自体は webpack で済ませることがほとんどだと思いますが 公式チュートリアルでも webpack.config.js については少ししか触れ
概要 React は、当時のバージョン 1 についてこちらのページ等で利用方法をまとめた Angular と比較されることの多い、UI 構築のための JavaScript ライブラリです。Angular と異なり、ES6 や JSX の構文が利用された JavaScript コードをブラウザが解釈可能な JavaScript にコンパイルする Babel や、ファイル分割された複数のファイルからなる JavaScript コードを Node.js で利用可能な require と同等の構文によって一つのファイルにまとめる Browserify といった周辺ライブラリを併用した開発になります。開発を行うために必要な環境の構築手順についてまとめます。方法は複数存在します。以下に示すのはそのうちの一部です。 create-react-app を利用する方法 create-react-app を利
日本語版サイト (ja.reactjs.org) のブログセクションへの記事掲載には英語版サイトと比べてタイムラグがあります。 最新のブログ記事は英語版でご確認ください。 日本語版サイトでは英語版ブログに定期的に追従しつつ、2020 年以降の記事を随時翻訳しています。 React 17 には新機能はありませんが、新バージョンの JSX トランスフォーム (JSX transform) に対応します。この記事ではこれがどのようなもので、どのように試せるのかについて説明します。 JSX トランスフォームとは? ブラウザはそのままでは JSX を理解しないため、ほとんどの React ユーザは、Babel や TypeScript のようなコンパイラを利用して JSX コードを通常の JavaScript に変換 (transform) しています。Create React App や Next
JavaScriptとECMAScriptって何が違うの? そもそもECMAScriptってどういう仕組みで構成されているんだろう JavaScriptのバージョンってブラウザごとにどう対処するの? JavaScriptを勉強しているとECMAScriptという呼び名を見かけることが多いですよね? また一方で、ES2015(ES6)という記述もよく見かけます。これらはJavaScriptのバージョンに関連していることは何となく分かる方もいると思いますが、はっきりと意味を理解しているという方は少ないのではないでしょうか? そこで、この記事では初心者でも今日からJavaScriptとECMAScriptの違いや使い分けなどについて分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。 一人でも多くの方がJavaScriptの不安を解消できれば幸いです。 90年代にJ
外部ファイル(モジュール)を読み込むことを目的に「import」と「require」が利用されているのを目にする機会があります。ここでは、それぞれの「違い」と「使い方」について整理します。 importとrequireの違い require構文 CommonJSの仕様でnode.jsがサポートしている書き方です。 Node.jsで実行するなら、そのまま利用できます。 ブラウザで実行するならWebpackなどを通じて依存関係を解決する必要があります。 module構文( import ) es2015 から利用できる書き方です。 対応ブラウザがまだ少ないです。 Babelを通じてrequire構文に変換後Webpackなどを通じて依存関係を解決する必要があります。 モジュールの種類 Node.jsを利用している際、以下のモジュールの違いを意識すると良いです。 コアモジュール Node.jsが
はじめに jsで外部ファイルを読み込む際に、 importと書いてある場合とrequireと書いてある場合があります。 この2つの違いがよくわからなかったので確認しました。 モジュールとは importとrequireの違いを確認する前に、 前提知識となる「モジュール」について簡単に説明します。 ある程度の規模のjsアプリを作ると、 1つの大きなjsファイルにすべてのコードを書くのではなく 機能ごとにjsファイルを分けて管理したくなります。 そして、その機能ごとに分割したjsファイルを メインとなるjsファイルで必要に応じて読み込んで利用するイメージです。 この分割した機能ごとのjsファイルを「モジュール」と呼びます。 モジュールの読み込み方法 モジュールを読み込むための方法、仕様は 何種類かあり、 それぞれ書き方が違い、動く環境も違います。 そのモジュール読み込みの仕様の主要なものとして
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く