初めに
この記事は、Make IT for Designer in Advent Calendar 2019の一日目の投稿です。
はい、自分はDesignerではないのにじゃんけんに負けてしまったため初日に投稿することになってしまいました。
なので、Make IT for Designerの紹介は自分ではなく別の人がやってくれるでしょう。
どうやらこのサークルは、初めに今回の話に関係のある自分の推しを紹介する文化があるようですが、残念ながら今回話す内容に関係する推しがいないため、２日以降の投稿にご期待下さい！
今回自分が話す内容は、タイトルにもあるとおり第57回 技能五輪全国大会 ウェブデザイン職種に参加するにあたって自分がやってきたことと、終えてみてどうすれば良かったかの反省会をしたいと思います。
後、みんな大好きやらかした話も収録されているのでぜひ見ていってください。
来年以降に技能五輪全国大会 ウェブデザイン職種に出るか迷っている人の助けになればと思っています。
Make ITの人はLTで技能五輪の話を聞いてるかもしれませんが、内容が被っていたら申し訳ないです。
技能五輪全国大会とは？
そもそも技能五輪とはなんぞやって人のために公式のリンクを貼っておきます
簡単に言うと、全42職種ありそれぞれの職種で予選を勝ち抜いた選手が日本一を競う大会です。
その中でも自分が参加したウェブデザイン職種ですが、これも簡単に言うとネットが使えない(※1)環境で、デザインからサーバーサイドを時間内に作り上げるというものです。
あと、インフラリストにのっているツールやフレームワークしか使うことができません。playが使えたらモチベが上がったなぁ
自分は、サーバーサイドにlaravelとフロントにvuecliを使用しました。
これは後で話しますが、フロントでvuecliを使うともれなく死ねます。
技能五輪全国大会に参加する方法
※2
これは数年前のものですが、全国大会に出るまでのロードマップです。
自分は一般部門で参加をしたのですが、予選の内容はapiを叩いて取得した情報をリストに並べるものと、予め渡された画像をいい感じに編集をしてヒーローヘッダーに入れるという内容でした。（全ては覚えてないです。ただこの内容ができれば予選は通れます）
もちろんこの予選もネットは使うことができなく、予め用意されたツールやフレームワークしか使うことはできません。
ただ、注意書きでjqueryは非推奨と書かれていた気がしますが、他の人がjqueryを使って普通に通っているので使っても大丈夫かと思います（自己責任で）。
因みに自分は、jqueryは使わずにfetchを使ってapiを叩いていました。
若年者ものづくり大会ですが、こちらはtop3に入れないと全国大会に出られないため結構きついです。
内容としては、こちらに書かれていることをやります
対策
予選の結果が出たのが6月ぐらいでした。
なので、対策のできる期間は、6月〜11月14日（年によって違う）まで対策にあてることができまが、結局自分が対策を初めたのは11月11日からでした。 決して予選が簡単だったから手を抜いたわけではありません
もともと、laravelとvueは書いたことがあったのでそこまで対策をしなくていいかなと思っていました。
自分がデザインが下手っぴだと知っていましたが、実際に書いてみると想像以上に他の人に見せられないレベルの出来でした。。
はい、少なくとも1ヶ月前からは対策すべきですね。
それとは別に、Illustrator Photoshop Dreamweaverも使えるようにしておかないと詰んでしまいます。
因みに、今回は学校の方からadobeのアカウントとcakephpのサンプルコードはもらうことは出来ました。
学校の方で対策を期待してはいけません
事前課題と言うものがあり本番前から公開されているものがありますが、本番には半分以上変わると予め言われているので参考程度に見ておくと良いです（今年はほとんど変わりませんでした）
それと、今回からスピードテストというものが出てきました。
リンクを貼っておくので、事前に目を通しておくと良いと思います。ここから同じ問題が本番にも出ています
技能五輪本番
その前に日程を貼っておきます
11/14 前日入り
11/15 開会式
11/16 サーバーサイド
11/17 フロントエンド
11/18 閉会式
11/19 観光
14日
開会式が朝早くから行われるため前日の15時ぐらいにホテルにチェックインしていました
自分の場合はホテルについてからひたすら対策をしていました。
15日
開会式です。
たしかSKE48が来ていましたね。
この日は15時ぐらいで終わるので、ホテルで対策していました
この後に、自分の競技場に行きパソコンに事前に入っているツールが正しく使えるかの確認があるのですが、ここで本番用のサーバーにlaravel(もしくはcakephp)を上げて起動方法を確認しておくと良いと思います。
何かしらエラーを踏むので、次の日の競技中に踏んでしまう前に予め踏んでおきましょう。
自分はパーミッションエラーを踏みましたね。。。
16日
この日から競技が始まります。
前日にサーバーにコードを上げていた場合は当たり前ですが削除されています。
この日はサーバーサイドです。
まず、初めの一時間半でスピードテストをします。
その後にサーバーサイドが始まりますが解説するところも特になく、事前公開APIが作れればなんの問題もないと思います。
ただ、ローカルの開発用にvagrantが用意されていますが、個人的にこれは使う必要がないと思います。自分は使いませんでした
vagrantのマウントされているところが分かりづらすぎる
この日は16時には終わるので、その後はホテルで対策をしていました こいついつも対策してるな？
17日
この日はフロントと成果物のプレゼンです。
はい、自分がやらかした日です。 とても長い17日でした。
2時間×２+1時間の計5時間をデザインとフロントの開発に使えますが、想像以上に短いです。
初めの2時間でデザインを決めて、予めサーバーに上げておく必要があります。
予めデザインを決めておいて、何度か作ることをやっていないと時間的にきつそうだなと思いました。
提出はサーバーに公開用のフォルダーがあるので、そこに入れておけば良いのですが。。。
上でも書きましたが自分はフロントでvuecliを使っています。
以下競技終了間近の自分の脳内
俺： 10分前だからコードをサーバーにあげよ
俺： よし、サーバーに上げたから起動しよ
俺： あれ、本番にnodeが入ってないからvueが起動できない。。。
時間終了
はい、馬鹿ですね
サーバーへの上げ方は"あえて"説明しません 決して分からないからと言うわけではありません
書いてて思ったのが、単純にvueを使って初めからコンポーネントを書いていると、とても時間内に間に合いません（あくまで個人の感想です）
なので、他の人が「jqueryなんて時代遅れだ、俺はvueを使うぜっ！！」といった血迷ったことをしないように解説しません。
そもそも、今回の大会でvue使ってる人他に見ませんでしたね。（殆どがjqueryかと）
やってみて、最適解はDreamweaverでテンプレートを作ってそこにjqueryを付け足すのが一番正しいと思いました。
ここまでで結構やらかしていますが、問題は次です。
そのアップロードしたものを使って最後に紹介プレゼンをしないといけません。
去年もvueを使ってアップロードを失敗した先輩がいましたが、そのときは予めサーバーに上げておいたデザインの画像を使ってプレゼンをしたらしいですが、自分が上げたデザインの画像のファイル名をタイポしていたらしく表示できないとのことでした。。
はい、詰みました。
技能五輪でプレゼンを一切しなかったのは初めてかもしれないですね。 全くうれしくない
と言った感じで自分の技能五輪は終了しました。
18日
閉会式です。 以上
19日
観光です。
自分は競技中はホテルでずっと対策をしていたのでまともに観光ができる日が今日しかありませんでした。
熱田神宮と名古屋城を見に行きましたね。
技能五輪の感想
まず、競技中にスタッフに変な質問を結構していたと思うので、この場を借りてお詫びします。
今回は事前に対策を全くしていなかったのがそもそもの間違いでしたね。結構忙しかった
今年は愛知でしたので観光をしようと思っていましたが、対策を全然やっていなかったので観光している余裕が全くありませんでした。
観光したい場合はしっかりと対策をしていきましょう。
因みに来年(2020年)も愛知です。
上でも書きましたが、自分の中での最適解はDreamweaverでテンプレートを作ってそこにjqueryを付け足すのが一番正しいと思いました。
来年は、webをメインでやっているのか怪しいので参加するかは微妙ですね。アドテク楽しいですよ
アドベントカレンダーの感想
最後まで読んでくれてありがとうございました。
はい、久しぶりに長めの文を書きましたね。
去年もアドベントカレンダーに参加していましたが恥ずかしくて見れませんね。。。
消すか迷いましたが、記念に取っておくことにします。
これで一日目の記事を終了します。
ほんとはこのアドベントカレンダーはデザインを投稿していくものらしいですが、自分のデザインは恥ずかしくて他の人に見せられたものではないので、技能五輪のことを書いてごまかしました。
2日目からの内容はちゃんとデザインになると思います。
リンク集
以下のリンクはすべて2019年の大会のものです。
事前公開課題
事前公開API
スピードテスト
インフラリスト
若年者ものづくり大会
補足
※1
全く調べられないと言うわけではありません。競技時間中紙にメモを取ることができそれを休憩時間に持ち出すことができます。
なので、分からないところは紙に書いて持ち出して調べることができますが、紙を持ち込むことはできないので注意が必要です。
※2
画像のソースです https://tridentwebdesign.blog.fc2.com/blog-entry-435.html