JavaScript

独学で身につく！入門向けのJavaScript学習サイト20選

JavaScript初心者向けに独学でも学習できるサイトをまとめています。どのサイトも入門向けで無料で始められるので、気軽に始めたい人に最適でしょう。JavaScriptを身につけてWebサイトの表現の幅を広げましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

JavaScriptをこれから学習したいという人におすすめのサイトをまとめて紹介しています。

独学で学習できますし、無料で進められるので手軽に始められるでしょう。HTMLとCSSを学習してみて次のステップに進みたいという方やJavaScriptを身につけてWebサイトの表現方法を増やしたいという方にはおすすめです。

各サイト動画やテキストなど学習タイプも載せているので、ぜひ自分に合ったサイトを見つけてみてください。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

1. Udemy

学習タイプ：動画

JavaScriptを初めて学ぶ人、ちょっと触ったことがある人など様々なターゲットに合わせて動画があります。

本格的に学べる講座は、有料になっていますが、かなり実践的に学べるので、深い知識を身につけたい人にもおすすめです。

Udemy

2. ドットインストール

学習タイプ：動画

プログラミングを学ぶならもはやスタンダードなドットインストールです。

動画で分かりやすく解説してくれており文字を読むのが苦手！！というひとでも入りやすいのが特徴です。とりあえずここから始めれば間違いないでしょう！

ドットインストール

[PR] コーディングで副業する方法とは

3. とほほのWWW入門

nm_03_03

学習タイプ：テキスト

いきなりコードのサンプルを用いて学習していくので全くの初心者向きではないのかもしれませんが、それでもサンプルを実際に動かしながら楽しんで学習できる点は素晴らしいです。

とほほのWWW入門

4. WEB+DB PRESS plus

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-18-19-38-08

学習タイプ：テキスト

ノンプログラマのためのJavaScriptはじめの一歩。

プログラミング自体が初めての人から対象にしてくれているのでいきなりJavaScriptという一番重要な言語が学べてこのサイトに出会った人はラッキーです。

その他プログラミング言語を学んでいくにあたって大切なことも語られているのでしっかり肝に銘じて学習しましょう。

WEB+DB PRESS plus

5. codecademy

nm_03_05

学習タイプ：ハンズオン(実際にソースコードを書きながら)

海外の有名サイトCodecademyのJavaScript版になります。

言語は英語になってしまいますが、登録なしでレッスンが受けれるのでまずどんな感じか見てみて進めてみるのもいいかもしれません。サイトのデザインもかっこいいです。

codecademy

6. JEEK

nm_03_06

学習タイプ：ハンズオン

理系生のインターンシップ・エンジニアのインターンシップ・アプリ開発のインターンシップをうたっているこのアプリですがもちろんプログラミング初心者のために作られたものなので分かりやすく作られています。

ブラウザ上でタイピングしてそのまま動くようになるのでわずらわしい環境設定無用！おすすめです。

JEEK

7. Progate

nm_03_07

学習タイプ：ハンズオン

こちらもリッチデザインなプログラミング学習サイトでもちろん無料です。3時間ほどでJavaScriptの基礎、そして重要な部分ががっちり学べるでしょう。

Progate

8. CODEPREP

学習タイプ：ハンズオン

9つのチャプターからなっていてゲームみたいに経験値をためながら学習を進めていくことができるので飽き性のあなたにもぴったりでしょう。

基礎的な内容を実際に書きながら習得することができるはずです。

CODEPREP

9. UX MILK

nm_03_09

学習タイプ：テキスト

こちらUX MILKでもJavaScript入門編があります。サイトデザインが綺麗でしっかりと見やすいので目移りせず集中して学習が進められそうですね。

UX MILK

10. マンガで分かるJavaScriptプログラミング講座

nm_03_10

学習タイプ：マンガ

その名の通り漫画でJavaScriptを説明してくれています。

なんでも絵にするとわかりやすいですよね。さらに漫画なのでスイスイ読めてしまいます。漫画が好きな人はぜひここを訪れてみてください。

マンガで分かるJavaScriptプログラミング講座

paiza

学習タイプ：ハンズオン
料金：無料(600円～/月の有料コースあり)

動画と練習問題で学習する「paizaラーニング」でJavaScriptを勉強することができます。一部有料ですが、期間によって無料で公開されている場合もあります。

paiza

Schoo

学習タイプ：動画
料金：無料(980円～/月の有料コースあり)

動画と生放送で学習するサイトです。JavaScriptに関する動画は無料も有料も多く存在し、ライブラリのひとつjQueryについても解説されています。

Schoo

初心者のためのJavaScript入門

学習タイプ：テキスト
料金：無料

変数やif文、繰り返しといった基本の構文について分かりやすくまとめられています。初めてJavaScriptに触れる場合におすすめです。

初心者のためのJavaScript入門

code.9leap

学習タイプ：ハンズオン
料金：無料

JavaScriptのフレームワークenchant.jsを使用して、実際に自分で作品を作りながら学ぶことができます。解説入りのサンプルコードから課題に沿って内容を編集し、ブラウザ上でその動作を確認することが可能です。

code.9leap

jsdo.it

学習タイプ：ハンズオン
料金：無料

ブラウザ上でJavaScriptを書いてその場で動作確認、共有ができるサイトです。他の人が公開したものについてもコードを見たり、実際に動かしてコメントで質問したりすることができます。

jsdo.it

CodeCombat

学習タイプ：ハンズオン
料金：無料(99$のプレミアム版あり)

ゲーム形式で楽しみながらコードに気軽に触れることができるサービスです。使用言語にJavaScriptが選択可能です。遊んでいるような感覚で学べるので、子供の教育に良いかもしれませんね。

CodeCombat

JavaScript リファレンス

学習タイプ：テキスト
料金：無料

JavaScript全般に関するリファレンスサイトになります。基本的な書き方を覚えてから、関数などを参照したいときに便利です。

JavaScript リファレンス

MOONBlock

学習タイプ：ハンズオン
料金：無料

ビジュアルプログラミング形式で、ブロックを使ってプログラミングを行います。もし○○なら□□を行うというように、全体の構成を考えて組み立てる練習をすることができます。

MOONBlock

Web Programming Primer

学習タイプ：テキスト
料金：無料

「JavaScript入門編」ではJavaScriptで何ができるかという知識から始まり、常に使うことになる基本の構文について一通り解説されています。最初から学びたい方におすすめです。

Web Programming Primer

W3Schools

学習タイプ：テキスト
料金：無料

Webサイト作成に使用される各言語のリファレンスサイトになります。英語サイトです。

JavaScriptに関してもサンプルコードとその実行結果をブラウザですぐに確認することができます。サンプルコードは内容を変更することもでき、それに応じた結果が表示されます。jQueryのリファレンスも存在します。

W3Schools

以上、JavaScriptの入門向け学習サイトをまとめて紹介しました。

これから始める人には最適なサイトばかりで、かつ無料なので気軽に始めてみましょう。

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

JavaScriptでCSSを操作して変更する方法を現役エンジニアが解説【初心者向け】

JavaScriptで配列内の値を加算する方法について、TechAcademyの現役エンジニアが実際のコードを使って初心者向けに解説します。 ...

JavaScript

JavaScriptでLocationオブジェクトのhash値を削除する方法を現役エンジニアが解説【初心者向け

JavaScriptでLocationオブジェクトのhash値を削除する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初...

JavaScript

JavaScriptで配列を分割する方法を現役エンジニアが解説【初心者向け】

JavaScriptで配列を分割する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そ...

JavaScript

JavaScriptのテキストボックスから値を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptのテキストボックスから値を取得する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 ...

JavaScript

JavaScriptでHTMLの文字列をアンエスケープ(デコード)する方法を現役エンジニアが解説【初心者向け】

JavaScriptでHTMLの文字列をアンエスケープ(デコード)する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初...

