Content-Length: 336464 | pFad | http://b.hatena.ne.jp/site159/Node.js/
React Native for Web + TypeScriptを使ってStorybook公式のチュートリアルをやってみた | DevelopersIO
React Native for Web + TypeScriptを使ってStorybook公式のチュートリアルをやってみた Storybookとは、React、Vue、Angular 用の UI コンポーネントを開発・管理するためのオープンソースツールです。 公式ページにあるチュートリアルを、普段の業務で使用しているReact Native for WebとTypeScriptを使ってやってみたのでご紹介します。 実装するもの Storybook 公式ページのチュートリアルの タスク管理アプリ（当記事では、タスク一覧の表示までをご紹介します。） 今回作成したソースコードの一式はこちらにあります。 実装方針 Create React App を使ってプロジェクトを作成する TypeScript を使用する 画面の作成に、React Native for Webのコンポーネントを使用する チ
【テンプレ有り】webpack4でSassとES6の開発環境を構築する
webpack（ウェブパック）とは、モジュールバンドラーと呼ばれる複数のファイルを1つにまとめることが出来るツールです。 webpackを使うことによって、サイト上でサーバーへのリクエストを減らして表示速度を向上出来たり、開発時に機能ごとに複数のファイルに分けて作業をすることが可能になります。 本記事では、サービスサイトなど通常のサイトを作ることを想定としており、Vue.jsなどを使いSPAを作るフロントエンドエンジニア向けでは無いので予めご了承下さい。 また、本記事で紹介しているwebpackの設定で出来ることは下記の通りになります。 Sass（Scss）をコンパイルしてcssに出力 cssにベンダープレフィックスを自動付与（Autoprefixer） ES6をES5にコンパイル（これによりアロー関数やファイル分割が可能になる） cssとjsでソースマップを使用可能&minify化 開発
node.jsでスクレイピングしてみる | バシャログ。
初めまして。4月入社の山崎です。これが初投稿になります。 今回はnode.jsでスクレイピングをします。 経緯 とあるサイトをリニューアルしていて、旧サイトの静的ページからテキストなどのコンテンツを持ってきて新サイトのHTMLタグの中に貼り付けていくという作業はよくあると思います。 僕もとあるサイトのリニューアル時にそういった作業をやっていたのですが、旧サイトのよくある質問の質問と回答のページが分かれており、回答ページに行ってテキストをとってきてHTMLに貼り付けていました。 ただ、その質問も全部で100個くらいあり、1つ1つコピペするのは面倒くさいので、スクレイピングで特定のURLに一括アクセスし、テキストを引っ張ってきて、新サイトのHTML構造に埋め込み、HTMLを自動生成しようと思ったのがきっかけです。 僕はシェルスクリプトはほぼ書けず普段JSを使うことが多いため、node.jsを使
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
UIテストの自動化！Node.jsとSeleniumでWebアプリのUIテスト環境構築 – ICS MEDIA
Webアプリケーションを開発する際、みなさんはどのようにテストを行っていますか？ Webアプリケーションは、ユーザーごとに異なるブラウザを使用しており、ユーザー操作も必要となるため、手作業でテストをされている方も多いと思います。また、機能改修やバグフィクス後に、リグレッションテスト（改修により既存機能への影響がないかを確認する回帰テスト）が必要となりますが、時間が取れずしっかりとテストができていない方も多いのではないでしょうか。 本記事では、これらのテストを自動化することのできる「Selenium Webdriver」（セレニウム ウェブドライバー）について紹介します。 入力フォームのバリデーション機能をチェックするデモ 簡単な入力フォームのバリデーション機能をチェックするデモを動画で紹介しましょう。入力値に対して期待するエラー文言が表示されているかのテストを実施しています。Seleniu
絶対つまずかないGulp入門。インストールからSassのコンパイルまで – ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 5に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18〜v20で動作検証をしています。 ※Gulp
Rucksack - スタイルシートの面倒なところを簡単に
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SassやLESSは一旦覚えてしまえば手軽に使えますが、最初の覚えるまでが面倒というイメージがあるかも知れません。また、デファクトがまだ定まっていない雰囲気もあり、どちらかだけを使っているとプロジェクトによっては別な方を選択する可能性もあります。 そこで試してみたいのがRucksackです。ほぼ素のスタイルシートながら、関数的に特定の書き方を展開してくれるツールです。 Rucksackの使い方 rucksackはいわばスタイルシート用の関数のようなものです。例えば文字サイズをレスポンシブにしたい場合は次のように記述します。 .foo { font-size: responsive; } これは次のように展開されます。 .foo { font-size: calc((12px - 4
How To Make A Smartphone Controlled 3D Web Game | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. The following is a guest post by Charlie Walter. Charlie does a bunch of work with Three.js (3D in the browser with WebGL) and gaming concepts. If that stuff interests you, read on! In this tutorial I’ll explain an approach on how to connect your smartphone to a 3D web game. We’ll be making a car w
GitHub - JamieMason/ImageOptim-CLI: Make optimisation of images part of your automated build process
Bower入門(応用編) - from scratch
Bower入門(応用編) さて、応用編を書いていきます。 基礎編ではBowerのインストールとライブラリ管理する上での基本的なコマンドを紹介しました。 応用編ではBowerのライブラリを管理する上で利用するべきツールやライブラリを公開する上で心がけるべきことについて書いていきます。 少し長いのでサマリ Bowerを管理する上で利用すると良いツール：grunt-bower-taskがオススメです ライブラリを公開する上で心がけること、その1：mainとignoreをちゃんと書きましょう ライブラリを公開する上で心がけること、その2：ちゃんとgit tagを使ってバージョン管理しましょう Bowerからインストールしたライブラリを利用する場合 前回の基礎編で少し書きましたが、おさらいすると、Bowerはあくまでパッケージマネージャなので、インストールしてもフォルダ構造までは変えてくれません。
Bower入門(基礎編) - from scratch
Bower入門 これから Bower について書いてきます。Bowerの使い方から実際に使う上で考慮することまで含めて書きます。 長くなりそうなので単に使うだけの基礎編とモジュールを作る上で気をつけることをまとめた応用編に分けて書きます。 Bower とは Twitter社が作ったフロントエンド用のパッケージマネージャです。 Java で言う Maven、 Ruby で言う gem、 Perl で言う cpan のようなものです。 Node.jsには npm と呼ばれるパッケージマネージャがありますが、それに強く影響を受けています。 パッケージマネージャを利用することでライブラリを自分で管理する必要がなくなり、管理するファイルの数を減らすことができます。 また、パッケージマネージャを利用することでライブラリのバージョン管理をしやすくなります。 さらに自分のライブラリを Bower comp
Brunch | ultra-fast HTML5 build tool
var app, base, concat, directory, gulp, gutil, hostname, path, refresh, sass, uglify, del, connect, autoprefixer, babel; var autoPrefixBrowserList = ['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']; gulp = require('gulp'); gutil = require('gulp-util'); concat = require('gulp-concat'); uglify = require('gulp-uglify'); sass = require('gulp-sass'); connect = require(
CSS Post-Processing With Pleeease — SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. Pre-processors such as Sass, Less, and Stylus have revolutionized CSS development. If you’re a pre-processor skeptic like I was, try using Sass for a project or two: you won’t ever return to raw CSS again. Desp
Grunt入門 〜このマークアップからの卒業〜 - Qiita
Grunt入門は割りと出し尽くされた感があるので、マークアップの効率化に焦点を絞ってみました。 目標は以下、 Windows, OS Xにnode.jsインストール HTMLを書かない（jadeの導入） cssを書かない（sass, compassの導入） Rubyインストール jsを書かない（CoffeeScriptの導入） node.jsだけで完結させれば話は早いのですが、lessやstylusやreworkよりsass, compassのがまだ需要があるみたいなのでRubyも入れてみます。 もろもろインストール WindowsとOS Xのインストール方法を紹介しているので長いですが、インストーラーを2つダウンロードしてコマンドを叩く簡単なお仕事です。 Windowsは環境変数の設定が面倒くさいですが、そこだけ乗り越えちゃえばOS Xと同じで楽ちんです。 WindowsでGruntイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fetched URL: http://b.hatena.ne.jp/site159/Node.js/
Alternative Proxies:
Living Styleguide by Devbridge
Express - Node.js Web アプリケーション・フレームワーク
GitHub - purifycss/purifycss: Remove unused CSS. Also works with single-page apps.
GitHub - clean-css/clean-css: Fast and efficient CSS optimizer for node.js and the Web
GitHub - cssdream/cssgrace: 从今天起，写简单优雅面向未来的 CSS。From now on,writing brief,elegant,future-oriented CSS.
npmコマンドの使い方 - Qiita
