ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

後期集中授業が終わり、通常授業が始まります。
1年生はJavaScriptに触れる機会も増えてくるということで、色々とJavaScriptの授業資料を棚おろししています。
永らく要素の挿入をNode.appendChild()でやっていたのですが、挿入する要素をノードで扱わなくてはならず、NodeList と HTMLCollection と Node.appendChild() とのように、初学者には頻繁にエラーと出くわすことになります。
実は、append, prepend, before, after, remove, replaceWith のようなモダンなメソッドがあるのですがJavaScriptの本などでは、あまり紹介されていませんので、調べてみました。

Element.append()メソッド

Element.append()メソッドは、一連のNodeオブジェクトまたは文字列をElementの最後の子の後に挿入します。文字列は、等価なText ノードとして挿入されます。

• Element: append() メソッド - Web API | MDN

Node.appendChild()との違いは次の通りです。

• Element.append()は文字列も追加することができますが、Node.appendChild()はNode オブジェクトのみを受け付けます。
• Element.append()には返値がありませんが、Node.appendChild()は追加された Node オブジェクトを返します。
• Element.append()は複数のノードや文字列を追加することができますが、Node.appendChild()はノードを1つだけしか追加することができせん。

const div_elm = document.querySelector('div');
const appendText = document.createElement('p');
appendText.innerText = 'appendで挿入';

