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

トライデントコンピュータ専門学校 Webデザイン学科の最新情報を紹介しています。学生へのインタビュー記事から学生作品の解説、Webデザイン・マークアップ・プログラミングの授業風景、プロジェクト発表会、名古屋のWeb制作会社情報、イベント参加レポートやWeb制作の技術解説などWeb制作に関連する記事を掲載しています。トライデントコンピュータ専門学校は、いま話題の名古屋駅からユニモール地下街を歩いて3分です。

2023.09.30 [土] JavaScriptで要素を挿入する。

最終更新:2023.10.01Webサイト制作Tips 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で要素を挿入する。」の続きを読む≫

Tag : Element.append(),Element.prepend(),Element.after(),Element.before(),Element.insertAdjacentHTML(),JavaScript

22:00 Trackback : 0 Comment : 0 Top

2023.08.22 [火] 2025年卒インターンシップルール改正

最終更新:2023.08.23学校生活就職

夏休み期間中に企業のインターンシップに参加する人も多いと思います。
ここ数年では、就職活動やキャリア形成において、インターンシップはますます重要な役割を担っています。

重要性が増しているインターンシップですが、時代とともに就活の現状と、ルールが合わなくなってきていました。
そこで、経済産業省・文部科学省・厚生労働省は、2022年6月「インターンシップを始めとする学生のキャリア形成支援に係る取組の推進に当たっての基本的考え方（通称：三省合意）」を公表しました。
この中に2025年春卒業の学生からを対象とした「インターンシップルール改正」が明記されており、話題となっています。

対象は、大学生・大学院生となっていますが専門学校生にも影響は少なからずあります。
どのような改正が行われるのか、就職活動がどう変わるのか、そして2年制専門学校生にどのような影響があるのか、調べてみました。

現在の就職活動

以前までの経団連により示されている就活ルールでは、企業の採用活動スタート時期について以下のように定められています。

広報活動：卒業年度の前年3月1日
採用選考：卒業年度6月1日
内定：卒業年度10月1日

また、インターンシップに関しては「学生が在学中に自らの専攻、将来のキャリアに関連した就業体験を行うこと」と定義されており、企業はそこで取得した学生情報を広報活動や採用選考活動に使用してはならないとされてきました。
しかし、経団連では2018年10月、2021年度以降入社対象の「採用選考に関する指針」を策定しないことを決定したことで、経団連に所属しない企業や外資系企業を中心に、前倒しで採用活動を行い、インターンシップも就職活動の一環と捉えられるようになりました。

このように、インターンシップを表す意味が曖昧になったことから一般社団法人日本経済団体連合会と大学関係団体等の代表者により構成される「採用と大学教育の未来に関する産学協議会」が発足し、インターンシップの見直しの方針を含む2021年度報告書「産学協働による自律的なキャリア形成の推進」を議論し、公表しました。

日本におけるインターンシップの現状・課題

産学協議会が発行した「学生用リーフレット」内には、日本独特のインターンシップの課題を下記のように記しています。

現状、「インターンシップ」という名の下に、様々な目的・形態・期間等のプログラムが実施され、学生の間で混乱や焦りを招く一因となっています。
特に学生は、採用に直接つながると期待して、実務を全く体験しない「インターンシップ」と称する短期プログラムに参加しているのが実情です。学業が疎かにされているとの批判もあります。
国際的なインターンシップと大きく乖離しているため、外国人留学生など海外の学生の理解や参加が得られにくいのが現状です。
この背景として、1990年代後半に政府が主導する形で、専ら「教育目的」として導入されたことが挙げられます。インターンシップ本来の機能である「学生のキャリア形成支援」が十分に発揮されているとはいえません。

学生用リーフレット

ちなみに、周知を目的としたためか、経済産業省・文部科学省・厚生労働省・産学協議会・国立大学協会・内閣官房などから、あらゆる資料が散在しており、どの資料をみればわかりやすいのか、探し回ったのですが、2023年3月に配布された「学生用リーフレット」が一番わかりやすいです。
また、最新の情報は、産学協議会の「活動報告」に随時更新されるようです。

2025年卒以降の就職活動

内容はどのようになっているのでしょうか。
まず、現在「インターンシップ」と呼ばれているものを、4タイプに分類しました。

インターンシップ4タイプ

タイプ1：オープン・カンパニー
タイプ2：キャリア教育
タイプ3：汎用的能力・専門活用型インターンシップ
タイプ4：高度専門型インターンシップ

「2025年卒インターンシップルール改正」の続きを読む≫

Tag : トライデントコンピュータ専門学校 Webデザイン学科オープンカンパニーキャリア教育インターンシップ

15:15 Trackback : 0 Comment : 0 Top

2023.08.18 [金] 鶴田信博さん［株式会社マベリカ］（業界研究2023）

最終更新:2023.08.26学校生活業界研究授業

前期授業も終了し、やっと夏休みです。
とはいえ、台風も近づき、毎日暑いですので、就職活動や課題制作と、前期に勉強したことを忘れないように、充実した夏休みを送ってください。

前期最後の業界研究には「【推しの子】」「ゴールデンカムイ」「異世界おじさん」「がっこうぐらし！」などの数々のアニメ公式サイトを制作している株式会社マベリカのプロデューサーの鶴田さんにお越しいただき、「アニメ公式サイト制作のお仕事」について講義をしていただきたました。

学生の中には、アニメやゲームなどの公式サイトを将来制作したいと考えている学生もいて、実際にエンターテイメント業界のWebサイト制作に従事している卒業生も多くいます。

株式会社マベリカ

株式会社マベリカは、東京都新宿区にあるWebシステム会社です。とくに自社開発のCMS「coreblo-CMS」を利用したアニメ・映画サイトの構築を得意としています。

その他にも、デジタルコンテンツ販売プラットフォーム「coreblo X」の販売やコンサルティング・システム開発などを行っています。

「coreblo-CMS」の開発を機に、映画会社からのサイト制作が増えたそうです。

マベリカさんのWebサイトには、実績など、あまり紹介されていませんが、多数のアニメ公式サイトを制作されています。鶴田さんもTVアニメ「ゴールデンカムイ」のエンドロールに名前が明記されています。

このように、数々のアニメ公式サイトを制作・運営されているマベリカさんからアニメ公式サイトの流れに沿って、Webサイト制作についてお話していただきました。

アニメ公式サイト制作の流れ

アニメの公式サイト制作を依頼される場合は「アニメ化決定！」などの発表と同時にティザーサイト公開、少しずつ情報公開、本サイト制作・公開後運用、公開後の話題提供のコンテンツ制作、アニメ終了後のパッケージ販売戦略・システム構築となります。

ティザーサイト制作・運用
本サイト（公式サイト）制作・運用
話題換気施策（SNS活用など）
テレビ本放送・パッケージ（DVDやグッズ販売など）対応

TVアニメの放送に合わせて、Webサイトの使われ方が変わっていきますので、それに対応した仕組みに精通している「coreblo-CMS」やマベリカさんの実績などが、アニメ公式サイトの制作を依頼される理由の一つだと思います。

「鶴田信博さん［株式会社マベリカ］（業界研究2023）」の続きを読む≫

Tag : 株式会社マベリカ鶴田信博業界研究トライデントコンピュータ専門学校

18:08 Trackback : 0 Comment : 0 Top

2023.08.10 [木] map()？new Map？

最終更新:2023.09.30Webサイト制作Tips Web技術

夏休みのような長期休暇は、普段なかなか調べられないことや学習などに時間を費やしたいところです。
最近では、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()メソッドも解説していきます。