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

Element.append()メソッド
Element.append()
メソッドは、一連のNodeオブジェクトまたは文字列をElementの最後の子の後に挿入します。文字列は、等価なText ノードとして挿入されます。
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()
はそれぞれ挿入される場所が違うだけで使い方も同じです。
2023.08.22 [火] 2025年卒インターンシップ ルール改正
夏休み期間中に企業のインターンシップに参加する人も多いと思います。
ここ数年では、就職活動やキャリア形成において、インターンシップはますます重要な役割を担っています。
重要性が増しているインターンシップですが、時代とともに就活の現状と、ルールが合わなくなってきていました。
そこで、経済産業省・文部科学省・厚生労働省は、2022年6月「インターンシップを始めとする学生のキャリア形成支援に係る取組の推進に当たっての基本的考え方(通称:三省合意)」を公表しました。
この中に2025年春卒業の学生からを対象とした「インターンシップルール改正」が明記されており、話題となっています。

対象は、大学生・大学院生となっていますが専門学校生にも影響は少なからずあります。
どのような改正が行われるのか、就職活動がどう変わるのか、そして2年制専門学校生にどのような影響があるのか、調べてみました。
現在の就職活動
以前までの経団連により示されている就活ルールでは、企業の採用活動スタート時期について以下のように定められています。
- 広報活動:卒業年度の前年3月1日
- 採用選考:卒業年度6月1日
- 内定:卒業年度10月1日
また、インターンシップに関しては「学生が在学中に自らの専攻、将来のキャリアに関連した就業体験を行うこと」と定義されており、企業はそこで取得した学生情報を広報活動や採用選考活動に使用してはならないとされてきました。
しかし、経団連では2018年10月、2021年度以降入社対象の「採用選考に関する指針」を策定しないことを決定したことで、経団連に所属しない企業や外資系企業を中心に、前倒しで採用活動を行い、インターンシップも就職活動の一環と捉えられるようになりました。
このように、インターンシップを表す意味が曖昧になったことから一般社団法人日本経済団体連合会と大学関係団体等の代表者により構成される「採用と大学教育の未来に関する産学協議会」が発足し、インターンシップの見直しの方針を含む2021年度報告書「産学協働による自律的なキャリア形成の推進」を議論し、公表しました。
日本におけるインターンシップの現状・課題
産学協議会が発行した「学生用リーフレット」内には、日本独特のインターンシップの課題を下記のように記しています。
- 現状、「インターンシップ」という名の下に、様々な目的・形態・期間等のプログラムが実施され、学生の間で混乱や焦りを招く一因となっています。
- 特に学生は、採用に直接つながると期待して、実務を全く体験しない「インターンシップ」と称する短期プログラムに参加しているのが実情です。学業が疎かにされているとの批判もあります。
- 国際的なインターンシップと大きく乖離しているため、外国人留学生など海外の学生の理解や参加が得られにくいのが現状です。
- この背景として、1990年代後半に政府が主導する形で、専ら「教育目的」として導入されたことが挙げられます。インターンシップ本来の機能である「学生のキャリア形成支援」が十分に発揮されているとはいえません。
学生用リーフレット
ちなみに、周知を目的としたためか、経済産業省・文部科学省・厚生労働省・産学協議会・国立大学協会・内閣官房などから、あらゆる資料が散在しており、どの資料をみればわかりやすいのか、探し回ったのですが、2023年3月に配布された「学生用リーフレット」が一番わかりやすいです。
また、最新の情報は、産学協議会の「活動報告」に随時更新されるようです。
2025年卒以降の就職活動
内容はどのようになっているのでしょうか。
まず、現在「インターンシップ」と呼ばれているものを、4タイプに分類しました。
インターンシップ4タイプ
- タイプ1:オープン・カンパニー
- タイプ2:キャリア教育
- タイプ3:汎用的能力・専門活用型インターンシップ
- タイプ4:高度専門型インターンシップ
2023.08.18 [金] 鶴田 信博さん[株式会社マベリカ](業界研究2023)
前期授業も終了し、やっと夏休みです。
とはいえ、台風も近づき、毎日暑いですので、就職活動や課題制作と、前期に勉強したことを忘れないように、充実した夏休みを送ってください。
前期最後の業界研究には「【推しの子】」「ゴールデンカムイ」「異世界おじさん」「がっこうぐらし!」などの数々のアニメ公式サイトを制作している株式会社マベリカのプロデューサーの鶴田さんにお越しいただき、「アニメ公式サイト制作のお仕事」について講義をしていただきたました。
学生の中には、アニメやゲームなどの公式サイトを将来制作したいと考えている学生もいて、実際にエンターテイメント業界のWebサイト制作に従事している卒業生も多くいます。

株式会社マベリカ
株式会社マベリカは、東京都新宿区にあるWebシステム会社です。とくに自社開発のCMS「coreblo-CMS」を利用したアニメ・映画サイトの構築を得意としています。
その他にも、デジタルコンテンツ販売プラットフォーム「coreblo X」の販売やコンサルティング・システム開発などを行っています。
「coreblo-CMS」の開発を機に、映画会社からのサイト制作が増えたそうです。


