TechAcademy（テックアカデミー） プログラミング Git 【初心者向け！】Gitを入門から学べる学習サイト10選
icon
icon
Git

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

Git初心者向けにおすすめの学習サイトを紹介。入門から独学でかつ、無料で学べるのでこれから学習し始める人に最適でしょう。GitやGithubの知識は開発現場で必ず役立つので、これを機会にぜひ学習し始めてみてください。

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

初心者向けにGitを入門から始められる学習サイトを集めてみました。

Git(ギット)はとても便利なバージョン管理システムです。実際の現場でも必ずと言っていいほど使用するので、覚えておいて損はないでしょう。

どのサイトも動画やイラストなど特徴が違うので、自分の理解しやすいタイプのサイトを見つけてみてください。

 

なお本記事はTechAcademyのオンライン完結のGitHub講座のカリキュラムをもとに執筆しています。

 

ドットインストール

学習タイプ：動画

プログラミングを学ぶならここドットインストールでしょう。

もちろんgitも対応しています。全22回に分けて動画で説明してくれているので分かりやすくておすすめです。

ドットインストール

 

サルでもわかるGit入門

nm_08_02

学習タイプ：テキスト/イラスト

このサイトのGit入門は本当にわかりやすいと思います。

入門編から入ってスムーズに発展編などもうちょっと上級なことにストレスなく移れるのでおすすめです。サルの可愛いイラストもほっこりしていいですね。

サルでもわかるGit入門

 

[PR] 無料で現役エンジニアから学べる

LIG

nm_08_03

学習タイプ：テキスト

本当の初心者向けです。Git入門のための概念から基本用語までこちらの記事では一ページのコラムでGitについて全く初めからかなり細かい使い方まで説明してくれています。

LIG

 

GitHub

nm_08_04

学習タイプ：テキスト

本家Gitの解説サイトです。

正確に間違いない情報、最新の情報が載っているので、たとえ他でうまくいかなかったとしてもここにもどってこれば問題は解決するでしょう。

もちろん全く初めての人にも書いているので安心して読み始めてください！

Github

Githubの使い方も初心者向けに詳しく解説しているので、合わせてご覧ください。

 

Asial

nm_08_05

学習タイプ：テキスト/イラスト

イラストでわかる！git入門の入門。

イラストでgitについて説明してくれています。なんでも視覚的に勉強すると身に付きやすいですよね。

Asial

 

Developers.IO

nm_08_06

学習タイプ：テキスト

全18チャプターに渡って事細かにGitについて説明してくれています。

ぱっと初心者向けには見えませんが、下にスクロールして一から順に行っていくといつの間にか高みにいるかもしれません。

Developers.IO

 

1時間でできる無料体験！

PAYFORWARD〜Git初学習者のための効率的な学習方法を考えてみた〜

nm_08_07

学習タイプ：テキスト

こちらは直接プログラミングではありませんが、どうやったらGitを効率的に学習できるか考察したものです。Gitを始める前に一読しておくのもいいかもしれません。

PAYFORWARD

 

Learn Git Branching

nm_08_08

学習タイプ：ハンズオン(実際にコマンドを打ちながら学習)

ややこしいGitブランチの概念を図を用いてクイズ形式で学べるものです。非常にわかりやすいですね！

Learn Git Branching

 

SDNMagazine〜Gitを使いこなすための20のコマンド〜

nm_08_09

学習タイプ：テキスト

こちらはGitを使うためによく使うおもなコマンド20個説明してくれています。とりあえずややこしい概念よりもコマンドを！という人にとって一番の近道かもしれません。

SDNMagazine

 

SourceTree

nm_08_10

学習タイプ：ハンズオン

こちらは英語サイトで、しかも初心者のためのGit解説サイトではないのですが、Gitのコマンドなど覚えなくてもサクサク使えるアプリなのです。

視覚的に分かりやすく使えるデザインも優れたユーザーインターフェイスなのでまずはここから始めるのはあながち間違いではないかもしれません。

SourceTree

 

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

見たことあるサイトもあれば、初めて見るサイトもあるでしょう。それぞれ特色があり学習タイプもバラバラなので、ぜひ自分のスタイルに合った学習をしていきましょう。

無料でできるので、誰でも気軽に進められるはずです。

[お知らせ]TechAcademyでは自宅で学べるオンライン完結のGitHub講座を開催しています。わからないことをチャットで質問すると、現役エンジニアのメンターが毎日すぐに回答します。

記事を検索

関連するキーワード

関連する記事

git addで変更されたファイルをステージングエリアに追加する方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit addの使い方を紹介していきたいと思います。 ...
Git

