新卒2週間で辞めた奴のUI/UXデザイナー備忘録

「UX/UIデザイン」と「web運営」、たまにプログラミングや意識高い系の記事を発信

プログラミングはJavaScriptがおすすめ!書き方がめっちゃ簡単にイメージできる!

色々あって新卒で入った会社を二週間で退職

(インターン2年間してたのに、、)

現在UXデザイナーとして海外渡航を目指してるりゅーやです。

 

webデザイナーに求められるスキルとして、

最近では以下のように幅広くなってきています。

  • HTML,CSSのコーディング能力
  • Photoshop,Illustlatorのグラフィックスキル
  • UXを創造するJavaScript
  • 顧客とのやりとりをするコミュにケーション能力

特に、JavaScriptに関しては

一昔では書けたら優秀くらいでしたが

今日ではJavaScriptで表現ができて当たり前

に変わってきています。

 

そこで今回は

JavaScriptについて簡単にご説明します。

 

f:id:ryuya_u:20181023005607p:plain

 

 

ブラウザ画面を自在に操作するプログラミング言語

ブラウザは

webページを表示させる機能を持っています。

(Chrome,Firefox,IEなど)

 

web制作において、

最初にHTMLやCSSといった、

ブラウザに読み込まれたら書いた通りに表示される

静的言語で枠組みを作成します。

 

しかし、この2つだけでは画像がスライドしたり、

マウスがボタンに触れたら色が変化する

などの動きをつけることができません。

 

そこで登場するのが

JavaScriptdrです!

 

動きをつけるって具体的に何?

簡単に、

HTMLとCSSで作成したサイトは

こんな感じです。

 

f:id:ryuya_u:20181023011525p:plain

 

すいません。

例えが悪すぎました。。

 

ただ、めちゃくちゃダサいですよね?笑

極端ですがこんなイメージです。

 

もちろん、HMTL5や画像を使用すればもう少し

立派なサイト制作ができますが、

 

UI/UXの観点で考えると物足りなさを感じます。

 

それでは具体的に、動きをつけるとどんなサイトに

なるのか?

 

以下のサイトから体験してみてください。

www.mountaindew.com

 

めちゃくちゃかっこいいし、

何よりスクロールしていて楽しくありませんでしたか?

 

上記のようなホームページの表現は全て

JavaScriptで製造されています!

 

JavaScriptのプログラミング

JavaScriptの記述の流れとしては

以下のような流れになっています。

 

何に対して → どのようなことを → いつ行うか

 

こう見るとすごい単純そうじゃないですか?

上記の意味を少しカッコつけて書くと

 

セレクタ → メソッド → イベント

になります。

 

アマゾンでのお買い物を思い出してみてください!

f:id:ryuya_u:20181023082408p:plain

 

 実はこれもJavaScriptで作ることができるんです!

上記の流れに沿って、

プログラミング処理を説明すると

 

セレクタ:品物の単価に対して

メソッド:カートに入っている単価を計算して習得

イベント:HTMLで数字を出力

 

になります。

 

思ったよりも複雑!ではありませんよねw

 

まとめ

プログラミングに挑戦したいけど

思わず身構えてしまう。

僕もそんな一人でしたw

 

しかし、もしプログラミングができたら!

大げさかもしれませんが見える世界が変わりますw

 

UX/UIデザイナーにもJavaScriptのスキルは求められており

プログラミングの入りとしてもJavaに比べ

動きがわかりやすく、以上のように学習しやすいです。

 

この機会に学んでみませんか?

 

【スポンサーリンク】