サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
shigekitakeguchi.github.io
ページの表示を高速化しようとしたら手法はいろいろあるけどフロントエンドエンジニアができることのひとつに画像のスプライト化ってのがある。 たくさんの画像ファイルをサーバーへリクエストして表示ってのをやるとサーバーの負荷になる。 負荷になると応答が遅くなる。こういうことからリクエスト数を減らせば表示の高速化が見込まれたりするので少しでも快適にページを観てもらおうと思えばやったほうがいい。 https://compass-style.org/ で、ソシャゲーとか作ってるとアクセスは多いし負荷となる処理も多いのでスプライト化は必須ってことが多いんだけど以前はCompassを使ってやるのが一般的だった。 けどCompassがさすがに2年くらい放置(更新されない)されているので仕様がいろいろ古い感じがするし単純にメンテナンスされてないことに不安をがあったりするのでできれば使うのを避けたい。 そうなると
npmとwebpackで作るいい感じのフロントエンド開発環境(React.js使わない)2016年5月の場合。 これをベースにしてthree.jsの開発環境。 以前はGruntやGulpやらで用意してたけどnpm+webpackへ移行。 three.js - Javascript 3D library WebGLをあつかう時にWebGLままで記述するのはちょっとツライので何かしらのフレームワークを利用すると思うけど(Unityでも作れるらしい)その中でもthree.jsが今のところメジャー。なので情報も多いし事例も多い。 開発するってことになるとCDNから圧縮されたthree.min.jsを読み込むのもいいんだけどwebpackでrequireしてみました。 必要なものあるかどうか確認
数ページのサイトとはいえテンプレ化はしたい、includeを使うと共通要素を外部ファイル化できて効率いいよね。サンプルとしてファイルは以下におてます。 https://github.com/shigekitakeguchi/yarn-webpack-ejs ちょっとした、例えばブランドサイトとかキャンペーンサイト、小規模な企業や組織、お店のサイトというと構成によっては1ページってこともあるけど数ページから20ページくらいの規模になると思う。 いやいやもっとあるよってことになるかもしれないけど今回紹介しようと思うやり方は数ページから20ページくらいの規模のものが便利なんじゃないかな。 それ以上のサイトになるともうちょっと本格的な静的サイトジェネレーターとかを検討したほうが良いと思う。 数ページとはいえヘッダーやフッター、あとmeta要素やナビゲーション、細かいところでいうとGoogle An
css-loader、style-loader、sass-loaderを使わないでSassをnpmでコマンドからコンパイルするものがシンプルでいいなと思ってましたがwebpackのloaderを使うものも作ってみた。 SassのコンパイルやらCSSをrequireしないと?と思ってたけどプラグインを使えばできた。 必要なものあるかどうか確認
Vue.js Vue.jsは日本語のドキュメントも整備されていて情報も多いので助かりますね。 でそのVue.js + webpackでいい感じの環境を作る必要があって用意してみました。 Vue.js webpack vue-router(あったほうが良さそうなので使います) Babel(これもあったほうが良さそう的なので使います) サーバーとのHTTP通信はjQueryを使います(元々プロジェクトに入っていたのでさらに追加するよりもいいだろうという判断です) 必要なものあるかどうか確認
npmとwebpackで作るいい感じのフロントエンド開発環境(React.js使わない)2016年5月の場合。 これをベースにして今度はp5.jsの開発環境。 p5.js Processingの記述っぽい感じをJavaScriptで実現したもの。 Processing.jsもあるけどJavaのコードをそのまま動かせるのが特徴。でもいかんせんキモい。 p5.jsの方がJavaScriptの機能やHTMLのオブジェクトとの連携がシンプル。 必要なものあるかどうか確認
Riot.js — A React-like user interface micro-library · Riot.js ReactやAngularJSは「でかすぎる」という問題がずっとあって、それは必要だからそうなのかもしれないけど使うプロダクトがかなり限定されるような気がする。 もう少し小さなプロジェクトもしくは、はじまりは小さくはじめたいという場合はRiot.jsやvue.jsあたりが最適なんじゃないかと言われている。 ということでRiot.jsの学習をはじめるための環境をnpm + webpackで作ってみた。 ついでなのでBabelでES2015の機能を取り入れた書き方ができるようにもしてます。 Babel · The compiler for writing next generation JavaScript サーバーとのHTTP通信などが必要になったらSuperAgent
このページを最初にブックマークしてみませんか?
『shigekitakeguchi.github.io』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く