はじめてでもOK！Gitをインストールする方法【初心者向け】

これから使い始めるという初心者のために、Git（ギット）のインストール方法を解説した記事です。今回はローカル開発環境にインストールします。 そもそもGit...
Git

git diffを使って変更されたファイルの差分を表示する方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit diffの使い方を紹介していきたいと思います。 ...
Git

git resetを使ってステージしたファイルを取り消す方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit resetの使い方を紹介していきたいと思います。 ...
Git

今さら聞けない！GitHubの使い方【超初心者向け】

開発者にとってなくてはならないサービスとしてGitHubがあります。 エンジニアにとっては当たり前のサービスですが、これからプログラミングの勉強を始める初...
Git

git ignoreを使ってファイルを無視する方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit ignoreの使い方を紹介していきたいと思います。...
Git

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

独学でゲームが作れる！入門に最適な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

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

JavaScriptをこれから学習したいという人におすすめのサイトをまとめて紹介しています。 独学で学習できますし、無料で進められるので手軽に始められるでしょう。HTMLとCSSを学習してみて次のステップに進みたいという方やJavaScriptを身につけてWebサイトの表現方法を増やしたいという方にはおすすめです。 各サイト動画やテキストなど学習タイプも載せているので、ぜひ自分に合ったサイトを見つけてみてください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   1. Udemy 学習タイプ：動画 JavaScriptを初めて学ぶ人、ちょっと触ったことがある人など様々なターゲットに合わせて動画があります。 本格的に学べる講座は、有料になっていますが、かなり実践的に学べるので、深い知識を身につけたい人にもおすすめです。 Udemy   2. ドットインストール 学習タイプ：動画 プログラミングを学ぶならもはやスタンダードなドットインストールです。 動画で分かりやすく解説してくれており文字を読むのが苦手！！というひとでも入りやすいのが特徴です。とりあえずここから始めれば間違いないでしょう！ ドットインストール   [PR] 無料で現役エンジニアから学べる3. とほほのWWW入門 学習タイプ：テキスト いきなりコードのサンプルを用いて学習していくので全くの初心者向きではないのかもしれませんが、それでもサンプルを実際に動かしながら楽しんで学習できる点は素晴らしいです。 とほほのWWW入門   4. WEB+DB PRESS plus 学習タイプ：テキスト ノンプログラマのためのJavaScriptはじめの一歩。 プログラミング自体が初めての人から対象にしてくれているのでいきなりJavaScriptという一番重要な言語が学べてこのサイトに出会った人はラッキーです。 その他プログラミング言語を学んでいくにあたって大切なことも語られているのでしっかり肝に銘じて学習しましょう。 WEB+DB PRESS plus   5. codecademy 学習タイプ：ハンズオン(実際にソースコードを書きながら) 海外の有名サイトCodecademyのJavaScript版になります。 言語は英語になってしまいますが、登録なしでレッスンが受けれるのでまずどんな感じか見てみて進めてみるのもいいかもしれません。サイトのデザインもかっこいいです。 codecademy   6. JEEK 学習タイプ：ハンズオン 理系生のインターンシップ・エンジニアのインターンシップ・アプリ開発のインターンシップをうたっているこのアプリですがもちろんプログラミング初心者のために作られたものなので分かりやすく作られています。 ブラウザ上でタイピングしてそのまま動くようになるのでわずらわしい環境設定無用！おすすめです。 JEEK   7. Progate 学習タイプ：ハンズオン こちらもリッチデザインなプログラミング学習サイトでもちろん無料です。3時間ほどでJavaScriptの基礎、そして重要な部分ががっちり学べるでしょう。 Progate   8. CODEPREP 学習タイプ：ハンズオン 9つのチャプターからなっていてゲームみたいに経験値をためながら学習を進めていくことができるので飽き性のあなたにもぴったりでしょう。 基礎的な内容を実際に書きながら習得することができるはずです。 CODEPREP   9. UX MILK 学習タイプ：テキスト こちらUX MILKでもJavaScript入門編があります。サイトデザインが綺麗でしっかりと見やすいので目移りせず集中して学習が進められそうですね。 UX MILK   10. マンガで分かるJavaScriptプログラミング講座 学習タイプ：マンガ その名の通り漫画で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

【未来の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デザイナーのサポートで学びたい場合はご参加ください。
アプリデザイン

【学習タイプ別】入門向け！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

git commitを使って変更内容をコミットする方法【初心者向け】