JavaScript

JavaScriptのtoStringメソッドの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのtoStringメソッドの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。...

JavaScript

あわせてよく読まれている記事

独学でゲームが作れる！入門に最適なUnityの学習サイト20選

現在ゲームを作るためのゲームエンジンはたくさんの種類があります。その中でも世界で一番使われているのがUnityです。ただUnityの勉強を始めたいと思っても何から始めれば良いのかわからない方もいらっしゃるかと思います。今回はそんな方のために、Unityの勉強を始める際にオススメの入門サイトを紹介していきたいと思います。なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。 Udemy 学習タイプ：動画初心者から上級者まで様々なレベルの人が使えるUnity学習サービスです。もちろんUnity以外にもありますが、実践的に学習が行えるので、本格的なゲームを作りながらUnityの知識を身につけることが可能です。スマホでもPCからでも自分のペースで学習することができるはずです。 Udemyの特徴としては、最新技術をいち早く有料コースとして学習することが可能です。 Udemyのコースは、Udemyが提供しているコースだけでなく、Udemyという学習教材をオンラインで公開するサービスに、専門家が各自で作成した教材を公開しています。そのため、ある技術に関する講座として様々な角度から様々な価格と言語で学習をすることができます。また、その多くが動画テキストを採用しているため、文字を読むのが苦痛な受講生にも人気です。スマホからも学習可能ということで、いつどこでも自分の好きなときにアカウントにログインして、簡単にコースにアクセスできます。この機能のおかげで学習の機会が無限に開かれています。そして、一度コースを購入すれば、アカウントが有効で、かつUdemyがコースのライセンスを所有し続ける限り、いつまでもコースへのアクセスが可能です。 Udemy ドットインストール(Unity入門) 学習タイプ：動画プログラミング初学者の味方「ドットインストール」です。 Unityのバージョンが少し古い物になっていますが、基礎操作や基礎知識を覚えるのには最適なサイトであると言えます。ここからUnity学習の第一歩を踏み出しましょう。 2017年現在はUnity4.2のみサポートしています。また、このレッスンはサポート終了しています。ドットインストール(Unity入門) また、ドットインストールの体験記事もございます。プログラミング学習の超定番！「ドットインストール」をやってみた [PR] コーディングで副業する方法とは OpenBook(Unity入門) 学習タイプ：テキスト OpenBookは誰でもオンライン上で本を作成できるサービスです。そのサービス上で公開されているUnity入門です。基礎的な物理演算や摩擦、アプリの書き出しなど様々な技術を覚えることができます。東京大学出身の著者を中心とした教材ですので、東京大学というキーワードに興味がある方には、心くすぐられる教材です。 OpenBook(Unity入門) はじめてのUnity 学習タイプ：テキストはじめてのUnityとなっていますが、前述の二つのサイトと比べるとレベルは少し高めとなっています。特に2Dシューティングのチュートリアルは骨のある内容となっており、これを完了すればUnityの基礎は理解したと言っても過言ではないでしょう。 Unity公式ページで解説されているテキストですので、公式ページとして安心して受講することが可能です。はじめてのUnity Unity3Dゲームの作り方講座学習タイプ：テキスト今までのサイトとは少し違い、パーティクルシステムや時間管理などについて解説してあります。少し踏み込んだ内容となるので、基礎を理解している方におすすめのサイトです。初級講座の部分を割りと省いているので、中級者以上のユーザーにとっては、無駄な部分を飛ばす事が可能な点がメリットです。 Unity3Dゲームの作り方講座【入門編】世界よ、これが本当の Unity 講座だ（１）学習タイプ：テキストこちらはあのMobage(モバゲー)の技術者ブログです。Unityでゲームを作成していくというより、Unityやその他のゲームエンジンに関する知識や、Unity内のプログラムなどより深い部分について解説しています。少し難しい内容と成っていますが一度目を通しておくと、今後のゲーム制作に役立つことは間違いないです。【入門編】世界よ、これが本当の Unity 講座だ（１） Unity公式(Unity入門) 学習タイプ：テキスト Unityの公式の入門ですが入門としては少し難しめの文章となっています。今までにあげたサイトを勉強した後にまとめとしてみる事をおすすめします。ただ一つ一つの知識について詳しく解説してあるので、今までもやっとしていた知識や概念を理解するのに役に立つでしょう。 Unity入門となっていますが、対象は中級者まで対応していると言っても過言ではありません。また、日々進歩する技術に対してもUnity公式として内容を更新している点が安心です。 Unity公式(Unity入門) おもちゃラボ(Unity入門) 学習タイプ：動画/テキストポップなシューティングゲームを作成する事ができるサイトです。可愛いクオリティの高いゲームを作る事ができます。 UI(ユーザーインターフェイス)がしっかりとしたゲームを作る事ができるので、ゲームの魅せ方なども学ぶ事ができます。可愛い名前ですが、現在の最新の内容は既に入門の域を超えています。そのため、最初から順番に学習することでかなりのレベル迄学習可能です。チュートリアルもあるため安心です。おもちゃラボ(Unity入門) テラシュールブログ学習タイプ；テキスト Unityのより深い知識について解説しているブログです。今後ゲーム制作を作成していくにあたって間違いなくお世話になるブログです。 Unityに役立つ情報がたくさんあるので、定期的にチェックすることをおすすめします。現在も頻繁に更新されており、記事数が非常に多い点が上級者にも必要な情報を提供しているといえます。テラシュールブログ Unity公式(チュートリアル) 学習タイプ：動画英語版になっていますが、とてもおすすめのサイトです。 Unity公式とだけあって、クオリティがとても高いものになっています。またAudio(オーディオ)やPhysics(フィジックス)などカテゴリ分けされたチュートリアルもあり、自分のわからないところをピンポイントで学ぶことができます。 Unity社員が講演をする場合も、こちらのチュートリアルを使用して現地で一緒に学習するという素晴らしいチュートリアルです。 Unity公式(チュートリアル) 3D Platformer Tutorial 学習タイプ：テキスト(PDF) チュートリアルとしては珍しく超ハイクオリティの3Dゲームを作ることができます。現場でも通用するようなテクニックが満載でエンジニアリング以外の知識もたくさん載っています。ただし、 Unity 2.0 の内容である点を注意する必要があります。 3D Platformer Tutorial Libro〜ビギナーのためのUnity超入門〜学習タイプ：テキスト知ってる人は知っているご存知掌田津耶乃氏のサイトのunityの解説です。毎回同氏の解説は初心者には分かりやすく、とてもありがたいです。全7回に分けて説明していただいています。 Unity4.6の内容になる点を注意する必要があります。 Libro atmarkIT 学習タイプ：テキスト 3ページにわたってUnityがなんであるかを解説してくれています。概要をつかむのには持ってこいのサイトでしょう。 Unityの学習というより、Unityが如何に素晴らしいかを他の人に説明する時に使用すると良いでしょう。 atmarkIT ThinkIT 学習タイプ：テキスト Unityを使っていきなり初心者がいきなりゲームを作ってみるという大胆な企画です。楽しみながら飽きずに学習することができます。いきなりはハードル高めですが、虎穴に入らずば虎子を得ず。挑戦してみましょう。実際にこれをみながら制作するより、見ることで制作していく実感を得ることができるという点が良いです。ゲーム実況をみて、ゲームをした気分になる感じと似ています。結果的にUnity開発へのスタートハードルを下げることができます。 ThinkIT SONICMOOV LAV 学習タイプ：テキストこちらは最短コース系なんと一時間でUnityを使ってゲームを作ろうとする大胆なものです。ただ1時間で自分のゲームができると思うとワクワクしませんか？そのワクワクが学習へのエネルギーとなるのです！ SONICMOOV LAV Developers.IO 学習タイプ：テキストこちらは環境のインストールから親切に教えてくれます。まずどうにも動かない、という方はこちらから始められることをおすすめします。 Developers.IO UINYAN.COM〜素人が7日間クソゲーを作り続けてわかったこと〜学習タイプ：テキストこちらはゲームムログラミングをしたことがない筆者がUnityを使って7日間でゲームを作ってみたときの記録です。それゆえの苦労や発見がみてとれると思うので是非学習に具体的にとりかかる前にチェックしてみるのもいいかもしれません。 UINYAN.COM MUO 学習タイプ：テキスト英語サイトですがUnityに関する基本がしっかりと体系立てて解説されています。英語が読める方にはとてもいいサイトだと思います。 MUO Unity STUDENT 学習タイプ：テキストこちらも英語サイトです。Unityに関する記事がひとつひとつキャッチアップ画面つきのリストになっていてやりたいことが視覚的に探せるので便利です。 Unity STUDENT PLURALSIGHT 学習タイプ：動画言語は英語ですが、動画でUnityを学べます。しかも無料で見ることができます。 PLURALSIGHT SlideShare〜Unityを使ったゲームデザイン超入門〜学習タイプ：スライド東工大の学生のために作ったスライドですが我々全くの初心者にも最適です。まるで授業を受けているみたいでいいですね。 SlideShare 以上、Unityを独学から始められる学習サイトを紹介しました。 2Dや3Dゲームなど自分の作りたいものに合わせて学習サイトを選んでみると良いでしょう。自分がやりたいゲームを自分で作れるようになればより一層楽しく感じるはずです。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。 [お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。

Unity

【入門向け！】独学に最適なHTMLを学べる学習サイト20選

Web開発やデザインをやってみたいけれど、何から手をつければ良いか分からないという方もいらっしゃるかもしれませんね。 Web関連の学習に当たってまず必要な知識はHTML（HyperText Markup Language）です。ここでは、HTML学習に役立つサイトをご紹介したいと思います。そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。 Udemy 学習タイプ：動画 HTMLの基礎やHTML5を使ったゲーム作成など、初めてHTMLを学ぶ方におすすめの動画が多くあります。何か作りながらHTMLやCSSを学ぶことができるので、実践的に楽しく身につけられるはずです。 Udemy ドットインストール学習タイプ：動画 3分動画で学べる初心者向けのプログラミング学習サイトです。HTMLだけでなく、CSS、JavaScriptも学べるので便利です。実際にウェブサイトを作る講座もあるので発展的に学習することができます。初めてHTMLに触れるという方におすすめです。ドットインストール [PR] コーディングで副業する方法とはSchoo 学習タイプ：動画 IT系の講座がメインのサービスで、WEB業界のプロがデザインやWEB開発について教えてくれます。現場の知識も教えてくれるので実践でも役立ちます。授業中に質問できるという点がポイントです。 Schoo ShareWIS 学習タイプ：動画 HTMLを短い動画で学ぶことができるので、隙間時間を利用した学習が可能です。動画の最後にはミニクイズがあるので1つ1つの動画をしっかり理解してから先に進むことができます。 ShareWIS プログラミング入門サイトbituse 学習タイプ：テキスト HTMLが初めて、プログラミングも初めてという方におすすめの入門サイトです。易しい言葉で書かれているので全くの初心者の方でも挫折することなく学習できます。ブログラミング入門サイトbituse Progate 学習タイプ：ハンズオン(実際にコードを書きながら) プログラムを基礎から学ぶことのできるサイトです。HTMLについては、学習コース→道場コースの順に段階的に学習します。最後はプロジェクトコースで実践を身に着けられる本格的なサービスです。 Progate CODEPREP 学習タイプ：ハンズオンアプリ開発を通してプログラミングを学びます。HTMLの学習では、穴埋めをしながら実際のコードに触れて動きを確認できます。HTMLの知識が少しあって、手を動かしながら学習したいという方におすすめです。 CODEPREP CodeAcademy 学習タイプ：ハンズオンアメリカの教育系の企業が運営するサービスです。CODEPREPでは穴埋め形式で学習するのに対し、CodeAcademyでは1からコーディングしていきます。難しそうな気もしますが、解説がしっかりしているので無理なく学習を進められます。 CodeAcademy SkillHub 学習タイプ：動画転職やフリーランスの方の為のオンラインスクールで、初心者でも学ぶことができます。HTMLの講座は1動画15分程度で構成されていて、基本からじっくりと学びたい方におすすめです。 SkillHub Web Design Recipe 学習タイプ：テキスト Webデザイナーの方の個人ブログですが、コンテンツが充実していて分かりやすいです。また、Webサイト作成時に必要な知識やHTMLコーディングの際に役立つツールなども紹介されており、実践に即した知識を得られます。 Web Design Recipes code9.leap 学習タイプ：ハンズオンゲームプログラミングの学習サイトですが、HTMLも学ぶことができます。コードと実行結果を比較しながら学習できるので便利です。ある程度HTMLの知識があると学習がスムーズに進みます。 code.9leap やさしいホームページ入門学習タイプ：テキスト HTMLに何も知識がないときに一度読んでみるとおすすめです。本当に基礎の基礎から教えてくれます。一つ一つのチャプターが短いのも読みやすくて嬉しい。「タグ」ってなんだろう？という人に親切丁寧に解説してくれています。やさしいホームページ入門一時間で作るホームページ学習タイプ：テキストその名の通り一時間でホームページを作ることを目標にしています。たとえHTMLのみ学んだとしてもそれでホームページができるわけではないのです。それも踏まえて1時間で習得できるというのだから驚きですね！一時間で作るホームページ HTML Dog 学習タイプ：テキスト英語のサイトですが、もし英語が得意！という方ならおすすめです。もちろん無料で学べる上に、サンプルコードも豊富。何よりシンプルなデザインでストレスなく勉強できるのが嬉しいです。もしかしたら英語の勉強になって一石二鳥かもしれませんね。 HTML Dog HTMLとCSSの基本をサルでもわかるようにまとめた【入門・初心者向け】学習タイプ：テキストサルでもわかるとうたうこのブログ。なんと驚くべきことにこの一ページにHTML, CSSの基本が書かれているのです！そしてわかりやすいように目次まであってすぐにそこに飛んで行けるのです。言うまでもなくサルでもわかるほど分かりやすいです！ HTMLとCSSの基本をサルでもわかるようにまとめた【入門・初心者向け】とほほのWWW入門学習タイプ：テキストこちらはどちらかというと一通り学んだ後にリファレンスとして使うのがおすすめです。豊富なHTMLの仕様例が検索できて、そのままコピペで使うことだってできちゃいます！困ったときにこれさえあれば怖いものなしでしょう。とほほのWWW入門 Tipszone 学習タイプ：テキスト 2時間でHTMLを理解できるようにと書いてありますが、文量はそれ以下です。本当に必要最低限のことが書いてありますが、だから返って簡単で読みやすい！これを読んでから他のものに移るというのも一つの手です。 Tipszone w3school 学習タイプ：ハンズオンこちらも英語サイトですが左にあるサイドバーから必要な情報だけ抜き取れて非常にみやすく使いやすいです。こういうサイト自体が一つのWebアプリケーションになっているものはとても好印象です。 w3school Weblog endoutakae 学習タイプ：テキストこの可愛らしくてガールズな感じのおしゃれなデザインがいいですね！下にスクロールするとネコちゃんが！かわいい！じゃなくてHTMLの勉強のサイトです。このサイトなら楽しく勉強できそうですね。 Weblog endoutakae The Web KANZAKI 学習タイプ：テキスト上にもいろいろ短時間習得コースはありましたがこちらはさらに最短30分コースと驚くべき短さです。それだけに要点をしっかりと説明してくれるので、大変おすすめです。 The Web KANZAKI 超絶初心者のためのフロント入門（HTML、CSS、JavaScript）学習タイプ：テキストここは実際にコードに入る前にまず用語から親切丁寧に解説してくれています。フロントエンド？サーバー？なにそれ？という人はここから進めていくことをお勧めします！超絶初心者のためのフロント入門（HTML、CSS、JavaScript）以上、入門向けのHTML学習サイトをまとめました。最近では、テキストや動画だけでなく実際にコーディングしながら学習できるサイトも増えているので、いろいろと試してみると良いでしょう。ぜひ自分のライフスタイルに合った学習サイトを見つけてみましょう。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。 TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

HTML

【初心者向け！】Gitを入門から学べる学習サイト10選

初心者向けにGitを入門から始められる学習サイトを集めてみました。 Git(ギット)はとても便利なバージョン管理システムです。実際の現場でも必ずと言っていいほど使用するので、覚えておいて損はないでしょう。どのサイトも動画やイラストなど特徴が違うので、自分の理解しやすいタイプのサイトを見つけてみてください。なお本記事はTechAcademyのオンライン完結のGitHub講座のカリキュラムをもとに執筆しています。ドットインストール学習タイプ：動画プログラミングを学ぶならここドットインストールでしょう。もちろんgitも対応しています。全22回に分けて動画で説明してくれているので分かりやすくておすすめです。ドットインストールサルでもわかるGit入門学習タイプ：テキスト/イラストこのサイトのGit入門は本当にわかりやすいと思います。入門編から入ってスムーズに発展編などもうちょっと上級なことにストレスなく移れるのでおすすめです。サルの可愛いイラストもほっこりしていいですね。サルでもわかるGit入門 [PR] コーディングで副業する方法とはLIG 学習タイプ：テキスト本当の初心者向けです。Git入門のための概念から基本用語までこちらの記事では一ページのコラムでGitについて全く初めからかなり細かい使い方まで説明してくれています。 LIG GitHub 学習タイプ：テキスト本家Gitの解説サイトです。正確に間違いない情報、最新の情報が載っているので、たとえ他でうまくいかなかったとしてもここにもどってこれば問題は解決するでしょう。もちろん全く初めての人にも書いているので安心して読み始めてください！ Github Githubの使い方も初心者向けに詳しく解説しているので、合わせてご覧ください。 Asial 学習タイプ：テキスト/イラストイラストでわかる！git入門の入門。イラストでgitについて説明してくれています。なんでも視覚的に勉強すると身に付きやすいですよね。 Asial Developers.IO 学習タイプ：テキスト全18チャプターに渡って事細かにGitについて説明してくれています。ぱっと初心者向けには見えませんが、下にスクロールして一から順に行っていくといつの間にか高みにいるかもしれません。 Developers.IO PAYFORWARD〜Git初学習者のための効率的な学習方法を考えてみた〜学習タイプ：テキストこちらは直接プログラミングではありませんが、どうやったらGitを効率的に学習できるか考察したものです。Gitを始める前に一読しておくのもいいかもしれません。 PAYFORWARD Learn Git Branching 学習タイプ：ハンズオン(実際にコマンドを打ちながら学習) ややこしいGitブランチの概念を図を用いてクイズ形式で学べるものです。非常にわかりやすいですね！ Learn Git Branching SDNMagazine〜Gitを使いこなすための20のコマンド〜学習タイプ：テキストこちらはGitを使うためによく使うおもなコマンド20個説明してくれています。とりあえずややこしい概念よりもコマンドを！という人にとって一番の近道かもしれません。 SDNMagazine SourceTree 学習タイプ：ハンズオンこちらは英語サイトで、しかも初心者のためのGit解説サイトではないのですが、Gitのコマンドなど覚えなくてもサクサク使えるアプリなのです。視覚的に分かりやすく使えるデザインも優れたユーザーインターフェイスなのでまずはここから始めるのはあながち間違いではないかもしれません。 SourceTree 以上、Gitの入門向け学習サイトをまとめて紹介しました。見たことあるサイトもあれば、初めて見るサイトもあるでしょう。それぞれ特色があり学習タイプもバラバラなので、ぜひ自分のスタイルに合った学習をしていきましょう。無料でできるので、誰でも気軽に進められるはずです。 [お知らせ]TechAcademyでは自宅で学べるオンライン完結のGitHub講座を開催しています。わからないことをチャットで質問すると、現役エンジニアのメンターが毎日すぐに回答します。

Git

【学習タイプ別】入門向け！Pythonの学習サイト10選

今回は入門向けのPython学習サイトを10サイト紹介したいと思います。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。 Udemy 学習タイプ：動画無料と有料のコースが存在するオンライン学習サイトです。 Pythonに関するコースも多数あります。有料コースは9600円程度からありますが、度々セールを行っています。初回は特に安いので、初回登録時にまとめて購入するのがおすすめです。 Udemy ドットインストール学習タイプ：動画ドットインストールではPython3を31回に分けて学習することができます。有料会員は月額980円です。説明に使用しているPythonはPython 3.5.2です。無料公開されている部分は2017年現在、次の5回講座分です #01 Pythonを使ってみよう概要公式サイト必要となる知識レッスンにおける環境 #02 はじめてのPythonプログラム myapp.pyの作成実行方法コメントの書き方 #03 変数を使ってみよう変数の使い方定数の概念 #04 さまざまなデータを扱ってみよう文字列数値論理値 #05 データの演算をしてみようデータの演算ドットインストール [PR] コーディングで副業する方法とはCheck.io 学習タイプ：ハンズオン check.ioはPythonのコードを勉強しながらゲームをクリアしていくというコンセプトの学習サイトで、基本無料で学習できます。 facebookやGoogleアカウントでログイン登録が可能です。最初は英語中心の画面表記ですが、日本語での説明テキストがあります。無料公開されている内容も多く、モチベーションを保ちながらゲームをクリアしていく感覚で学習が可能です。また、随時有料コースが追加されているため、学習し続けることが可能です。有料コースも数百円（支払いはドル）から追加が可能です。 checkiO paiza.io 学習タイプ：ハンズオン paizaは、オンラインですぐに無料でプログラミングが始められる、オンライン実行環境です。現在は、Java、C、C++、C#、Ruby、PHP、Python、Perl、JavaScriptと言ったメジャーな言語からGo言語やScala、Haskellなど24言語以上の実行環境として利用することが可能です。学習初心者にとって、実行環境を整えることが大きなハードルですので、paiza.ioのような実行環境サービスを利用することで、初心者の学習が簡単になります。また、他の人が書いたコードも公開されているので、プログラミングを学習する上での基本的なコードから実践的なコードまで、参考にすることができます。 paiza コード・ガールこれくしょん学習タイプ：ハンズオン paiza.ioと同じ母体で運営されているゲーミフィケーションを取り入れた無料のPython学習サービスです。現在の対応言語は、PHP,Ruby,Java,Python,C,C#,C++,JavaScriptが対応しています。可愛い女の子キャラクターと一緒に徐々にコーディング力をつけていくサービスです。コード・ガールこれくしょん paizaラーニング学習タイプ：動画これまで紹介したpaiza.ioやコード・ガールこれくしょんと同じ運営母体でサービス提供しています。 1ヶ月600円から有料コースを追加できますが、無料で体験できる部分もあります。 paizaラーニングでは、プログラミング初心者はもとより、中級者向け学習コンテンツを提供しています。 1チャプター3分動画という短い単位で学習が可能です。また、有料課金後に、不明点をエンジニアに質問が出来ます。無料公開されているのは次の2コースです。第一回 Python入門編1:プログラミングを学ぶ (全9回) Pythonでプログラミングの初歩を学びます。第一回では変数と計算について学びます。「サイコロ」Webアプリを作れるようになる事を目指します。第二回 Python入門編2:条件分岐、比較演算子を学ぶ (全6回) 完全無料 Pythonでプログラミングの初歩を学びます。「平成年度の計算」や「おみくじ」など、簡単なWebアプリケーションを作れるようになる事を目指します。 paizaラーニング CodeCombat 学習タイプ：ハンズオン（ゲーム）子供でも楽しめるクオリティでゲームをクリアしながら無料でPythonプログラミング学習が可能なサービスです。現在は日本語表記になり、非常にわかりやすく学習が可能です。 Pythonの他にHTML、css、JavaScript、jQuery、Bootstrapの学習が可能です。 CodeCombat CodinGame 学習タイプ：ハンズオン（ゲーム）ゲーミフィケーションを元に無料でC、C#、Java、JavaScript、Python3、Bash、Clojure、Dart、F#、Go、Groovy、Haskell、Kotlin、Lua、ObjectiveC、OCaml、Perl、PHP、Python、Ruby、Rust、Scala、Swift、VB.NETなどの24種類以上の言語に対応したプログラミング学習サービスです。（ここで、Python3とPythonの2種類の記載があるのは、PythonがPython2以前のものと、Python3以降のものとでは文法が大きく異なるためです）この学習サービスだけで、就職できるレベルに到達できる程のクオリティです。それならば、このサービスだけ学習すれば良いということなりますが、表記が英語のみです。 CodeinGame Python3公式ドキュメント学習タイプ：テキスト公式ドキュメントサイトで、すべて無料で閲覧できます。常に最新のPython情報を学習することができます。おすすめはチュートリアルです。 Python3 PythonJapan 学習タイプ：テキスト日本のPythonコミュニティのページなので、完全無料です。以前このURLは日本Pythonユーザー会(PyJUG)のページでしたが、いろいろあって、現在は日本のPythonコミュニティの紹介から、最新情報の紹介を行っています。入門向けのサイトとしてこのサイトをおすすめしたいのは、Pythonの日本ユーザー用Slackで質問したり、各種勉強会情報を元に勉強会に参加することで初心者でも効率的に学習する方法を知ることができるからです。 PythonJapan 以上、入門向けPythonの学習サイトを紹介しました。動画やテキスト、ゲーム感覚で学べるなど様々な特徴を持ったサービスがすでにあるので、自分に合った学習方法で始めてみてはいかがでしょうか。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がUnityでオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がノーコードでSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。 TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

Python

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。プロトタイピングの概念そのものは、インターネットの成立以前から存在していました。典型的な例として、新しい製品を開発をする人々は最初に製品を組み立て、次に製品が期待した通りに作動するか試します。最初のバージョンで特許を取得して、潜在的な投資家に製品を見せることもあるかもしれません。もし投資家が独自の生産ラインの設備を利用できるとしたら(例えば既存の会社で働いているなどの理由から)、製造可能なレベルのモデルが完成するまで、製品の開発が進められて、バグの修正も行われます。昔のデモディスクを覚えていますか？機能の制限されたプログラムが入っていたり、ゲームの初歩レベルあるいはゲームが2つだけ入っているようなディスクのことです。プロトタイプはデモディスクと似ている点が多くありますが、よりシンプルでさえあります。 Webサイトやアプリのプロトタイプを作成するのは、期待した通りに作動するか確かめるためです。プロトタイプの目的は、将来の顧客の獲得というよりも、より良い製品を作るのに役立てることです。 Webサイトやアプリのプロトタイプは、製品が期待通りに作動するか確かめるために作成します。またクライアントや潜在的な投資家に製品の作動を示すこともできます。最近では、Webとモバイルアプリ用のプロトタイプ作成アプリが多数登場しています。最近リリースされたデザインツールのAdobe Experience Designerは、Webとモバイルに対応したデザインアプリとしての機能と、プロトタイプ作成用のアプリとしての機能が融合されています。 Adobe社の知名度とプロ向け製品における市場シェアを考えれば、多くの人々が今まで以上にプロトタイプを実践し始めているのも当然かもしれません。今回の記事は初心者向けのガイドです。デザイン業界でどのような経験を積んできたかにかかわらず(あるいは未経験でも)、プロトタイプを日常的に使い始めた方向けに書いています。このガイドでは何よりもまず基本的な原則を説明します。もちろんその後に発展的な情報として、役立つツールやアプリをリンクとともにご案内します。ワイヤーフレーム＆モックアップ VS. プロトタイプデザイナーとしての経験が豊富な方は、すでにワイヤーフレームやモックアップを編集で利用しているかもしれません。ただ、これらは必ずしもプロトタイプとはいえません。ワイヤーフレームやモックアップで問題なのは静的なことです。製品の機能についての多くの情報を伝えることができないのです。このため、製品の動作性についてクライアントやデベロッパーに誤解を与えるおそれもあります。こうした理由から、プロトタイプとは一般的に、何かインタラクティブな要素を持つものと定義できます。ただし、例外的に静的なものにもプロトタイプと見なせるものもあります。例えば、概念的なプロトタイプや、詳細に作成された設計書などです。重要なのは単にインタラクティブであることよりも、製品に期待される機能について情報を伝えられることだからです。それでもやはり、ワイヤーフレームやモックアップは単にプロトタイプの作成によく使われているという理由だけで、誰も捨てようとはしません。いつプロトタイプが必要になるのか？何かがどのように作動するかを示す必要があるときにはいつでも、プロトタイプが必要です。わかりやすい例は、Webアプリやモバイルアプリです。アプリは、モックアップでは簡単に見たり予測したりできない機能を数多く持っている傾向があります。コンテンツ中心型の静的なWebサイトでさえプロトタイプを必要とするかもしれません。 1つの理由として例を挙げると、私は以前クライアントにシンプルなビジネスサイトのモックアップを見せたときに、クライアントから「トップページにある「概要」や「サービス」などをクリックしたら別のページに移行するのか？」、「コンタクトフォームでユーザーが「送信」をクリックしたら、私はメールを受信することになるのか？」と聞かれたことがあります。シンプルなタスクでさえ不確実性を伴うことがあり、プロトタイプは当て推量を解消するのに役立ちます。また、簡単なブラウジングの操作さえ、ユーザーやクライアントによってはわかりづらくて大変な作業となりえます。プロトタイプがあればネットワークからサインオフするときにも、当て推量する手間を省くことができます。加えて、プロトタイプはユーザーテストに役立ちます。ユーザーテストを行うときには、初期段階からプロジェクトのシミュレーションを始めるのがベストです。作業がほとんど完了した後に大きな変更をしなければならない事態は避けたいところです。 [PR] コーディングで副業する方法とは4種類のプロトタイププロトタイピングを始める前に、どの種類を使うか決めます。ほとんどのデザイナーたちが実践しているように、どのようなプロジェクトでも複数の種類を組み合わせて使うことができます。 1. 概念的プロトタイプこのプロトタイプは、形の上では完成した製品と全く似ていません。ここでインターフェースのディテールとレイアウトは重要ではありません。インタラクションとプロセスだけに集中します。全てのプロトタイプの目的は製品の動作性を示すことです。その意味で、このプロトタイピングは原始的な形だといえます。機能性だけがテーマであり、形は問題となりません。この段階では、フローチャート、ポストイットのメモ、PowerPointのプレゼンテーション、アイコンでプロセスを説明するビデオを使ったり、身振り手振りを加えてカメラに向かって録音してもいいでしょう。要点を伝えることができれば何でもいいのです。概念的プロトタイプはプロジェクトの初期段階で使われます。プロジェクトにはまだ名前がないかもしれません。アプリやWebサイトもアイデアの段階なので、「こんな感じで作動すると思う。」と話しているかもしれません。 2. ローファイプロトタイプローファイプロトタイプでは、レイアウトやスクリーンのサイズなど具体的な対象を扱うようになります。このプロトタイプは、作られるのも破棄されるのもサイクルが速いです。ローファイプロトタイプの目的は、あなたとクライアントが基本的な部分に満足できるまで、試行錯誤を最速で繰り返すためのものです。だからプロトタイプに愛着を持つべきではありません。ほとんどのプロトタイプは使い捨てであり、それこそが長所です。「ローファイプロトタイプ」は「ワイヤーフレーム」とよく置き換えることができます。この段階では紙に書いて行うこともよくあります。アプリでローファイプロトタイプを作成するときには、他のスクリーンへのリンクやコメントの機能など、基本的なプロトタイピングの機能を備えているものを使うことがおすすめです。ワイヤーフレームのアプリはインターネットとの連携が容易であるというメリットがありますが、やや動きが遅いことも多いです。概念的プロトタイプと同じくプロジェクトの初期段階で使われますが、ビジネスモデルやプロジェクト名はすでに存在している段階でしょう。上手くいくと確信できるものが持てるまで、頭の中で思いつく無数のアイデアをえり分ける時です。 3. ミディアムファイプロトタイプ段階によっては、ローファイプロトタイプでは要点を把握しにくい一方、ハイファイプロトタイプでは十分過ぎることがあります。スタイルガイドを完全には作成していなかったり、まだグラフィカルアセットを全て作り終えていない段階です。ミディアムファイプロトタイプは、このようなデザインの初期～中間の段階で使うことができます。インタラクションのシミュレーション機能を持つプロトタイピング作成アプリによって作られることも多いです。CSSのフレームワークを利用して、HTMLとCSSによって構築することもできます。 BootstrapとFoundationが、現在存在しているプロトタイピングのツールの中ではおそらく主流です。有名ブランドのイメージがあればそれを使うべきですが、ストックイメージでも足りるでしょう。ストックタイプのUIエレメントは、模作のインターフェイスをより速く構築するために使われます。プロトタイピング作成アプリの多くは、これらのUIエレメントのライブラリを持つことが多く、作業の高速化に役立ちます。ミディアムファイプロトタイプは、リテラル思考型(Literal thinker:全体的なイメージよりも、具体的なステップや言葉の定義から考えるような人)で外観や動作の近似を見たいと思うような人に向いています。彼らにとっては、「未完成」のヘッダーの方が、Webサイトのヘッダーに全く見えないようなスケッチ風の代物よりも、まだ耐えられます。リテラル思考のクライアントには、ワイヤーフレームで素早く考えた初期のアイデアを見せる必要はないでしょう。ミディアムファイプロトタイプの段階で見せる方が、彼らに方向性を分かってもらいやすいです。 4. ハイファイプロトタイプこの段階までプロジェクトが進むと、全てのスクリーンのモックアップが完成していて、全てが立派なものになっているでしょう。製品をバックエンドのコードと統合して、人々に製品の動作性を見てもらう時です。ハイファイプロトタイプは通常、デザインに関する最終的な合意をクライアントと結ぶために使われます。ただのPSDファイルを送るだけれはなく、インタラクティブなものを提示しなければなりません。 2つの方法のうちいずれかによって行われます。1つの方法では、静的なHTMLとCSSを利用して、一部をインタラクティブな外観に仕上げます。もう1つの方法では、画像やPSDのファイル形式をインポートできるアプリを利用して、擬似インタラクティブな特性を加えることで完成品のアプリ（製品）の機能を模倣します。アプリによっては、プロトタイプのデモをWeb上(またはモバイルデバイス上)で行うことも可能です。プロトタイピングのメソッドプロトタイプの主な種類を見たところで、次にプロトタイプを実際に作るためのツールをご紹介します。基本的な使い方も含めてすでにほとんどご紹介していますが、さらに詳細を見てみましょう。あなた自身とクライアント双方にとって適合するメソッドを選びましょう。ビデオまたはプレゼンテーションのプロトタイプこれらは具体的な作業がなされる前に、アイデアを売るためによく使われます。そのため通常は、潜在的な投資家を意識したものです。クライアント向けにも使えますが、他の代替手段の方が効率的なコミュニケーションを図るには優れていることも多いです。アドバンテージは人によって異なるでしょう。ビデオとプレゼンテーションのプロトタイプで、利益率を上げるために作られたものは商業型の公式に従います。聴き手が共感できる問題を提示する。あなたの製品によってその問題がどのように解決されるかデモを示す。 (オプションとして)会社のマスコットをデジタル形式で表現して、キャッチフレーズを叫ばせながら楽しそうにダンスさせる。これらのプロトタイプの中にはアイコン、テキスト、イラストレーションを使うだけで完成するものもあります。他にはアニメーションを利用して、要点を説明するのに動きを使うこともあるでしょう。あなたのアイデアを売ることができれば、正しく使いこなせているといえます。ビデオのプロトタイプと紙のプロトタイピングを組み合わせた良い例をご紹介します。Video Prototype for Mobile Cooking App : Youtube動画よりワイヤーフレームワイヤーフレームは紙面上かアプリにおいて作成できます。ワイヤーフレームは通常ローファイプロトタイプと見なされていますが、時間をかければミディアムファイプロトタイプにアップグレードすることも可能です。もっとも労力をかけるだけの価値はほとんどありませんが。ワイヤーフレームは、作成されるのも破棄されるのも速いです。紙面上でワイヤーフレームを作成することが魅力的である理由の1つです。アプリでワイヤーフレームを作ると、より正確なデザインが可能となり、既存のワイヤーフレームから簡単に編集することもできます。しかし、あなた自身以外には誰も見ないであろうスケッチを速く作成できるという点が、やはりワイヤーフレームの長所として一番優れています。しかし、すで述べたようにアプリでワイヤーフレームを作成すると、より簡単にインターフェースの機能を模倣できるというメリットもあります。紙面上に作成したワイヤーフレームをタップしたところでトントン音が鳴るだけですから、面白いかもしれませんが、あなたの意図するところを伝えることはできません。紙のプロトタイプこれはただのスケッチではないという点で、紙面上のワイヤーフレームとは異なります。紙を利用するのは、物理的でフラットな素材でインターフェースのモデルを作るためです。先にご紹介したビデオのプロトタイプにもその例を見ることができます。インターフェースの要素は、紙にスケッチして、カットして作ります。コピーして予備を作ることもあります。そして作ったピースを他の紙の上に集めます。ある要素のサイズが間違っていれば、他の要素の並びを変えたり、新しいサイズの要素を紙をカットして作るなどの方法があります。またワイヤーフレームより「本物」らしいといえます。特に面白さはないとしても、クライアントは紙のモデルを触ることができます。この触覚に訴える方法はクライアントに多くを説明できるので、他のどんな方法より優れていることもあります。誰でも対象をより深く理解するためには、物理的なコンタクトが必要です。UXデザインの半分は、物理的なインタラクションの使い心地を、デジタルのインターフェースで作り直す作業であるといえます。アプリで作成するミディアムファイおよびハイファイプロトタイプこれらは紙のプロトタイプとの共通点が多いです。以下でご紹介するInvisionなどのアプリで作成するプロトタイプは、あらかじめデザインしたインターフェースの要素をもとに作り始め、これらのピースを集めて完成品を模倣します。異なる点は、全ての作業がスクリーン上でなされることです。完成製品のグラフィック作成やブランド化も可能であり、プロトタイプであっても完成製品のように作成することができます。その次はすでに述べたことですが、アプリによって製品のデモをブラウザやモバイルデバイス上で行うこともできます。また手で触れて感じることも可能になります。クライアントの触覚に訴えることで、もし気に入ってもらえれば、最終的な承認を得たも同然です。コードもちろんインタラクションを必要とする場合には、インターフェースのプロトタイプをコードで作るのがいい方法です。その理由もご紹介します。あなたのワークフローによく合う(とにかくブラウザ上でデザインするような場合)。作成するサイトやアプリに、ボタンなどのインタラクティブな要素が多数存在している。製品作成の最終段階でプロトタイプのコードを利用すると、時間の節約になる。インターフェースの機能性のデモを、アプリを使わずにブラウザ上で実行したい。あなたがキーを押すのが好きで、クリックするのは嫌いである。ブラウザ上でプロトタイピングを行うと、特に修正版を作成中はやや時間がかかります。製品の初期段階ではおすすめしません。ミディアム～ハイファイプロトタイプで使うのがベストです。すでにHTMLやCSSで作業を進める方法を好んでいるとしたら、完成間近のプロジェクトを提示するには最良の方法の1つです。フレームワークによるプロトタイピングフレームワークを利用すると、コードを使ったプロトタイピングのスピードを相当上げてくれます。さらに、完成製品用のフレームワークを利用するとしたら、コーディングの量も少なくて済みます。補足として、BootstrapやFoundationのような人気の高いフレームワークを利用して構築された、ドラッグ＆ドロップ形式のWebページ用エディタもあります。これらを使うことで、ローファイプロトタイプからコードを加えた完成製品まで全て作ることができます。または、これらをプロトタイプを速く作る目的だけに使い、プロジェクトの最終段階ではカスタマイズしたコードを使う方法もあります。どちらの方法でも上手くいくでしょう。プロトタイピングのツールとアプリ理論を理解したところで、プロトタイプの作成に進みましょう。紙のプロトタイプやコードだけに限定せず、アプリをどこかで使うと仮定します。良くも悪くも、多数の優良なアプリから選ぶことになります。繰り返しになりますが、結局はあなたに合うものを選ぶことが大切です。モバイルアプリのデモを実行する機能が必要か？Google DriveやDropboxなどのサービスとファイルの同期が必要か？Githubと統合させるか？ローファイ、ミディアムファイ、ハイファイのどのタイプか？アドバンストスクリプト言語(Advanced scripting)か？などから考えましょう。以下にリストアップするアプリは、これらのニーズに対応しています。何に着目すべきか分かりやすいように、アプリごとに最も関連性の高い機能をご紹介します。これらアプリの多くは主にワイヤーフレームのためのツールとして知られています。ワイヤーフレームのソフトウェアは、インタラクティブなプロトタイプに必要な機能を備えていることが一般的です。人によってこれらのアプリを使うことで得られるアドバンテージも異なります。 AdobeのExperience Design CC 現時点では最新のアプリです。このアプリの登場により、今まで飽和状態だった市場に競争を巻き起こすことになりそうです。単にワイヤーフレームのアプリまたはプロトタイピングのアプリというよりも、デザインアプリです。Sketchや開発終了したFireworksと似ていますが、デザインした全てのものからプロトタイプを作り出すことが可能な点が斬新です。今のところMacのプレビューにのみ対応していますが、2016年末までにはWindows版もリリースされる予定です。プレリリース版は無料ですが、完成版のリリース後にはAdobe Creative Cloudのプランに組み込まれます。プレゼンテーションのソフトウェア MicrosoftのPowerPoint、AppleのKeynote、LibreOfficeのImpress、GoogleのSlidesは全てプロトタイプの作成に使えます。プロトタイプについてのコンセプトはそれぞれ異なっています。スライドにリンク機能を加えるだけで、インタラクティビティを模倣できます。コンテンツ中心型のWebサイト用のプロトタイプにも向いています。またこの中のソフトの少なくとも1つは使った経験のある人も多いでしょう。もし使ったことがなければ、ImpressとSlidesは無料で使えます。 InVision InVisionも有名なアプリの1つで、ハイファイプロトタイピング向きです。バージョン管理を特色としていて、リアルタイムの連携機能やフィードバック機能を売りとしています。Marvelのアプリのように、アニメーション、プロトタイプの組込み、デバイス上でのデモ、などの機能もあります。無料プランではプロトタイプ1つまで作成できますが、それ以降は有料プランで月額15USドルかかります。 InVision Justinmind Justinmindはアプリケーションのハイファイプロトタイプを作成するのに向いているように思えます。JustinmindのサイトではレスポンシブデザインのWebサイトのプロトタイプについても言及されています。アプリ上でのデモ機能もあります。今のところ1年間の有料契約(月額換算で19USドル)からスタートできます。 Justinmind Marvel Marvel Appは有名なプロトタイプのアプリです。基本的に無料プランで、アップデートの価格も全てリーズナブルです。注目の機能は、PhotoShipとSketchのサポート、DriveとDropboxとの同期、Webページ上での組込み型プロトタイプです。これらの機能によって、プロトタイプをアニメーション付きのプレゼンテーションに仕上げることもできます。ハイファイプロトタイプの作成に向いています。 Marvel Proto.io Proto.ioはハイファイプロトタイプ向きのアプリです。複合的なインタラクション、アニメーション、ファイル形式のエクスポート、印刷、組込み、デバイスのデモンストレーションなどの機能が全てビルトインされています。15日の無料お試し期間と、月額24USドルのプランから始められます。 Proto.io POP POPが他のアプリと異なっているのは、ワイヤーフレームのスケッチとデジタル形式のプロトタイプのハイブリッドを作成できる点です。 iPhone、Androidフォン、Windowsフォンなどのカメラでスケッチの画像を取り込み、これらをインタラクティブなプロトタイプに変換します。主に紙で作業を進めるタイプの人には、データを共有するのにいいアプリです。プロジェクト2つまでは無料で利用可能で、以降は月額10USドルの有料プランになります。 POP Flairbuilder Flairbuilderはデスクトップアプリですが、プロジェクトにオンラインのビューア(閲覧用ソフトウェア)機能を利用できます。ミディアムファイのワイヤーフレームとプロトタイプに向いています。インタラクションを追加したり、デバイス上でのデモを行うことが可能で、グリッドベースのデザインにも特色があります。ワンタイム料金で99USドルと高額ですが、Axureよりも安いです。 Flairbuilder Flinto Flintoには、Macアプリ版とWeb用ライト版の2つのバージョンがあります。違いはというと、Macのバージョンの方がより複雑なアニメーション、インタラクションなどの機能をテーブル(表)に加えることができます。またSketchからファイル形式をインポートできるのも、Web用ライト版にはない機能です。ワンタイムの購入価格で99USドルかかります。ライト版(月額20USドル)だとデスクトップバージョンのライセンスも含まれるので、両方の良い部分を利用できます。 Flinto [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

アプリデザイン

JavaScriptとは何なのか！初心者向けに徹底解説

本稿は、Coding Dojoのブログ記事を、Coding Dojo Blogより了解を得て日本語翻訳し掲載した記事になります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。また、JavaScriptとは何かを解説した動画もあります。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。目次 JavaScriptとは JavaScriptの利用シーン JavaScriptの強みなぜJavaScriptは不可欠なのか学習方法 JavaScriptとは多くの人は知らないことですが、私たちはみんなJavaScriptのヘビーユーザーで、1日に何十回も使っています。デスクトップのコンピューター、携帯電話から、スマートテレビ、最新モデルの車に至るまで、ほぼ全てのデバイスにJavaScriptが相当使われています。私たちがウェブ検索をしたりコンピュータに囲まれた生活を送る上で、役立っています。このようにJavaScriptはあらゆる場所に浸透していますが、あなたはそれでもまだ「JavaScriptとは結局何なのだろう？」と疑問に思うかもしれません。なお、JavaScriptはJavaとは全く別の言語です。 JavaScriptはプログラミング言語であり、ユーザー側のWebブラウザと、Webサイトまたはウェブサービスの相互間のやりとりを、円滑にするために使われています。実質的に、私たちがブラウジングで体験できることのすべては、ブラウザの中で使われているJavaScriptの処理によるものです。 Webサイトの外観のデザインや使い心地から、Netflixのサイトに表示される映画の題名のようなサイト内の情報表示に至るまで、JavaScriptが使われています。 [PR] コーディングで副業する方法とはJavaScriptの実行される一般的な場面 JavaScriptは、Webページを構成する全てのオブジェクトを操作できるため、魔法のようなことを実行できます。しかしながら、JavaScriptの実行される一般的な場面はあまりにも多いため、多くの人は、JavaScriptが隠れて使われていることにすら気づかないのです。 JavaScriptの実行される一般的な場面としては例えば次のようなものがあります。：ユーザーが適切な形式でメールアドレスをフォームに入力したかどうかをチェックする。 Google.comのページをロードするとき、テキストカーソルを検索ボックスに自動で出現させる。 Webページ全体をリロードしなくても、一部分だけロードすることを可能とするので、例えば映画のWebサイトで、次回のシリーズのリスト表示の部分だけロードしたいときなどに役立つ。最も単純なレベルでは、JavaScriptのコードは、ブラウザがWebページにアクセスしたときにダウンロードされます。ページのロードが完了して画面上に表示されると、JavaScriptのコードが実行されて、次に実行するべき動作がもしあればブラウザに指示します。テキストカーソルを検索ボックスに表示するなどの動作がすぐに実行されない場合、JavaScriptのコードはアイドリング状態になり、特定の「イベント」の発生を待つことになります。「イベント」が発生した時点で、JavaScriptのコードが発動され、動作を実行します。例として、登録用のフォームでパスワード欄に入力しているときには、JavaScriptはユーザーがパスワード欄に文字を入力し始める瞬間を待っています。Webサイトがパスワードに使える有効文字として認めていない文字を、ユーザーが入力しようとする場合には、JavaScriptのコードはすぐにこの問題に気づいて、パスワード欄に小さな警告メッセージをポップアップで表示して、ユーザーに知らせます。 RubyとJavaScriptの違いとはについて現役のエンジニアが回答した記事も合わせてチェックしてみてください。 JavaScriptの強み玄人のユーザーは、考えたり気づいたりしているかもしれませんが、パスワード欄に有効な文字が入力されたときの認証プロセスは、サーバー(：Webサイトのリモートホストとなるコンピュータ)によっても処理できるはずです。ここにJavaScriptのテクノロジーの基本的な強みがあります。つまりJavaScriptは、ユーザーの使っているデバイス上で、即時にタスクを処理することができるのです。通常の場合のように、Webサイトとサーバーで情報の送受信をするときに必要な時差はかかりません。なぜJavaScriptは不可欠なテクノロジーなのか？ JavaScriptをWebサイトに導入するとそのサイトを運営している企業にとって強力なツールとなるということに加えて、JavaScriptはテクノロジーとしていかに不可欠なものであるかを、理解することが重要です。この2つは、現在だけではなくて将来的にも重要な点になるでしょう。 JavaScriptとそのコーディングの始め方と使い方をしっかりと理解しておくことは、Webの技術や開発に興味のある人にとって最も重要なスキルです。 Node.js 近年、JavaScriptの技術を応用した数々のテクノロジーが出現しています。 Node.jsは、これらのテクノロジーの中で最も普及しているもので、GoogleのV8 JavaScriptエンジンを使って構築されたサーバーサイドのJavaScriptのライブラリです。Node.jsは強力なテクノロジーであるため、ここ数年で、Netflix、PayPal、Uberなど数多くの有名企業が自社の古いテクノロジーをNode.jsに変えているのです。 Node.jsの興味深いところは、これまでとは異なるJavaScriptの実行を可能とする点です。 Node.jsによって、JavaScriptはユーザーのコンピュータ上でのやりとりを処理するというよりも、サーバーサイドで全てのタスクを処理するための中心的な言語として機能するようになっています。 JavaScriptの世界的な人気現在、JavaScriptが世界中のデベロッパーの間で最も人気のあるプログラミング言語の1つであることは、大企業や有名なサービスでJavaScriptが広く利用されている事実だけではなくて、実質的にあらゆるサインとして示されています。 StackOverflowの報告 — エンジニア向けに仕事に関するアンケートを実施し、「2016年のデベロッパー報告」としてリリースしました。その報告によると、フルスタックエンジニア(：クライアントサイドとサーバーサイドの両方に従事している開発者)の85％は、仕事でJavaScriptを使っていると回答しています。人気テクノロジーのランキングで1位のJavaScriptの人気度は、2位のSQLより25％も高いものでした。Node.jsのようなサーバーサイドのテクノロジーが発展したことで、JavaScriptはバックエンドのエンジニアの間でも、1位の人気を博しています。 StackOverflowの担当編集者によると、｢JavaScriptは地球上で最も広く使われているプログラミング言語です。｣とのことです。画像：開発タイプごとに最も人気のあるテクノロジーのランキング「stackoverflow Developer Survey Results 2016」より JavaScriptの学習方法 JavaScriptの人気の高さとパワーに興味を持って学習を深めたいと思っている人向けには、数多くのサイトやリソースがあります。 JavaScriptを少しかじることから学習をスタートできるでしょう。以下に、今すぐJavaScriptを学べるいくつかのサイトをご紹介します。 JavaScript.com Interactive Tutorial — 今すぐJavaScriptのコードを書き始めることができるような、シンプルでわかりやすい講座が提供されています。 Eloquent JavaScript Online Book — もしあなたが、学校のテストで詰め込み型の勉強を楽しめるタイプであったり、ページを読み進めながら順序立てられた章の情報を消化することが好きだとしたら、このオンラインの書籍が向いています。JavaScriptを操作するために必要な全ての基礎を教えてくれます。 CodinGame.com — この教育アプリは数多くの言語学習をユーザーに提供していますが、JavaScriptもその1つです。JavaScriptのコードを、ゲームの中の小さなプログラムを作りながら学ぶことができます。モンスターを倒したり、主人公を危険な洞穴でナビゲートする場面で、あなたの書いたコードの結果を見ることができます。 Mozilla Developer Network JavaScript Guide — 使う情報を目の前に広げておきたい、あるいは正に必要としているトピックについての情報を得たい人は、このMDNのJavaScriptガイドを活用しておけば、まず間違いないでしょう。 CodeSchool JavaScript Roadtrip — 洗練されていてゲーム的な要素もある、双方向型の講座です。JavaScriptの基礎の習得をメインとしながら、重要テーマについての短いビデオ講座も、学習が進む中でいくつか提供されています。以上、JavaScriptについて詳しく説明しました。入門向けのJavaScriptの学習サイトも紹介しているので、合わせてご覧ください。人事・研修担当の方は、JavaScript/jQuery研修も提供しているので、ぜひご覧ください。 TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

JavaScript

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

独学で身につく！入門向けのJavaScript学習サイト20選

1. Udemy

2. ドットインストール

3. とほほのWWW入門

4. WEB+DB PRESS plus

5. codecademy

6. JEEK

7. Progate

8. CODEPREP

9. UX MILK

10. マンガで分かるJavaScriptプログラミング講座

paiza

Schoo

初心者のためのJavaScript入門

code.9leap

jsdo.it

CodeCombat

JavaScript リファレンス

MOONBlock

Web Programming Primer

W3Schools

関連するキーワード

あわせてよく読まれている記事

独学でゲームが作れる！入門に最適なUnityの学習サイト20選

【入門向け！】独学に最適なHTMLを学べる学習サイト20選

【初心者向け！】Gitを入門から学べる学習サイト10選

【学習タイプ別】入門向け！Pythonの学習サイト10選

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

JavaScriptとは何なのか！初心者向けに徹底解説

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

1. Udemy

2. ドットインストール

3. とほほのWWW入門

4. WEB+DB PRESS plus

5. codecademy

6. JEEK

7. Progate

8. CODEPREP

9. UX MILK

10. マンガで分かるJavaScriptプログラミング講座

paiza

Schoo

初心者のためのJavaScript入門

code.9leap

jsdo.it

CodeCombat

JavaScript リファレンス

MOONBlock

Web Programming Primer

W3Schools

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