bootstrapでリンクを作るとき、リンク範囲を広げたいときがある。そんな時は、下記をリンク先を参照すること。
カテゴリー
カテゴリー
配列の数字は引用符でくくらない
配列の数字は引用符でくくっていると、ソート関数で並べ替えができず、苦戦しました。
ソートについて参考になったサイト。
https://qiita.com/ShaderKid/items/ac790b1f2dc387477d4f
【悪い例】
[
{
"id": "1",
"area_number": "5",
"team": "ああああ",
},
{
"id": "2",
"area_number": "3",
"team": "いいいい",
}
]
数字を引用符でくくっていると数値として認識されず、sort関数でソートできない。
【良い例】
[
{
"id": 1,
"area_number": 5,
"team": "ああああ",
},
{
"id": 2,
"area_number": 3,
"team": "いいいい",
}
]
数字が数値として認識され、sort関数でソートできる。
カテゴリー
2020.11.9-11.13の週報
2020.11.9
【午前】
Jリーグチーム一覧サイトの作成。
【午後】
Jリーグチーム一覧サイトの作成。
リンク先のある、なしでフォントカラーを変える。設定値により、配列の一部を削除。以上ができた。連想配列のソート、ホバーをテーブルセルいっぱいに広げる、を明日やる。その後、jsonファイルにデータを追加。
2020.11.10
【午前】
Jリーグチーム一覧サイトの作成。
【午後】
Jリーグチーム一覧サイトの作成。
連想配列のソートで大苦戦。結局、数値をクォーテーションでくくると数字として判定されるのか、複数ソートができなくなることが判明。時間がかかってしまった。ホバーをテーブルセルいっぱいに広げるのは、容易に実装できた。明日は、jsonファイルにデータ追加の続きから、リンク先の検査をして、htmlファイルを本番環境にアップロードするまで行けるかな。
2020.11.11
【午前】
Jリーグチーム一覧サイトの作成。
【午後】
Jリーグチーム一覧サイトの作成。
今日はjsonファイルにデータを追加し、本番環境にアップロードできた。せっかくなのでサイト速度を測ってみた。webpackでjsファイルをビルドすれば速くなるだろうと思っていたが、実際は以前のものと比べて遅くなってしまった。
これは、今までのサイト。CSSで作ったもの。
Webpack5でsassもjsにバンドルさせて作ったもの。
相当、悪くなりました。予想外だった。
明日はconfigファイル等をブログに書き残し、jsonファイルのリンク先検査。
今後の課題
- 設定値で年度を変更できるようにする。
- 設定値でdiv idを変更できるようにする。
2020.11.12
【午前】
Jリーグチーム一覧サイトの作成。
【午後】
Jリーグチーム一覧サイトの作成。ブログ書き残し。
jsonファイルのリンク先検査をしたら、相当変化してた。特にここ2年でhttpからhttpsに変わってる。そして、完了。今までと違って、jsonファイルの設定を変更するだけで、入れ替えができるようになった。よかった。configファイルの設定をブログに書き残す。
【Jリーグチーム一覧サイト】
http://toushin.konjiki.jp/index.html
2020.11.13
【午前】
webpack使用調査。
【午後】
webpack使用調査。ブログ書き残し。
webpackもだいぶ分かるようになり、いろいろ試してみたら先々週まで悩んでいたfontawesomeの表示方法が解決できた。よかった。サイトは完了させたつもりだったが、来週手直しする。
Webpack5で、style.cssとインラインスタイルシートでは、どちらが速いか、高得点になるかを試してみた。条件は下記。
- ホームページのソースの量は、ほとんどなし。
- fontawesomeを使う。
- サーバーは忍者ツールズの無料ホームページ。
- 審査はグーグルのPageSpeed Insights。
まずは、style.css。style.cssとmain.jsに分割される。
結果は、62点。
次にインラインスタイルシート。webpack5でmain.jsにcssも全てバンドルされる。
結果は、50点。
忍者ツールズの無料ホームページは、広告用のjsファイルがついてくるので、それが遅延の原因になっている可能性があるな。だから、忍者ツールズの無料ホームページでは、jsファイルとcssファイルは別にしたほうがいいのだろう。
【後日談】
http://toushin.konjiki.jp/ というサイトで試してみたら、jsファイルとcssファイルを分割したほうが遅かった。
webpackの設定については、下記リンク先を参照。
https://ajike.github.io/webpack_scss/
http://toushin.konjiki.jp/ というサイトを、Webpack5を使いリニューアルしてみた。package.jsonとwebpack.configの設定でいろいろ考えた結果、下記のようになった。
npmでbootstrap、jqueryは最新版を入れる。bootstrapは4.5.3、jqueryは3.5.1を入れたはずなのに、ChromeのWappalyzerではbootstarpは4.1.3、jqueryは3.3.1と表示される。分からん。
{
"name": "new11",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.0.1",
"css-loader": "^5.0.0",
"postcss": "^8.1.4",
"postcss-loader": "^4.0.4",
"sass": "^1.28.0",
"sass-loader": "^10.0.4",
"style-loader": "^2.0.0",
"webpack": "^5.3.2",
"webpack-cli": "^4.1.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"bootstrap": "^4.5.3",
"jquery": "^3.5.1",
"popper.js": "^1.16.1"
}
}cssはscssで作る。cssファイルは出力せず、jsとバンドルする設定。
module.exports = {
// メインとなるJavaScriptファイル（エントリーポイント）
entry: `./src/index.js`,
// ファイルの出力設定
output: {
// 出力ファイルのディレクトリ名
path: `${__dirname}/dist`,
// 出力ファイル名
filename: "main.js",
},
// モード値を production に設定すると最適化された状態で、
// development に設定するとソースマップ有効でJSファイルが出力される
mode: "development",
// ローカル開発用環境を立ち上げる
// 実行時にブラウザが自動的に localhost を開く
devServer: {
contentBase: "dist",
open: true
},
module: {
rules: [
{
// Sassファイルの読み込みとコンパイル
test: /\.(sc|c|sa)ss$/, // 対象となるファイルの拡張子
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
// CSSをバンドルするための機能
{
loader: "css-loader",
options: {
// オプションでCSS内のurl()メソッドの取り込まない
url: false,
// ソースマップの利用有無
sourceMap: true,
// Sass+PostCSSの場合は2を指定
importLoaders: 2,
},
},
// PostCSSのための設定
{
loader: "postcss-loader",
options: {
// PostCSS側でもソースマップを有効にする
sourceMap: true,
postcssOptions: {
// ベンダープレフィックスを自動付与する
plugins: ["autoprefixer"],
},
},
},
// Sassをバンドルするための機能
{
loader: "sass-loader",
options: {
// ソースマップの利用有無
sourceMap: true,
},
},
],
},
],
},
};