vscode の web build を netlify にデプロイする + ファイルシステムを永続化する - mizchi's blog
年末年始の時間を使って実験していたこと。 tl;dr vscode をカスタマイズして静的サイトとしてデプロイしたい。やった。公式にない永続化層も作った。 できた。ここで試せる。 https://mizchi-vscode-playground.netlify.com/ やりたかったこと フロントエンドにまつわるものはフロントエンドで作業を完結したい。なので vscode がブラウザで動いてほしい。 vscode をカスタマイズしたものを各自が自由にデプロイできると、様々な可能性がある。インストールの手間を省いたプログラミング教育用のツールだったり、専用の開発環境だったり、その他諸々。 問題 この用途で期待していた vscode online が使いづらかった。MS のアカウントを要求されたり、Docker コンテナの Enviroment を作ったりする必要があり、面倒だった。そもそもリ
9 Ways To Implement CSS in React JS
Hey, guys. Today I want to tell you about css in React app. So it was that styles are very important around in web. There are no sites that look good without css. Many developers and companies do not pay enough attention to styles. Of course if you are javascript (react) developer you would like to create more javascript logic and spend less time with styles. Or your team has special people who cr
Parcel入門 - TypeScriptの導入方法 - ICS MEDIA
「TypeScript」とは、JavaScriptに「型」を指定できるオープンソースのプログラミング言語です。型によりプログラム実行前にエラーを見つけ出すことができるため、大規模なプロジェクトを安全に開発できます。Microsoft社製で、多くのフロントエンドエンジニアに採用されています。 TypeScriptのモダンなビルド環境を作るためにはwebpackやGulp.jsがよく使われていますが、設定ファイルが必要で学習コストは高めです。「TypeScriptのビルド環境がほしいだけなのに、なぜツールの設定に時間をとられるのか？」「TypeScriptを始めるときに苦労したくない」と思っている人も多いのではないでしょうか？ 「Parcelパーセル」というツールを使うと、独自の設定ファイルを使うことなくTypeScriptのモダンなビルド環境がわずか3ステップで作れます。 ▼ TypeScr
webpackの仕組みを簡潔に説明する - hiroppy's site
この記事は、Node.js Advent Calendar 2018の 18 日目の記事です。 遅れてしまい本当に申し訳ありません。 この記事は、HTML5 カンファレンスで話した内容が中心となります。 Node.js とはかけ離れていますが、自分が書きたかった内容だったので、理解してくださると嬉しいです。 モジュール webpack は以下のモジュールをサポートします。 // ESM (ECMAScript Modules) import foo from "./foo"; export default foo; import("./foo.wasm"); // native support for WebAssembly import("./foo.json"); // native support for JSON // CJS (CommonJS Modules) const fo
サーバーサイド経験者に贈るフロントエンド技術の学び方 - Qiita
この記事は クラウドワークス Advent Calendar 2018 の4日目の記事です。 はじめに クラウドワークスのフロントエンドチームでエンジニアをしています @eighty8 です。 2018年9月に入社しました。 長らくソシャゲのサーバーサイドエンジニアをやってまして、本格的にフロントエンド開発に携わるのはクラウドワークスに来てからになります。 フロントエンドエンジニア1年生になってみて最初に感じたことは、 「周辺技術が多過ぎてどっから手をつけていいのかわからんちん。。。」 です。 Frontend Roadmap というのを見みてもわかる通り、フロントエンドもこのボリューム ∑(ﾟωﾟﾉ)ノ 今まで断片的に情報は掻い摘んできてたんですが、それじゃダメだ・・・と痛感しました。 まあ、これらすべてに精通している必要はないと思いますが、HTML書けます、CSS書けます、ついでにJa
【webpack】環境によってビルドする内容を分ける方法 - Qiita
jsのconfigファイルが本番環境と開発環境で違う場合があります。 しかしconfigファイルを含んだファイルをビルドする場合、phpのように.envで分けるみたいなことが出来ません。 そこで、本番環境用にビルドする時と、開発環境用にビルドする時でコマンドを分けることで、この問題が解消されます。 この分ける方法には大きく３つの方法があります。 状況に応じて使い分けていただければと思います。 独立した設定ファイルを作る方法 webpackはデフォルトではwebpack.config.jsというファイルに設定を定義します。 これを開発用と本番用でファイルを分けて別々に実行します。 例えば 開発用はwebpack.dev.js 本番用はwebpack.prod.js で別々に作ります。 そしてビルドする時は 開発用ならwebpack --config webpack.dev.js 本番用ならw
HerokuでWebpackをビルドする方法 - Qiita
HerokuでSPAアプリ作っててビルドしたjsとcssをコミットしたくない話 全体の構成として、バックエンドとログインせずに歩き回れるフロントはLaravelで、 ログイン後の画面についてはVueでSPAみたいな挙動をさせるWebアプリを作っていたときのことです。 デフォルトのLaravelプロジェクトって、.gitignoreにpublic/jsとpublic/cssが入ってないんですよ。 くっついてるVueのコンポーネントを書き換えていて、ちまちまビルドしたりすると、 当然public/jsやpublic/cssの下にファイルが作られます。 それをGitにコミットしてHerokuにデプロイとかしていて、まあ動くわけなんですけど、 ビルド前のリソースに変更がなくてもビルドするたびに差分がでてしまうんです。 これはちょっとイケてないぞ、ということで、 .gitignoreにpublic/
最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
webpack.config.jsの読み方、書き方 - dackdive's blog
（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 については少ししか触れ
Webpack — The Confusing Parts
Webpack is the leading module bundler for React and Redux apps. I think folks using Angular 2 and other frameworks are also using it a lot these days. When I first saw a Webpack config file, it looked very alien-y 👽 and confusing 😱. After playing around with it for some time, I now think that it is because Webpack just has a unique syntax and new philosophies that may cause confusion in the begi
webpack 4 入門 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? お知らせ（2020/08/25 追記） Udemy で「webpack 最速入門（10,800 円 -> 2,000 円）という講座を公開しました。 本来の価格は10,800円ですが、上記リンクからアクセスすると2,400円で購入できます。 どんな内容？ webpack を利用したフロントエンド開発環境が構築できるようになる、ハンズオン形式の講座です。 詳細は上記のリンクのプレビュー動画で詳しく説明しています。 記事との内容の違い 記事の内容に、以下の内容や特徴が追加された感じです。 実務で利用できる開発環境を徐々に構築していくので、記
レガシーシステム上のJavaScriptをモダンビルドにしていくwebpack利用実例 - Qiita
(function(){ var self = this; $("button").click(function(){ // }) })() // 古いコードはglobalに定義された何か SomeLib.prototype.foo = function(){ // } 下記のような特徴があります。 ライブラリ系（jQueryやjQuery.functionなど）は別途読み込み common.jsのようなよくある共通ファイルが存在 1ページ中で、scriptはファイル単位で複数読み込み 原始的なJavaScript配信状態（Sprocketsのようなビルドプロセスとは全く無縁な状態） jQuery以外に、ライブラリ・フレームワークなどは基本入っていない 色々とJavaScript初心者殺しな記法が多い (function(){})()を利用したglobal汚染回避 self = thisの
oklab -
最近ではコンピューター、ウェブ、モバイルでゲームを楽しめるようになりました。これらのゲームプログラミングについて学びましょう。 ゲームプログラミングの特徴 ゲームプログラミングは比較的新しいジャンルです。 ゲーム開発に使用される言語は、C#、C++、JavaScript、Swift、Rubyです。ゲームでは通常のアプリケーションと異なり複雑なビジュアルを操作するパフォーマンスと速度が要求されますので、プログラム言語もそれに特化している言語がおすすめです。 ゲームプログラミングは今後も人気の職種です。習得してステップアップを目指しましょう。 Oracle PLのプログラミング言語について学びましょう。 Oracle PLの特徴 SQL、T-SQLと同様にOracle PLもデータベースを処理するための言語です。違いとしてはOracle PLは世界最大のデータベースのひとつであるOracleデ
webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ
はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br
webpackで作るSprockets無しのフロントエンド開発 - クラウドワークス エンジニアブログ
こんにちは！12月に子供が生まれたばかりの鈴木( @suzan2go ) です。現在は週2~3日リモートで子供の成長を片目にみつつコードを書いています。うちの子はガラピコぷ〜がお気に入りです。 さて今回はRailsでのフロントエンド開発についてです。 昨今のフロントエンドの進化はめまぐるしく、Rails標準のSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みでは以下のような要望に答えられなくなってきています。*1 ECMAScript6で書きたい！ フロントエンドのライブラリ管理にnpmを使いたい！ で、上記に対応するにはおおまかに分類すると以下のような方法があります。 browserify-rails を使う github.com これが一番導入が簡単ですし、既存のRailsアプリに突っ込むならこれが選択肢としては手堅いと思います。 ただ開発中のビルドがめ
sprockets + rails-assetsを卒業して、npm + webpackへ移行 - ただのにっき(2016-05-19)
■ sprockets + rails-assetsを卒業して、npm + webpackへ移行 1年少々前、Webアプリのフロントエンド開発環境として暫定的にRails Assetsを使うことにしたのだけど、あれからjs界隈もしだいに落ち着いてきて*1、いろいろと勝ち組っぽいツールが決まってきた気がする。 そんなわけで、徐々にそっち方向へ移行してこうかな、と。とくにRails Assetsはサービス自体が終了の方向らしいので、まずはそのへんから。jsのパッケージマネージャとタスクランナーの勝ち組として、おれの観測範囲でみえてる感じだと: パッケージはpackage.jsonをnpmで管理するのが一番シンプル タスクランナーもnpmでいいよもう……という流れが強そう AltJSは使わずにES2015、ビルドにはWebpackとBabelの組み合わせ ってところか? 少し前に話題になった「1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? -
フロントエンドのレベル上げ / Level up front-end skills for Rails developer
babel と webpack について
webpack.config.jsがわからない - Qiita
