webpack

[Rust004] JavaScriptでWebpackをやってrust-wasmに戻る

※この記事には技術的新規性はなく、他の記事を試した感想を述べるものです。

前回、RustのWasmをやる中で、webpackがわかっていない事が発覚しました。そのため、webpackで検索して最初に出てくる記事を勉強しています。

webpackとBabelの基本を理解する(1) ―webpack編―
https://qiita.com/koedamon/items/3e64612d22f347

もっとみる

[Rust003] RustにおけるWasmについて雑談する。

※この投稿は、いつにも増して新規性のない投稿であり、ほぼ雑談です。

以下のチュートリアルを散歩していました。興味を示した理由は、以前の投稿で「cargo new」してからrunする流れをやったのだが、何かWebフレームワークがあるのではないかと思ったからです。
----------------
RustでWebAssemblyやってみた。
https://medium.com/blockchai

もっとみる

【webpack】最低限開発できそうな環境まとめ

webpackを使用した開発環境の構築備忘録です。

内容
・SCSSを使用する
・JSとCSSは別々のファイルで生成する
・autoprefixerを導入する
・autoprefixerの設定には browserslistを使用する

ディレクトリ構造

|-dist
|-node_modules
|-src
     |-img
     |-js
         |-main.js
   

もっとみる

フロントエンド開発環境を作ろう(ES6用・超初心者向け)

自分のPCにある作業フォルダを、フロントエンド開発の「プロジェクトディレクトリ」にしていく工程です。
上から順にやっていけば出来上がります。
超初心者向けです。

前提

- VSCodeを使います。
- Node.jsはインストール済みとします。
- 主な作業はVSCodeのターミナルで作業します。
- GitHubのアカウントは取得済とします(Git使う場合だけ)

STEP1 : PCに作業

もっとみる

Webpackのurl-loaderとfile-loaderの使い分けについて

どうも。筋トレ共有アプリ「マスクル」を作っているKokiです。

この前、Reactプロジェクト内でsvgを取り込むとき、url-loaderを使うか、file-loaderを使うか迷ったので、ここで整理します。

url-loader

url-loaderは画像ファイルやsvgファイルをDataUrl形式に変換して、jsファイルの一部として、プロジェクト内に取り込めます。

jsファイルの一部

もっとみる
いいねありがとうございます!よければフォローもお願いします!
2

storybook for HTML

導入、SCSSの読み込みHTMLの読み込みまでをメモ代わりに載せておく。
qiitaを参照していたが記事が古いものが多かったためこちらのほうが多分信憑性はまだ高い。はず。

とりあえず公式参考にインストールする

npx -p @storybook/cli sb init --type html

これで

.storybook/main.jsstories/index.stories.js

もっとみる

ログイン不要/最短10秒で画像を共有できるWebアプリ「いつめん画像共有サイト」を作った

成果物

https://gazou.itsumen.com/

リポジトリ

フロントエンド

バックエンド

いつめん画像共有サイトとは?

いつめん画像共有サイトは、ログイン不要の画像共有サービスです。

画像を投稿すると、URLとQRコードが発行されます。

発行されたURLをコピーしてSNS等で送信するか、TwitterまたはLINEの共有機能を使って、すぐに画像を共有できます。

いつ

もっとみる

node.js npm webpack babelを簡単に説明する

Node.jsとは

公式より引用

Node.js はスケーラブルなネットワークアプリケーションを構築するために設計された非同期型のイベント駆動の JavaScript 環境です。 

つまり、、
- Node.jsを使うことで、JavaScriptでサーバー環境も構築することができる。
- 非同期。
- Node.jsはJavaScriptのプラットフォーム。

npmとは

Node Pac

もっとみる

[連載]webpackでmarkdownを扱う

このプロジェクトで記事を書くのに必要なmarkdownの設定はLP用の静的ページジェネレーターとしても転用可能です。
webpackでmarkdownの設定を細かく行えば、以下のようなことも可能です。
- コードの装飾
- タグへのclassなどのattr属性追加
- シーケンス図フローチャート図の表示
- yaml式のフォーマット利用

まずは基本のmarkdownの設定をします。

もっとみる

[連載]webpackでテンプレート言語(ejs/pug)を扱う

ここまで、開発環境構築、HTML生成、CSSコンパイルまでおこないました。

この章でejsやpugといったテンプレート言語を使えるように設定します。
webpackはejsの一部をloaderなしで利用できますが、includeやfor文などよりプログラミング的な機能を使いたい場合にはloaderが必要になります。

テンプレート言語はJSなので、JSでできることは大体できるとおもいます。
ただ

もっとみる