正真正銘のReactだけの不純物なしでReact入門
Reactのチュートリアル、たくさんありますよね。どれも質が高く、どこから手をつければいいかわからなくなっちゃいます。 ですがやはり巷のチュートリアルには面倒な問題もあります。今回は面倒ごとを全部すっ飛ばしてReactでのウェブアプリ作りに入門してみましょう。 Reactを始めるには、まずあれとこれとそれとどれと…… Reactやるには、まずNode.js入れてbabel入れてreact入れてreact-router入れて、ついでにredux入れてreact-redux入れて、redux-saga入れて…… Reactめんどくせえ！！！ってのが正直なところだと思います。はい、私もそう思います。ただ、まあ、色々必要なのも事実なので……。 それでもやっぱり「ReactやるならReactだけやりたい。他はどうでもいい」という気持ちは簡単に捨てられるものではありません。そこで今回はそういう面倒全部
webpackのbundle後のJavaScriptのサイズを減らしている話 | リクルートテクノロジーズ メンバーズブログ
はじめに リクルートテクノロジーズに4月に新卒入社した 辻 健人です．GitHubではmaxmellonで活動しています． 7月より，やりとりも作成もラクになるシフト管理サービス「Airシフト」 のエンハンス開発を担当しています． 以前は，React製SPAのパフォーマンスチューニング実例という内容で記事を書きました． 今回は同じSPAにおいて，いかにwebpackが生成するJavaScriptのバンドルサイズを減らすかについて紹介していきます． webpackが，そもそも何のためのツールか，バンドルする理由などについては割愛させていただきます． そういった話は，こちらの記事 (Webpack の考え方について – mizchi’s blog) がわかりやすいと思います． Airシフトのアーキテクチャ Airシフトは，React-Reduxで開発されており，かつSSRを行っておりコードの大
「Electron」を使って業務改善に役立つツールをつくってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
※この記事はLIGアドベントカレンダー2018の15日目です。 こんにちは。バックエンドエンジニアのまさくにです。 LIGにおいて逃れえぬ仕事のひとつに「LIGブログを書く」という作業があるのですが、僕の場合、この仕事の中に「マークダウンからLIGブログ用のフォーマットを作り出す」という非生産的な作業が含まれています。 僕はたいていの文章をマークダウンで書いていて、このブログ記事も一度マークダウンで書き出してから、WordPressに取り込み、それからLIGブログ用のhtmlに直して公開しているため、この置換作業をこれまでイヤイヤやってきました。 マ ジ な ム ダ。 そこで今回は、マークダウンからLIGブログ用のフォーマットへ変更するためのツールを考えたいと思います。 作りたいものと選定 単純に「マークダウンをhtmlに変更したい」っていうわけではありません。LIGブログには、たとえば下
Switching to Parcel from webpack - LogRocket Blog
Over the past year, you’ve likely heard rumblings about a new build tool called Parcel. For those of you unaware, Parcel describes itself as “a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration”. Now build tools have come and gone and ones such as webpack and Browserify are still k
Puppeteer入門 スクレイピング+Web操作自動処理プログラミング - 秀和システム新社 あなたの学びをサポート！
Puppeteerは、Node.jsで動く最新のWebブラウザ自動化ライブラリで、データ収集やWeb開発、動作テストの効率化などに使われます。Google製のライブラリなので、Chromeとの相性は抜群です。本書は、Puppeteerの実行環境の構築から、スクレイピングとWeb操作の自動化を実現するプログラミング、デバッグまでを解説した入門書です。Node.jsとJavaScriptの入門書としても使えます。鶴田謙二さんによる素敵なイラストが目印です！ 【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/5520.html 第1部 準備編 第1章 Puppeteerの基礎 1-1 ブラウザ自動化のライブラリ Puppeteer 1-2 JavaScriptと組み合わせ可能 Puppeteerでできること、できないこと 1-3
PLAIDがNode.jsを採用し、5年間で12万行書いてわかったこと | PLAID engineer blog
エンジニアのgamiです。趣味はポッドキャスト配信です。 今回は、「Node.js」に焦点を当てた記事です。 PLAIDでは、約5年前から「KARTE」というサービスを開発しています。そのサーバーサイドの実装は、ほとんどがNode.jsで記述されています。 一方、国内企業の中で、サーバーサイド実装にNode.jsを採用している企業は少ない印象があります。 そこで、以下についてご紹介します。 PLAIDがNode.jsで実現しているプロダクト Node.jsを5年間使ってわかった強みと弱点 Node.jsを使いこなすための工夫 1. PLAIDがNode.jsで実現しているプロダクト 実際にPLAIDがどのようにNode.jsを使っているかを紹介します。PLAIDでは、「リアルタイムユーザー解析サービス」であるKARTEを主に開発しているので、KARTEの開発について説明します。 プロダクト
NW.jsでデスクトップアプリの夢を見る！ - Qiita
はじめに 僕はNode.js製のこんなソフトを開発しているのですが、このソフトをユーザーの方に使っていただくには... ユーザーにNode.JSをインストールしてもらわないといけない 設定ファイルにパスワードがべた書きでセキュリティに不安がある そもそも導入長ぇ！ ...と、到底使ってもらえそうなものではありません。 そこで今回は、 ユーザーにNode.JSをインストールしてもらわないといけない 設定ファイルにパスワードがべた書きでセキュリティに不安がある を解決するためにNW.jsを使ってネイティブアプリ化をしていきます！ NW.jsとElectronの比較 NW.jsとは、JavaScriptを用いてWindows上で動作するアプリケーションを実装できるフレームワークです。似たようなものではElectronがVisual Studio Codeなどでも利用されており、こちらのほうが有名
クロージャとは - Qiita
※クロージャと変数のスコープ(追記)を追記しました。 ※コメント欄で環境という用語について議論がありましたが、そもそも環境は専門用語として存在します。詳しくは環境を持つというイメージに追記しました。 使い古された話題ではありますけど、わかりやすく説明できそうな気がしたので書いてみたいと思います。 先に方針だけ伝えておくと、クラスとモジュールと関数は、変数のスコープを切ることができるという共通の性質を持っている、という切り口からクロージャについて説明していきたいと思います。 これだけ読んで何となく先が予想できてしまった人は読まなくても大丈夫かと思います。 それでも読んでくださるという方は、助言なり意見なりをくださるととても嬉しいです。 実行環境 言語はJavaScript(ES2015 or later)を使いますけど、別に知らなくてもなんとかなるんじゃないでしょうか。 何か他の言語をやって
Vue.js ではじめるシングルページアプリケーションの開発 - HDE BLOG
Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力すると、 デザインしたページの特定のDIV要素がリアルタイムに更新されるといったデータ反映の仕組みを備えています。 また、JavaScript で大規模なユーザーインターフェイスの開発を行う場合、HTMLファイルのテンプレート化、 JSファイルの依存関係、グローバル変数汚染など様々な課題に直面します。 Vue.js は、コンポーネントという仕組みと Webpack というモジュール管理ツールと組み合わせることで、 これらの課題にうまく対処できるようになっています。 今まで jQuery
webpackでCSSやSASSを使う - 30歳からのプログラミング
webpackでは、JSファイルだけでなくCSSやSASSもバンドルの対象にできる。 このエントリではその方法を書いていく。 webpackのバージョンは以下。 webpack@4.0.1 webpack-cli@2.0.9 下準備 webpackをインストール。 $ npm i -D webpack webpack-cli npm scripts。 出力されたファイルの中身を見たいので、モードはdevelopmentにしておく。 "scripts": { "build": "webpack --mode development" }, webpack.config.js。 このように書いてビルドすると、src/index.jsをエントリポイントとして、dest/bundle.jsとして出力される。 const path = require('path'); module.exports
JavaScript界隈の基本的な用語を歴史とともにさらにまとめてみた - Heppoko Binbo Yarou no Newbie Nikki
2018/12/23 リンク切れしていたものを削除 & リンクを追加 https://qiita.com/sinsengumi/items/e20342d13cbdd7ac2304 を読んで、すこしだけもやもや感がぬぐえなかったので、適当に自分が思ってる「今のJavaScriptはこんなかんじ」というのを書いた。 EcmaScript だいじなこと EcmaScriptとは、プログラミング言語ではない。 EcmaScriptとは、Ecmaインターナショナルが決めているJavaScriptの言語仕様のこと。 Ecmaとは、European Computer Manufacturers Association の略で、要は世界のコンピュータ関連の仕様を決めてる闇の組織みたいなところ。 （→History of Ecma） なんでEcmaScriptとかいうものがあるのか？ 大昔、JavaScr
Webpack3でWebページ制作環境を構築する。基本編 - 前編 - Qiita
un-T factory! XA Advent Calendar 9日目担当の@untspringkです。 普段はWeb制作とは少し違ったことを業務で担当しているのですが、最近フロントエンド関連技術を扱う機会があったので、一度Web制作やフロントエンド開発環境構築についてまとめてみたいと思い執筆のテーマにWebpackを採用してみました。Qiita初投稿で慣れてないこともあって、いきなり長文記事になってしまいましたが、どうぞよろしくお願いいたします。 この記事について 長い記事になってしまいましたので、前編と後編に分けております。前編と後編で以下のような内容が含まれております。 【前編】 準備から、ローダーとプラグインの導入（※この記事です） Webpackを使用し制作環境構築をはじめるまでの準備 Webpackの基本的な挙動（バンドル）について Webpack-dev-serverを導入
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Optimization Tools for Boosting PWA Performance — SitePoint
Vue-cli 3 : Game-changer or barely useful?
How to Install a Single Component From any UI Library with NPM + Bit
Choosing the Right JavaScript Framework - DZone
Ember.js Blog
2018年3月に読んだWeb・デザイン関連の本
Setting Up a Dev Environment With Webpack 3 - DZone
やっぱりJavaScript勉強してみようかな・・・ - Qiita