マベリカさんのWebサイトには、実績など、あまり紹介されていませんが、多数のアニメ公式サイトを制作されています。鶴田さんもTVアニメ「ゴールデンカムイ」のエンドロールに名前が明記されています。
このように、数々のアニメ公式サイトを制作・運営されているマベリカさんからアニメ公式サイトの流れに沿って、Webサイト制作についてお話していただきました。
アニメ公式サイト制作の流れ
アニメの公式サイト制作を依頼される場合は「アニメ化決定!」などの発表と同時にティザーサイト公開、少しずつ情報公開、本サイト制作・公開後運用、公開後の話題提供のコンテンツ制作、アニメ終了後のパッケージ販売戦略・システム構築となります。
- ティザーサイト制作・運用
- 本サイト(公式サイト)制作・運用
- 話題換気施策(SNS活用など)
- テレビ本放送・パッケージ(DVDやグッズ販売など)対応
TVアニメの放送に合わせて、Webサイトの使われ方が変わっていきますので、それに対応した仕組みに精通している「coreblo-CMS」やマベリカさんの実績などが、アニメ公式サイトの制作を依頼される理由の一つだと思います。

2023.08.10 [木] map()?new Map?
夏休みのような長期休暇は、普段なかなか調べられないことや学習などに時間を費やしたいところです。
最近では、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()メソッドは、配列の各要素を順番にコールバック関数に渡し、各要素に対する操作を行います。要素の数だけコールバック関数が実行されます。
2023.08.04 [金] 2023年夏季閉館日のおしらせ
「災害級の暑さ」って何なんでしょうか。
このクラスを超えると、次の級は何になるのか気になります。
とはいえ、本当に暑いので、夏休みとはいえ屋外での遊びには気をつけたいところです。
さて、トライデントコンピュータ専門学校夏季閉館日のお知らせです。

トライデントコンピュータ専門学校 夏季閉館日について
- 校舎閉館日:2023年8月11日(金・祝)〜15日(火)
期間中は、学校への電話やメールでの、お問い合わせのご返答が滞ります。
何卒、ご了承ください。
なお、Webデザイン学科への問い合わせはSNSやこちらのブログにコメントしてください。
2023.07.28 [金] 田口 和磨さん[ReDesigner for Student](業界研究2023)
暑い毎日が続きますね。
小中高生は、すでに夏休みに入っているかと思いますが、トライデントコンピュータ専門学校は、8月4日まで前期授業があります。
とはいえ、残りわずかですので頑張っていきましょう。
過去、3回デザイナーのポートフォリオ制作についてレクチャーいただいたReDesigner for studentの田口さんに、今年もお願いしました。

これまでは、新型コロナ感染拡大もあり、オンラインでの講演だったのですが、今年はやっと名古屋にお越しいただけました。

ReDesigner for Student
ReDesigner for Studentは、「世の中にデザイナーを増やす」をミッションにスタートした新卒デザイナー特化型就活支援サービスです。
- 求人/インターン検索機能
- マッチング機能
- 学生同士のポートフォリオ閲覧
- メッセージ機能
- 最新のイベント情報
- OB/OG訪問機能
など、デザイナーを目指す学生と、デザインの力を信じる企業をマッチングする就活プラットフォームです。
デザイン会社である株式会社グッドパッチが、デザインの力を信じるたくさんの企業と、これからの未来をつくる学生をマッチングするサービスとして、2019年に正式リリースしました。
さらにデザイナーの育成にも注力して、学生向けの各種セミナーの開催、ポートフォリオ制作へのアドバイスや就活相談なども行っています。
ポートフォリオとは
まだ入学して3ヶ月あまりの1年生ですが、就職活動には必ず必要となるポートフォリオ制作レクチャーや、実際のデザイナー就活について話をしていだきました。

ポートフォリオとは、クリエイターにとっての説明書のようなものです。
何をやってきた人なのか、直接説明しなくてもわかるようにするものです。

さらに、この説明書を自分で読むことで、自分のことも客観的に見えてくる。
ということは、就職活動の時にだけでなく、今の自分を客観視するツールとして、常にアップデートして活用していくのが、ポートフォリオの役割です。
今日のゴールとしては「1ヶ月以内に、2〜3作品がまとまったポートフォリオver.1」が完成している」。
このとき、完成度は100点満点中30点を目指します。

過去3回の「業界研究」授業のブログを見直したのですが、50点(2021)→2週間で30点(2022)→1ヶ月で30点(2023)と段々とハードルが下がってきています。それだけ早めにスタートすることの重要性と難しさがあるのだと感じます。
2023.07.18 [火] 伊藤さん[株式会社スタメン](業界研究2023)
あまり報道されていませんが、新型コロナウィルスの感染が広がっているようです。
体調が悪いなと思ったら、無理せず病院に行きましょう。
本年も、株式会社スタメンのデザイナー伊藤さんにお越しいただき、インハウスデザイナーの仕事や、デザインの基礎などについてお話しいただきました。
実際のFigmaデータなども、紹介していただき現場のデザイナーのお仕事を垣間見ることができました。

株式会社スタメンは「ITとリアルの融合」を強みとして、社内SNSの「TUNAG」やサブスクリプション型のオンラインファンサロン「FANTS」などの企画、開発、運用をされている会社です。社員の平均年齢も低く、若い社員の方が活躍されている会社です。
今回の講義では、現役のデザイナーとして、伊藤さんに「インハウスデザイナーのお仕事」「デザイナーの目(ワークショップ)」「仕事と就活」についてお話しいただきました。

デザインとは
まずは、デザインとは何か?見た目がおしゃれならいいのか?伝わらなければいいデザインとは言えないのではないのか?など、デザインを考えるきっかけになる事例などを紹介していただき、その上で、デザインとはある問題を解決するための計画を考え、適切な表現をし、実現させることと話していただきました。


情報の整理をするために
- 使いやすい・読みやすい=背景と同化はダメ
- 直感的に理解し易い=「止まれ」など道路標識
- ストレスを感じさせない
- 与えたい印象を与える=柔らかくしたい場合は線・色・フォントで調整