div_elm.append(appendText,"
そのままテキスト_append
");

結果は、こうなりました。

prepend()メソッド, after()メソッド, before()メソッド,

Element.prepend()、Element.after()、Element.before()はそれぞれ挿入される場所が違うだけで使い方も同じです。

夏休みのような長期休暇は、普段なかなか調べられないことや学習などに時間を費やしたいところです。
最近では、JavaScriptのフレームワークを触わることも増え、mapなんちゃらと、よく見かけます。なんか新しいループの便利機能ぐらいに思ってました。

そうしたら、new Mapなんてのも見かけるようになって「あぁ、これは区別がつかなくなりそう」ということで、調べてみました。

Array.map()

array.map()は、JavaScriptの配列の要素を変換するための便利なメソッドの一つです。
このメソッドは元の配列の要素を1つずつ順番に取り出し、指定されたコールバック関数を適用して新しい要素を生成し、それらを含む新しい配列を返します。

参考：Array.prototype.map() - JavaScript | MDN

// 元の配列
const numbers = [1, 2, 3, 4, 5];

// 各要素を2倍に変換する新しい配列を生成
const doubledNumbers = numbers.map((num) => {
  return num * 2;
});

console.log(doubledNumbers);
// 出力: [2, 4, 6, 8, 10]

map()メソッドは、配列イテレーターメソッドで、配列をループして、配列の要素を順番に指定した関数に渡す動きをします。イテレータ（Iterator）とはデータ構造の各要素に対して繰り返し処理によって要素を返す仕組みです。

3つの引数

第1引数として関数を受け取ります。この関数は、要素ごとに呼び出され、実行されるたびに、返された値が新しい配列に追加されます。
配列イテレーターメソッドの多くは、この関数に3つの引数が渡されます。

• 第1引数：配列の値
• 第2引数：配列要素のインデックス
• 第3引数：配列自身

const doubledNumbers = numbers.map((num,index,array) =>{ {
  return num * 2 + `、indexは${index}`+ `、配列${array}`
});
//出力：["2、indexは0、配列1,2,3,4,5", "4、indexは1、配列1,2,3,4,5", "6、indexは2、配列1,2,3,4,5", "8、indexは3、配列1,2,3,4,5", "10、indexは4、配列1,2,3,4,5"]

map()メソッドの第2引数

第1引数には、関数を受け取りますが、第2引数を指定した場合、この第2引数がthisの対象となるキーワードとなります。

const city = {
  tokyo: "東京",
  nagoya: "名古屋",
  osaka: "大阪"
};

const tomei =["tokyo","nagoya"]

const doubledNumbers = tomei.map(function(name) {
  return this[name];
}, city); 
//オブジェクトcityがthisの対象、tomei配列をキーとして取得
//出力： ["東京", "名古屋"]

じつは、ES5の頃からあるメソッドで他にも便利な配列メソッドと一緒に紹介されていることが多いので、forEach()メソッド、filter()メソッド、reduce()メソッドも解説していきます。

array.forEach()

array.forEach()メソッドは、配列の各要素を順番にコールバック関数に渡し、各要素に対する操作を行います。要素の数だけコールバック関数が実行されます。

参考：Array.prototype.forEach() - JavaScript | MDN

2月が短いというのありますが、あっという間に3月ですね。
だんだんと春めいた陽気になってきました。

さて、3月になり、名目上の就職活動解禁となりました。
来年（23年）卒の学生たちは、説明会参加やエントリーなどで慌ただしく活動しているか思います。
その就職活動で必要なものが、ポートフォリオです。Webデザイン学科の学生が志望するデザイナー職・エンジニア職には、採用試験の前や面接時に作品集「ポートフォリオ」を求められることが多くあります。

Webデザイン学科では、Webサイト制作を学んでいるため、その技術や成果を伝えるためにWebサイトでポートフォリオを制作していますが、まれに紙のポートフォリオが必要になる場合があります。

印刷用CSSで紙用のレイアウトを設定する。

ポートフォリオを簡易的に作るサービスも増えてきていますが、いちから制作すると、やはり時間がかかります。さらに、IllustratorやInDesignで紙のポートフォリオを制作するとなると膨大な時間を費やすことになります。
就職活動期間とはいえ、学校の授業や課題などもありますので、そこまで時間をかけることはできません。

そこで今回は印刷用のスタイルシートを設定することで、Webポートフォリオを印刷すると紙用のレイアウトでプリントさせる方法について書いていこうと思います。

以前は、Webサイトを印刷する機会も多かったのですが、スマートフォンが普及したおかげでずいぶんと少なくなってきました。さらにブラウザの印刷メニューでも背景非表示など最適化が可能になっていますので、内容を見るためのプリントなら、それほど不便なく印刷できます。
そのためか、印刷用のCSSが読み込まれているWebサイトも少なくなってきました。

印刷用CSSをWebサイトに適用させる為には、PCとスマートフォンの見た目を切り替えるメディアクエリで使う、メディアタイプが重要になります。

メディアタイプ

メディアタイプには、機器の分類値を記述しています。
また、メディアタイプは省略可能です。その場合、暗黙的に値はallとなります。
主なメディアタイプの分類は、

• all：すべての機器に適合します。
• print：ページのある資料や、画面に印刷プレビューモードで表示されている文書に適合します。
• screen：主にPCやスマホなどスクリーン向けのものです。
• speech：音声合成向けのものです。

CSS2.1およびMedia Queries3では、他にもテレビやプロジェクターなどのメディアタイプ（tty、tv、projection、handheld、braille、embossed、aural）が定義されていましたが、これらはMedia Queries4で非推奨となっています。

印刷用CSSを設定する方法

印刷用のCSSを設定する方法は4つほどあります。

① link要素にmedia属性で読み込む

１つめは、外部CSSファイルとして、link要素のmedia属性の値をメディアタイプの分類値にします。
分類値には複数の値を設定することもできます。

春休みになりました。長期休暇に、普段調検証できないことを、いろいろと調べて勉強していきたいですね。
今回は、ずいぶんと一般的になったSassの@useの使い方について調べてみました。

Sassとは

Sass（Syntactically Awesome StyleSheet）とは、CSSを拡張して、書きやすく、見やすくしたスタイルシートのことです。
直訳すると「文法的に素晴らしいスタイルシート」で、Sassのページには「世界で最も成熟した、安定した、強力なプログレードのCSS拡張言語です。」と記載されています。
以前は、LessやStylusなど他のCSSメタ言語もよく聞かれたのですが、最近ではSassの話題ばかりになっています。
ちなみに、CSSメタ言語とは、CSSの生産性向上の為に拡張された技術のことです。

私も、ファイルを部品ごとに分割して管理したり、reset CSSを別ファイルで読み込む場合など便利に利用しています。
CSSの@importと違って、Sassの@importはビルドすると合体されるため、HTTPリクエストの数が増えることがなく、読み込みスピードに大きな影響がありません。

そんな便利に使ってきた@importですが、今後数年間で、段階的に廃止され、最終的にはSassから完全に削除されるようです。「代わりに@useルールを優先してください」とのことです。
※遅くても、2022年10月1日には廃止されるみたいです。

@useを使ってみる

単純に@importを@useに変えればいいんでしょ、と思って使ったら躓きました。。。
ということで、早急に@importの代わりに@useの使い方を理解しないといけないわけなので、調べてまとめてみました。

Sassのドキュメントには、

このルール（@use）は、他の Sass スタイルシートからMixin、関数、変数を読み込み、複数のスタイルシートの CSS を一緒に結合するものです。@useによって読み込まれるスタイルシートは「モジュール」と呼ばれます。

と書かれています。

トライデントコンピュータ専門学校では、夏休みも終わり、各学科ごとに集中授業で作品制作、資格対策などが行われています。そして来週からはいよいよ後期通常授業が始まります。
学園祭などの学校イベントはもちろん、就職活動も始まる後期ですので、充実した学生生活を送ってもらいたいです。

さて、久しぶりにCSSについてわからないことがあったので、調べてみました。
先日、コリスの「モダンCSSによる絶対配置（position: absolute;）の削減 」という記事内にdisplay:contents;の便利な使い方が紹介されていました。

displayプロパティに関しては、過去に、flexについて「そろそろFlexboxを勉強し始めてもいいんじゃないだろうか - ウェブDeBLOG」だったり、gridについては「 CSS Grid Layoutの時代がやってくる。」に記述しましたが、以前よりも、頻繁に使っている気がします。
とうことで、今回はdisplay:contents;です。

display:contents

いつもどおり、W3Cの仕様書を見てみると、

contents

The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element’s children as normal).

要素自体はボックスを生成しませんが、その子や疑似要素は通常通りボックスやテキストランを生成します。ボックスの生成とレイアウトの目的のためには、要素は要素ツリー内でそのコンテンツ（ソース・ドキュメントの子要素と、 ::before と ::after 疑似要素のようなその疑似要素の両方を含み、これらは通常通り子要素の前後に生成される）によって置き換えられたかのように扱われなければならない。

あいかわらず、よくわかりませんので実際にコードを書いて確認したいと思います

CSSのボックスモデル

まずは、要素自体のボックスを理解するために、CSSのボックスモデルを復習したいと思います。
HTMLの要素はどの要素も、下図のような「ボックス」と呼ばれる四角形の領域を生成します。

CSSのdisplayプロパティの値によって、ボックスと子要素の描画を設定することができます。

displayプロパティ

displayプロパティには、blockやinlineなどの表示タイプを設定するものや、flexやgridなど、要素内部の表示タイプを設定するものなど、種類が分かれています。
その中で要素がボックスを生成するかどうかを設定する値が、noneとcontentsとなります。

ここ最近、ES6やclass、TypeScriptなど、ネイティブなJavaScriptな話題を取り上げてきましたが、初心者には難しいよなぁと実感しています。
Googleで検索しても【脱jQuery】【React, Vue】的な記事ばかりが、目立ちます。

ただ、HTMLの書き換えや、ちょっとしたアニメーションのイベントぐらいだったら、わざわざdocument.getElementById("idname")とかしなくても、jQueryを利用して$("#idname")でいいのではないかと思っています。
アニメーション自体はCSSが担うようになってきましたしね。

そこで少し、jQueryについて紹介したいと思います。
ちなみに、トライデントコンピュータ専門学校Webデザイン学科では、以前はjQueryでJavaScriptを教えていましたが、現在はネイティブのJavaScriptで授業を行っています。

学生の理解度は、残念ながらどちらも変わらない印象です。すんなり理解できる人は理解できますし、わからなくなってしまう人は、全然わからなくなってしまいます。

HTMLとCSS

まず、WebサイトでJavaScirptを使って何かしよう思った場合、HTML（DOM）の要素を取得し、CSSの値（value）で操作するのが基本となってきます。
ただ、HTMLの構造を理解していないとjQueryにしろ、ネイティブなJavaScriptにしろ、操作ができません。

トライデント

HTMLの要素の名称は、下記にようになっています。

この要素のフォントサイズ（文字の大きさ）をCSSを使って20pxにしようとする場合は、