Git(ギット)はとても便利なバージョン管理システムです。 今回は、Gitの使用においても重要なgit commitの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 複数人で開発業務を行う上では必ず使う知識なので、実際にコマンドを打ちながら慣れていきましょう。 目次ドットインストールサルでもわかるGit入門LIGGitHubAsialDevelopers.IOPAYFORWARD〜Git初学習者のための効率的な学習方法を考えてみた〜Learn Git BranchingSDNMagazine〜Gitを使いこなすための20のコマンド〜SourceTree Gitについてそもそもよく分からないという方は、GitHubとは何なのか解説した記事を読むとさらに理解が深まります。   また、動画でも解説しています。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   大石ゆかり 田島メンター！！git commitって何をしているコマンドなんですか？？？ 田島悠介 git commitはね、ファイルの変更した部分とかを保存しておくコマンドだよ。   git commitとは Gitを使用すれば簡単にファイルの進捗を管理できます。 そのためにファイルの変更や追加などを保存しておく必要があります。 そのためのコマンドがgit commitです。 このコマンドでファイルの変更をGitリポジトリに保存できます。   git commitを使用してみよう それでは実際にgit commitを使用してみましょう。 今回は「sample」というディレクトリの中で、「sample.html」というファイルをコミットしてみましょう。   まずは、sampleディレクトリ内で、Gitのリポジトリを初期化します。 git init   次に、sampleディレクトリ内でsample.htmlを作成しましょう。 MacやLinuxの場合：touchコマンドを使用してファイルの新規作成ができます。 touch sample.html Windowsの場合：以下のコマンドを使用してファイルの新規作成ができます。 "" > sample.html   次に、sample.htmlをステージングエリアに追加するためのコマンドを打ちます。 git add . ステージングエリアとは変更内容を記録する場所で、「インデックス」とも呼ばれることがあります。 上記のようにgit add .と打ち込むことで、sampleディレクトリ内にあるすべてのファイルをステージングエリアに追加できます。 この時git add ファイル名と打ち込むことで、指定したファイルのみ追加対象にすることもできます。 このステージングエリアへの追加は、コミット前に毎回必要になる操作です。   現在の状況を確認するために、git statusと打ち込んでみましょう。 git status すると以下のように、ステージングエリアにsample.htmlが追加されたことがわかります。   最後にsample.htmlをコミットします。 以下のように打ってみてください。 git commit -m '最初のコミット' -m 'メッセージの内容'を末尾に追加することで、コミット時のメッセージを残せます。   無事コミットできているか確認するために、git logと打ち込んでみましょう。 git log すると以下のように、過去にコミットした日時とメッセージが確認できます。 このgit log表示は、qキーで終了できます。   大石ゆかり 田島メンター！！ git commitをしたときのメッセージを間違えてしまったんですけど、修正する方法ってないですか〜？ 田島悠介 それなら git commit –amendを使うと良いよ。   [PR] 無料で現役エンジニアから学べるgit commit –amendで直前のコミットメッセージを変更する git commit --amendは、直前のコミットメッセージを変更できるコマンドです。 ファイルをコミットした時に、コミットメッセージが適切でない場合に使用します。 では、sampleディレクトリ内の「sample.html」をコミットしたメッセージを変更してみましょう。   先程コミットしたコミットメッセージをgit logで確認すると、以下のように表示されます。 git log 「最初のコミット」だけだと、どのような作業を行ったのか分かりませんよね。 このような適当なコミットメッセージだと、今後のプロジェクトが進んだときに作業を詳しく振り返ることができなくなってしまいます。 そこで、git commit --amendを使用して、コミットメッセージを編集していきます。   ターミナルでgit commit --amendと打ち込むとエディタが立ち上がり、一番上の行にコミットメッセージが表示されます。 git commit --amend   エディタでコミットメッセージを変更し、上書き保存を行います。 そうすることで、コミットメッセージの変更を行えます。   今回は以下のようにメッセージを入力し直し、上書き保存を行いましょう。 create sample.html   その後、再度git logでコミットメッセージを確認してみてください。 以下のキャプチャ画像のように、上書きされていることがわかります。 以上でコミットメッセージを変更できました。   git commitのオプション 実際の開発現場では、git commit コマンドは最も多く使うコマンドの1つと言っても過言ではありません。 そのため、いくつかのオプションを覚えておくことで、効率よく開発を進めることが可能になります。 いくつか見ていきましょう。   変更したファイルをすべてコミットする すでにGitに追加済みのファイルで、変更があったものをすべてコミットするには以下のように記述します。 git add -a git commit   上記と同じことを、.を使い1行で表現すると以下の通りです。 git commit
Git

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

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

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） プログラミング Git 【初心者向け！】Gitを入門から学べる学習サイト10選