Next.jsのドキュメントを全部読んでみた - $shibayu36->blog;
最近Next.jsのドキュメントが更新されて、APIリファレンスが付くなど読みやすくなったので、この機会に全部読んでみた。メモを置いておく。 https://nextjs.org/docs/routing/introduction#dynamic-route-segments pages/post/[…all] → /post/* (/post/2020/id/title) こんなことできるのか！ただ全部吸い込まれるのは使いづらそう https://nextjs.org/docs/routing/shallow-routing router.pushにshallowオプションを加えると、getInitialPropsを実行しないレンダリングができる。ページ内でクエリやハッシュフラグメントを変えるなどで便利に使えそう import { useEffect } from 'react' imp
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が解らないのか？- Why can’t you understand the webpack? -
This document discusses using Akka actors and Redis for building a scalable chat server architecture. Key points include: 1) Using Akka actors for the chat room, user, and supervisor actors to handle chat logic and failures in a distributed, asynchronous manner. 2) Storing chat room membership and messages in Redis for real-time updates between actors using pub/sub. 3) The Lettuce client is used t
webpack4への簡単なマイグレーションガイド - 技術探し
トラッキング ローダー/プラグイン作者向け 変更一覧 簡単なマイグレーションガイド #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
babel と webpack について
Introduction to safe programming with numeric library / 数値ライブラリで始める安全なプログラミング
【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のビルド時間を短くするための取り組み - freee Developers Hub
メリークリスマス。freeeでエンジニアをやってます @yo_waka です。 この記事は freee Developers Advent Calendar 2017 の25日目です。 Webpack でビルドしてますか？僕は今日もビルドしています。 弊社ではフロントエンドのビルドに Webpack を用いているのですが、サービスの規模が大きくなるとともにビルド時間が長くなってきて困ってきました。 会計freee というサービスのフロントエンドの規模的にはこのような感じです。 JSコード行数: 275421行 Webpack エントリポイント数: 108 そこそこですね。 煩悩の数だけJSのエントリポイントがあります。 エントリポイントが多い理由は、元々は Rails の標準である Sprockets のみでビルドしていたものを少しずつ移行していったためです。 元々SPAで作られているアプ
webpack.config.jsがわからない - Qiita
webpack.config.jsがいつまでたってもわからない Javascript開発には欠かせないwebpackですが、webpack.config.jsファイルの書き方がいつまで経っても検索&コピペばかりで身に付きません。別にコピペでいいじゃんという考え方もありますが、webpackのドキュメントに沿って設定内容を理解し、自分の環境に合わせた形でwebpack.config.jsが書けるようにまとめていきたいと思います。バージョンは3.8.1の想定です。ディレクトリ構成も考えながらやっていきたいと思います。今のところprojectディレクトリ以下に次のようにファイルが存在しているとします。
最新版で学ぶ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
お知らせ（2020/08/25 追記） Udemy で「webpack 最速入門（10,800 円 -> 2,000 円）という講座を公開しました。 本来の価格は10,800円ですが、上記リンクからアクセスすると2,400円で購入できます。 どんな内容？ webpack を利用したフロントエンド開発環境が構築できるようになる、ハンズオン形式の講座です。 詳細は上記のリンクのプレビュー動画で詳しく説明しています。 記事との内容の違い 記事の内容に、以下の内容や特徴が追加された感じです。 実務で利用できる開発環境を徐々に構築していくので、記事と比べて実践的な内容 ハンズオン形式の講座なので、手を動かしながら webpack を学習できる webpack の設定ファイルに追加する値の詳細をすべて解説 記事では解説していない細かい補足や、機能のご紹介 なぜ npm scripts を利用するのか
レガシーシステム上の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の
Getting Started with webpack – Insightful Software
Jun 2017 edit: 3 was just released! The syntax for 3.x is identical to 2.x, which means this article is still up-to-date (if I missed something, please comment!). The version bump was for more behind-the-scenes stuff, but it did add an easy-to-add “Scope Hoisting” plugin that can cut down on your bundle size that’s worth checking out! Jump to the bottom of this article for the “Upgrading to 3” sec
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドのレベル上げ / Level up front-end skills for Rails developer
