2019年版 最先端のフロントエンド開発者になるために学ぶべきこと - Qiita
こちらの記事は、『Learn to become a modern Frontend Developer in 2019』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 はじめに 新年になって以前書いた記事を少し簡潔にして理解しやすいように書き直してみました。この文章に以前私が書いた文章と違ったことが書いてあったり、少し矛盾する内容が見つかってもあまり気にする必要はありません。 昨年私が書いた記事はGitHubで公開しています。 Web開発は絶えず変化する分野です - 今日私たちがWebサイトを構築する方法は、2～3年前のやり方とは全く違ってきています。利用できるツールが沢山あり、新しいツールも毎日出てくるので、ウェブ開発者はいつもどのツールを使えばよいのか迷ってしまいます。 私は、ウェブ開発に係るフロントエンド、バックエンド、または運用を学びたいと思う人を対象にしたツ
2019年版: 脱Babel!フロント/JS開発をTypeScriptに移行するための環境整備マニュアル - Qiita
TL;DR いろいろ書いていますが、一番書きたかったのは最初のライブラリと最後のReact Componentのプロジェクトの作り方ですね。ぱっとnpm installして、最初から型定義ファイルが入っていて、@typesを持っているライブラリを探したり、自分で.d.tsを書いたりしなくてもいい世界がやってきて欲しいな、という気持ちから書いています。 ここで紹介したTypeScript環境構築はすべて、自分用にYeomanのテンプレートとして作成したので、以下のジェネレータをインストールして選択したらそれでおしまいです。 @shibukawa/typescript (npmには公開していないので、checkoutしてビルドしてインストールしてください) 2020/7/26: React周りを現在の最新の情報に更新 2019/1/22: TSLint→ESLintに修正 2019/8/1:
面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門 | さくらのナレッジ
最近JavaScript関連の開発で採用が進んでいる「webpack」は、JavaScriptファイルの変換や結合といった操作をコマンド1つで実行できるツールだ。本記事では、webpackとは何かという基本的な概念から導入方法、実際の利用例などを紹介する。 モジュール管理機構の不足や未サポート機能の問題をツールで解決する「webpack」 今日のWeb開発においてJavaScriptの利用は避けることができないが、JavaScriptのソースコードをどのように管理・デプロイすべきかという問題に対しては、まだ決定的な解決策が生まれていない状況が続いている。その根本的な原因の1つには、最近までJavaScriptにおいて普遍的に利用できるモジュール管理システムが存在しなかったことがある。 一般的なプログラミング言語では、大規模なプログラムを実装する際に作業性やメンテナンス性を高めるためプログラ
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita
概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロンドエンドアプリかいているけど、「何となく」理解している人 来年の新人教育係 キーワード 本投稿では、以下のようなキーワードが出てきます。 Node.js、npm、ES6(ECMAScript6
TypeScript入門以前ガイド - mizchi's blog
某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
レトロエンジニアのための近代Webフロントエンド事情 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には
webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動 - Qiita
概要 Webpack 4を利用した開発に便利な webpack-dev-server の設定メモです。 webpack-dev-serverのソースコードと公式wiki、公式Docを参考に実動確認した結果を書きます。 HMR等オートリロード系の設定(--hotとかとか--inlineとか)やよく使いそうなCLIオプションなど理解しておくためのメモです。 環境 本投稿で使っている環境は以下の通り。 webpack-dev-server:3.1.7 webpack:4.17.1 webpack-cli:3.1.0 webpack-dev-server とは webpack-dev-serverはwebpackを用いたフロントエンド開発のときに利用できる開発用のwebサーバー。 *.jsファイルやリソースファイルを更新すると即座に反映してくれる機能をもっている。 webpack-dev-serv
RailsのVue.jsをWebpackerとJestでテストする（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Testing Vue.js in Rails with Webpacker and Jest 原文公開日: 2018/01/16 著者: Mario Saul 今やっているプロジェクトで、既存のRailsアプリにVue.jsを統合する方法の調査をを命じられました。とりあえず公式ガイドを読み、チュートリアルを視聴し、ブログを読みまくった結果、Vueコンポーネントを完全に動かせるようになりました。 最後の段階でいくつかテストを書こうとしましたが、残念なことにWebpacker gemにはテスト向け設定が含まれていなかったので、自分で設定せざるを得ませんでした。 驚いたことに、満足な設定方法がドキュメントに見当たらなかったのです。そこで私が何とかこれを動かせるようにしたときの方法を本記事で皆様と共有したいと考えました。 1. Jest
今日から簡単！Webpacker 完全脱出ガイド - pixiv inside
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見ています。 今回は pixivFACTORY において、フロントエンドのビルドに Webpacker を利用するのをやめた話をします。 Webpacker をやめよう rails/webpacker は Ruby on Rails のプロジェクトに webpack を導入する際に用いられる gem です。必要な webpack の設定ファイルの生成や、Rails のテンプレートからビルド済みの JavaScript ファイルを読み出すために用いるヘルパー関数など、多数の機能を提供します。 結論から言うと、Webpacker を入れてもあまり良いことがありませんでした。単に必要が無いというより、あることによって面倒が増していると感じたので、剥がしました。以下 Webpacker が導入された Ra
Rails 5: Webpacker公式README -- Webpack v4対応版（翻訳）｜TechRacho by BPS株式会社
本READMEの他に、以下のWebpacker公式ドキュメントの歩き方記事もどうぞ。これら2本で、Webpackerの公式ドキュメントは概観できるかと思います。次は公式のユースケースが欲しいです🍰🍵。 【保存版】Rails 5 Webpacker公式ドキュメントの歩き方+追加情報 概要 MITライセンスに基いて翻訳・公開いたします。 READMEリポジトリ: webpacker/README.md at master · rails/webpacker 原文更新日: 2018/05/18 ライセンス: MIT 更新や誤りにお気づきの方は@hachi8833までお知らせください。 Webpackerを用いることで、JavaScriptのプリプロセッサ兼バンドラーであるwebpack 4.x.x+を簡単に使えるようになり、アプリ的なJavaScriptをRailsで管理できます。Webpa
Webpacker 3ではじめるRailsエンジニアのためのモダンフロントエンド入門 〜Sprocketsを使わないRailsプロジェクト試案〜
はじめに Webpack、ES6風味のJavaScript、そして他すべてのモダンなクライアント側開発体験の進歩をまだ試していないなら、Webpacker 3.0は、はじめるのに絶好の機会だ。 —DHH Rails 5.1 で Webpacker が導入され、Railsでもモダンなフロントエンド開発が簡単にできるようになりました。 Webpackerはリリースからどんどん進化しており、 3.0でさらに使いやすくなりました。 本記事には2つの目的があります: RailsのAsset pipeline(Sprockets)をまったく使用しなくてもRails開発が可能であることを実証すること モダンフロントエンド未体験のRailsエンジニアに向けて、実際のコードをまじえつつ、モダンフロントエンド開発の雰囲気を伝えること また、Webpackerの概要を知りたいRailsエンジニアへの機能と使い方
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webpack.config.js 最小設定 - Qiita
フロントエンドのレベル上げ / Level up front-end skills for Rails developer
npmとwebpack4でビルド - jQueryからの次のステップ - Qiita