paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

11/7まで全編無料!【初心者向け】ビジネスに役立つデータ集計・分析を学べるDB/SQL入門編を公開

f:id:paiza:20161025195153p:plain
動画で学べるオンラインプログラミング学習サイト「paizaラーニング」では、この度2016年10月26日(水)よりDB/SQL入門編2」を無料公開いたしました。

講座追加キャンペーンとして、2016年11月7日(月)までの期間限定で「DB/SQL入門編1」「DB/SQL入門編2」があわせて無料で視聴いただけます
(※通常時は入門編1は月額課金プランに加入者のみ視聴可能となっております)

SQLが無料で学べるこの機会にぜひごらんください!!

paiza learningって何?「DB/SQL入門編」ってどんなレッスン?

データベース(DB)とは、様々なデータを利用しやすいように格納したもののことです。SQLとは、 DBに命令を出すための言語で、必要なデータをDBに格納したり、格納したデータを取得・表示をさせることができます。

SQLが使えると、「サイト訪問者数の推移を見たい」「毎月の売り上げを一覧表示させたい」という時なども、すぐに希望通りのデータを取得して閲覧することができますので、ITエンジニアだけなく、営業や企画・マーケティング等さまざまな職種の方にも、「ビジネスでの数値分析に役立つスキル」として需要が高まっています。

ただ、従来のSQL学習方法では、環境構築やDBの作成を学習者がゼロから行わなければならず、「仕事で使えるSQLの基礎的な書き方を覚えたい」という初心者にとってはハードルが高いものでした。

そこで、paizaでは初心者やITエンジニアではない職種の人でもSQLを学べるよう「DB/SQL入門編」を配信しています。

DB/SQL入門編」は、SQLのオンライン実行環境と構築済みのDBを使うことで、初心者でも環境構築で挫折することなく、動画と演習問題を通してSQLの実践的な書き方がすぐに学べて身につく講座となっています。


今回は、「DB/SQL入門編2」の公開を記念して、​11月6日(日)までの期間限定で、DB/SQL入門編1・2の無料公開を実施しております。この機会をぜひお見逃しなく!

paizaラーニング

この講座では、paizaの人気美少女キャラクター霧島京子(cv:上間江望)が、かわいい声で優しく・楽しく・わかりやすくSQLの使い方を教えてくれます「霧島京子による1本3分程度のレッスン動画」に加え、「ブラウザ上でコードを書いて実行できるオンライン実行環境」「複数の練習問題」で、初心者でも無理なく習得することができます。

◆学習進捗によってキャラで可視化!

paizaラーニング」では、各言語毎に登場するキャラクターが学習の進捗度合いによって成長!

学習のモチベーション向上を図る仕組みがあちこちに散りばめられているので、楽しく学び進める事が出来ます。 
f:id:paiza:20160726140649j:plain

■「paizaラーニング」を使う4つのメリット

f:id:paiza:20160726140821j:plain
1. 環境構築不要、5秒で学習を開始できる!
これまで、プログラミングを始める初心者にとって最大のハードルだったのが、丸1~2日かかる「プログラミング実行環境構築を構築すること」でした。paiza動画ラーニングでは環境構築不要、ブラウザ上でプログラミング言語を実行できるので、誰でもすぐに学習を始められます。

2. 3分動画で、毎日続けられる!
動画レッスンを見て、その場でレッスン内容をプログラミングすることで理解を深め、その後に練習問題を解いて応用力をきたえることができます。1本3分程度という短い動画なので、毎日無理なく続けることができます。

3. わからないところはプロのエンジニアに質問できるから安心!
わからない点は弊社エンジニアに質問をして、アドバイスをもらうことができます。初歩的なところでつまずいて、やる気を失ってしまうこともありません。

4. エンジニア30万人受験のスキル評価システムに基づいたカリキュラム
paizaが転職サービスで展開する、延べ30万人以上の現役エンジニアが受験したプログラミングスキル評価システムのデータと、paiza掲載の600社以上の求人票を元にカリキュラムを作成。開発現場で役に立つスキルを身につけることができます。

■DB/SQL以外にも多数の学習レッスン動画公開中!プログラミング学習コース

f:id:paiza:20160830130051j:plain
paizaでは、DB/SQLの他にもJava、Ruby、Python、C言語、HTML/CSS、JavaScript等、多数の学習動画が視聴可能な「paizaラーニング就活パック」を好評公開中です。

paizaラーニング就活パック」は、企業からの「こんな開発スキル・知識を身につけている学生がほしい」という要望と、ITエンジニア志望の学生からの「就活を上手に進めるためにはどうしたらいいのか」という悩みに応えるための特別コースです。

もちろん学生だけでなく、既卒の方、社会人の方、どなたでも受講いただけます。

単純なプログラミングスキルだけでなく、業界・キャリアに関する知識やWeb周辺の知識の習得、選考用ポートフォリオとなるサービス作成までを行える就職特化型の講座内容になっております。

youtu.be

paiza新卒について

f:id:paiza:20150730172136p:plain

paiza新卒は、paizaがITエンジニアを目指す学生の皆さんに向けてオープンいたしました、規定のプログラミングスキルがあれば大手企業からベンチャー企業までエントリーシート選考なしで応募ができる就職活動支援サービスです。

paiza新卒

プログラミング問題を解いてスキルランクを獲得した上で企業に応募ができますので、自分のプログラミングスキルのレベルが明らかとなり、プログラミングができる人ほど有利に就活を進めることができます。

Skype面接OKの企業も多数掲載しておりますので、自宅にいながら面接を受けることも可能です。「東京の企業に就職したいけど、地方に住んでいるので交通費が……」「研究で忙しいのに、移動に時間がかかりすぎるのはちょっと……」という人もぜひご利用ください。




paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。

paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

paizaのスキルチェック

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

デザインセンス不要でWeb制作が捗る!登録ナシですぐ使える「HTML5/CSS3」の無料テンプレート12選+α

f:id:paiza:20161024124958j:plain
どうも、まさとらん(@0310lan)です。

ネット上には、Webサイトを効率よく制作できるように多種多様な高品質テンプレートが存在します。

そのまま利用しても良いし、開発やデザインの参考にしてみたり…など、その活用範囲は広いのですが、検索すると「有料・無料」「低品質・高品質」などが混在していて見つけるのが大変だったりします。


そこで今回は、「無料・高品質」なテンプレートの中から使用用途別にカテゴリを分けて、さらに面倒な「登録」も不要なモノだけを厳選してご紹介しようと思うので参考にしてみてください!

■「ブログサイト」に最適なテンプレート!

Spore

f:id:paiza:20161024125143j:plain
Spore」は、モダンブラウザに対応したレスポンシブなテンプレートになっており、「ブログ」向けとして最適です。

ページのトップに位置するフルスクリーンのテーマ画像が印象的で、縦幅の違うカード状に並べられた記事はシンプルながらも、アニメーションによる視差効果がちょうど良いアクセントになっており、とてもお洒落な雰囲気を感じられると思います。

記事単体ページも、白を基調とした「文字」が読みやすいシンプルなデザインで、文章を読むことに集中できるのが魅力です。

<テンプレート入手方法>

ダウンロードページにある「Download」ボタンをクリックすれば入手できます。

Clean Blog

f:id:paiza:20161024125311j:plain
Clean Blog」は、個人が情報発信するブログとして最適なレスポンシブテーマになっています。

全体的にシンプルな1カラム構成になっており、記事単体ページではタイトルをフルスクリーンで大きく表示する最近人気のデザインが取り入れられています。

コンタクトフォーム用のPHPファイルも付属しているので、自分のメルアドに書き換えるだけですぐに利用可能です。

<テンプレート入手方法>

ダウンロードページにある「Download」ボタンをクリックすれば入手できます。

■「スマホアプリ」のサイトに最適なテンプレート!

Bent

f:id:paiza:20161024125407j:plain
Bent」は、企業または個人が制作したスマホ用アプリのランディングページみたいな使い方のできるテンプレートになります。

どんな素晴らしいアプリなのかを、テンプレートに沿って画像やテキストを編集していくだけで非常に洗練されたデザインでユーザーに訴求することができるようになっているのが特徴です。

機能解説、スクリーンショット、動画…など、もし不要な要素があれば簡単に削除もできる構成なのでカスタマイズ性も高いと言えます。

<テンプレート入手方法>

ダウンロードページにある「Download」ボタンをクリックすれば入手できます。

Max App

f:id:paiza:20161024125512j:plain
Max App」は、スマホアプリを訴求するための非常にシンプルなフラットデザインを採用したテンプレートです。

ユーザーに知ってもらいたいアプリの機能について、重要なポイントだけをいくつか掲載するだけで完成するので、プロトタイプや正式公開前のティザーサイトみたいな使い方にも最適でしょう。

<テンプレート入手方法>

1.ダウンロードページの右下「Download Template」ボタンをクリック
2.ポップアップ表示の「I agree download」ボタンをクリック
3.60秒経過後に表示されるボタンをクリックして入手

■「ECサイト」向けに最適なテンプレート!

Best Store

f:id:paiza:20161024125828j:plain
Best Store」は、物販・電子媒体・個人間取引など…ネットショップ系全般に最適化されたテンプレートです。

オススメの商品などが分かりやすいトップページに加えて、商品個別ページや「ショップカート」ページなど必要なテンプレートがセットになっているのは便利です。

もちろんサービスとして完成させるには、別途サーバーサイドなどの開発も必要ですが、ユーザーに分かりやすい今風のデザインを素早く構築するには最適でしょう。

<テンプレート入手方法>

1.ダウンロードページの右下「Download Template」ボタンをクリック
2.ポップアップ表示の「I agree download」ボタンをクリック
3.60秒経過後に表示されるボタンをクリックして入手

Nava

f:id:paiza:20161024125942j:plain
Nava」は、例えばAirbnbのような民泊マッチングサービスや、車やボートなどのレンタル、個人間取引…などのプラットフォームを作る際に便利なテンプレートになります。

画像をメインに活用したグリッドレイアウトが特徴的で、マウスオーバー時のアニメーションやパララックス効果などもさりげなく取り入れられているのは好印象です。

<テンプレート入手方法>

1.ダウンロードページの「Download freebie」ボタンをクリック
2.Dropboxのダウンロードリストから「直接ダウンロード」で入手
(サインアップ画面が表示されたら下段の「続行」リンクをクリックして入手)

■「ティザーサイト」などに最適なテンプレート!

Perth

f:id:paiza:20161024130055j:plain
Perth」は、ものすごくシンプルに組み立てられた1カラムサイトで、主に「ティザーサイト」のような宣伝やプロトタイプの制作に最適なテンプレートです。

特に、まだ断片的な情報しかないのに短時間で制作しなければいけないようなケースで、見た目も少しこだわりたいような状況の時にサクッと作れるので重宝すると思います。

<テンプレート入手方法>

ダウンロードページの「DOWNLOAD FOR FREE」ボタンをクリックして入手

Notify

f:id:paiza:20161024130208j:plain
Notify」は、一画面に「カウントダウンタイマー」と「メールフォーム」のみというシンプルな構成のテンプレートです。

まさにティザーサイトにはピッタリで、「日・時・分・秒」を好きなように設定してメールフォームには人気の「MailChimp」を連携させるだけでOKです。

新商品や新サービスなどを公開するまでのWebページとしては最適でしょう。

<テンプレート入手方法>

ダウンロードページの「Download Source Files」ボタンをクリックして入手

■企業サイトに最適なテンプレート!

Creativs

f:id:paiza:20161024130353j:plain
Creativs」は、企業向けのコーポレイトサイトに最適なテンプレートで、「About」「Contact」などのページも一通り揃っています。

トップページには、会社・サービス紹介用の動画ファイルをフルスクリーンでポップアップ表示できるのが特徴で、仕事内容や社員紹介などのページも画像・テキストを編集すればすぐに利用できるのが魅力です。

全体的に「白」を基調とした落ち着きのあるシンプルで美しいデザインとなっています。

<テンプレート入手方法>

ダウンロードページの「Download Source Files」ボタンをクリックして入手

Prevailing

f:id:paiza:20161024130547j:plain
Prevailing」は、ランディングページのような縦に長い1枚ページの企業サイト向けテンプレートになっています。

あまり多くの情報は掲載しないシンプルな構成ですが、指標となる重要な「数値」を示すコンテンツやポートフォリオ、チーム紹介など、ポイントを抑えたモダンな構成が特徴です。

少人数のスタートアップなどのポータルとしても有効活用できると思います。

<テンプレート入手方法>

1.ダウンロードページの右下「Download Template」ボタンをクリック
2.ポップアップ表示の「I agree download」ボタンをクリック
3.60秒経過後に表示されるボタンをクリックして入手

■レストラン・飲食店に最適なテンプレート!

Resto

f:id:paiza:20161024130727j:plain
Resto」は、主にレストランや飲食店に最適化されたテンプレートです。

商品である「料理」がユーザーの目に触れやすいように、写真のビジュアルを全面に出しているのが特徴的なデザインです。

オススメの「メニュー表」を掲載できるようになっていたり、料理の評価スターなども取り入れています。

また、トップにはフルスクリーンの画像を配置していますが、これはお好みで調理風景などの動画に差し替えても良いでしょう。

<テンプレート入手方法>

ダウンロードページの「Download Source Files」ボタンをクリックして入手

■「ポートフォリオ」に最適なテンプレート!

Magnetic

f:id:paiza:20161024130851j:plain
Magnetic」は、自分の作品紹介や自己紹介などを掲載する用途に向いており、ポートフォリオのような使い方ができるテンプレートです。

サンプルデモは、イラストのポートフォリオが掲載されていますが、自分が過去に作ったWebページであったり、動画、音楽、電子書籍…など、どのような用途にも柔軟に対応できるでしょう。

また、個別の詳細ページも備わっており、ブログ感覚で作品について詳しく紹介することができるのも特徴です。

<テンプレート入手方法>

ダウンロードページの「Download Source Files」ボタンをクリックして入手

■(おまけ)「ハッカソン」に最適なテンプレート!

Hackathon Starter

f:id:paiza:20161024131118j:plain
Hackathon Starter」は、どちらかと言うとエンジニア向けのテンプレートで、名前の通り「ハッカソン」のようなイベントにおいて、さまざまなWeb APIを駆使した開発が必要な時に最適なテンプレートになっています。

コマンド一発で、BootstrapベースのWebサイトが構築され、FacebookやGoogleなどのアカウントを使ったOAuth 2.0認証及びローカル認証環境、コンタクトフォーム、多彩なサービスと連携できるAPI環境(twitter, tumblr, Instagram, Stripe, PayPal…など)が揃うのですぐに開発に集中することが出来るでしょう。

<テンプレート入手方法>

「git clone」するか、ダウンロードページの「Clone or download」ボタンをクリックして表示される「Download ZIP」リンクをクリックして入手

■HTML/CSS/Bootstrapの学習レッスン動画公開中!プログラミング学習コース

f:id:paiza:20160830130051j:plain
paizaでは、計232動画(2016年10月14日時点)が視聴可能な「paizaラーニング就活パック」を好評公開中です。

プログラミング未経験者から始められるHTML/CSS入門編」もございますのでぜひチャレンジしてみてください。HTML/CSSだけでなくBootstrapの使い方も学べます!

paizaラーニング就活パック」は、企業からの「こんな開発スキル・知識を身につけている学生がほしい」という要望と、ITエンジニア志望の学生からの「就活を上手に進めるためにはどうしたらいいのか」という悩みに応えるための特別コースです。

もちろん学生だけでなく、既卒の方、社会人の方、どなたでも受講いただけます。

単純なプログラミングスキルだけでなく、業界・キャリアに関する知識やWeb周辺の知識の習得、選考用ポートフォリオとなるサービス作成までを行える就職特化型の講座内容になっております。

youtu.be

■まとめ

今回ご紹介したテンプレートは、Web制作の学習教材としても優秀で、すべてダウンロードして「HTML・CSS」ファイルの中身を1つずつ確認しながらどんな構造になっているのかをチェックすると良いでしょう。


例えば、どんなタグを使って要素をまとめているかを確認したり、クラス名の付け方やそれに対するCSSの記述を見たり、Bootstrapらしくない活用方法、トレンドデザインの記述方法…など、自分でもコードを書きながらチェックすると理解が深まるはず!


今回のテンプレートの構造を一通りチェックすれば、大抵のWebサイトは作れるようになるので、ご興味ある方はぜひ参考にしててみください!




paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。

paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

paizaのスキルチェック

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

HTML/CSS超初心者でも自分の目的に合わせて選べる、効率的な学習方法4つ

f:id:paiza:20161130145639j:plain
Photo by dalcrose
f:id:paiza:20140916135428p:plainこんにちは、谷口です。

プログラミング学習に関するサービスを運営していますが、最近は現役のITエンジニアやWebデザイナーといった職種に限らず、「HTML/CSSを勉強したい!」という人が増えてきたなと感じます。

ただ、初心者にとって一番の悩みは「どうやってHTML/CSSを勉強していくか」ではないでしょうか。

また、一口にHTML/CSSを学びたいと言っても

  • 未経験から勉強を始めてWebデザイナーになりたい
  • 独学で勉強しているが、周囲に質問できる人がいなくてつまずいた時に解決できない
  • 仕事でエンジニアやデザイナーと話すときにHTML/CSSのことがわからなくて困ったので基礎的なことだけでも知っておきたい
  • そもそもどうやって勉強を始めたらいいのか・どんな勉強法があるのかがわからない

などなど、その人によって求めるレベル感は様々ですし、学び方もその人の目的に合った方法を選んだ方がHTML/CSSを効率よく習得できるでしょう。

そこで今回は、HTML/CSSを学びたい初心者の方に向けて、タイプ別に適した学習法などをご紹介していきますので参考になればと思います。

■HTML/CSSを勉強したい人のタイプ

f:id:paiza:20161130145816j:plain
Photo by othree
よく初心者の方から「HTML/CSSは何を使ってどう学習するのが一番いいの?」というご相談を受けますが、本で学ぶのが好きな人、独学に向いている人、人に教わりたい人など、得意な方法は人それぞれだと思います。

またプログラミング経験の有無や、周りに教えてくれる人がたくさんいる人、逆に全くいない人など置かれている環境や目的もそれぞれだと思いますので、「HTML/CSSを学びたい」と言われる方に多いタイプとタイプや目的別に適した学習方法をご紹介していきます。

◆既にプログラミング経験があるエンジニア

Web開発企業に転職したり、部署やプロジェクトが変わったりして、フロントエンド開発も手掛けることになった人です。

HTML/CSSを使った経験はなくても、プログラミング経験があるのでコーディング自体に抵抗はないかと思います。また、Web系の企業に転職した場合などは周りに詳しい人がいることも多いでしょう。

【向いている学習方法】
Web上の学習サービスを使って学ぶ
書籍で学習する
勉強会に行ってみる

◆Web開発企業で開発やデザイン以外の部署に所属している人(営業など)

例えばWeb開発企業で営業などをされている方で「自分が制作するわけではないけど、技術的なことがわかってないとお客さんや社内のエンジニア・デザイナーと話をするときに困るので勉強したいんです」という方が最近非常に増えてきました。

【向いている学習方法】
Web上の学習サービスを使って学ぶ
書籍で学習する
スクールに通う(※一日集中基礎コースなど)

◆仕事のためではなく趣味で、自分のサイトやブログを公開できるようになりたい人

特に仕事で使いたいというわけではなく、趣味のサイトやブログを自分で作りたいという人です。

【向いている学習方法】
Web上の学習サービスを使って学ぶ
勉強会に行ってみる

◆Webデザイナーやエンジニアとしての就職・転職希望者(業務未経験)

今は他業種で働いているけど、いずれはWebデザイナーとして転職したいという人や、就職したいという学生の方も多いです。多いですが、業務未経験から仕事にできるレベルを目指す場合(特に転職を目指す場合)は、実務に役立てられるレベルまでしっかり習得する必要があります。

【向いている学習方法】
Web上の学習サービスを使って学ぶ
勉強会に行ってみる
スクールに通う

■HTML/CSSの学習方法いろいろ

f:id:paiza:20161130145934j:plain
Photo by Cyril Doussin

Web上の学習サービスを使って学ぶ

コストの低さ:★★
手軽さ:★★★
向いてる人:全員

最近は、全くの未経験者でもHTML/CSSの学習を始められるようなサービスが増えています。

動画を使ってスクールの授業を受けるような感覚で学習できたり、一つのレッスンが短時間で終わるため隙間時間で手軽に学習できたりするので、最初の一歩としては比較的どんな方にもおすすめです。

まったくの未経験者でも、趣味でやりたいからそこまでお金をかけたくないという人も、ブラウザさえあればよいので学習を始めやすいでしょう。

ただ、未経験者の場合は学習を進めていくうちにどこかでつまずいて詰まってしまうことがあると思います。そこで挫折してしまわないよう、わからないことを質問できるサービスのついたサイトから始めるのがおすすめです。

サイトによっては課金が必要な場合もありますが、スクールなどに通うよりはずっと安価です。

◇HTML/CSS初心者向け学習Webサービス

Progate
f:id:paiza:20150204125057p:plain
料金:基本無料(有料会員は980円~)

Progateは、スライドによるレッスンで基礎を学び、オンラインエディタでコーディングをして実行結果を見ることができます。コーディングの際は、エディタやプレビュー画面と一緒にお手本となる見本画面や解説も見ることができます。

また、プレミアム有料会員になれば、わからないことをチャットでプロのエンジニアに質問をすることもできます。


ドットインストール
f:id:paiza:20141014152641p:plain
料金:基本無料((プレミアム会員は月額¥880)

ドットインストールは、動画でHTML/CSSを学べるサイトです。

こちらもプレミアム有料会員になれば、わからないことをスタッフに質問をすることができます。


paizaラーニングのHTML/CSS入門編
f:id:paiza:20160830130051j:plain
料金:基本無料(有料会員は月額600円~)
paizaラーニングのHTML/CSS入門編では、paizaの人気美少女キャラクター霧島京子(cv:上間江望)が、かわいい声で優しく・楽しく・わかりやすくHTML/CSSの使い方を教えてくれます。「霧島京子による1本3分程度のレッスン動画」に加え、「ブラウザ上でコードを書いて実行できるオンライン実行環境」「複数の練習問題」で、初心者でも無理なく習得することができます。

また、わからないことがあれば現役エンジニアに質問をすることもできます。

HTML/CSS入門編1」はいつでも無料でご覧いただけます。

youtu.be

書籍で学習する

コストの低さ:★★
手軽さ:★★
向いてる人:既にプログラミング経験がある人・Web系企業に勤めている人(※周りに教えてくれる人がいる)

特に文系出身の方からは「最初にどんな書籍を買ったらいいでしょうか」と聞かれることがよくあります。

書籍はネットよりも正確な情報が体系的にまとまっていることが多いです。しかし当然ながら、HTMLコーディングは書籍を読んだだけで身につく技術ではなく、必ず実際にパソコンに向かって手を動かしてコードを書く必要があります

既にプログラミング経験がある人や、初心者向けの学習サイトは簡単すぎるという人の場合は、書籍で体系的に学ぶのもよいかと思います。(エンジニアの中には新しい言語を学ぶときはまず書籍を買うという人もいますので)

初心者が書籍だけで勉強を進めようとする場合は、つまずいたときに誰にも聞けなくて挫折…となったりモチベーションが保てない…となってしまわないよう注意が必要です。全くの未経験者が書籍を使う場合は、周囲の教えてくれる人に聞きながら進めたり、学習サイトと併用したりするのがおすすめです。

◇HTML/CSS初心者向け書籍

・スラスラわかるHTML&CSSのきほん

HTMLとCSS入門の最初の1冊として、多くの人が勧める評価の高い1冊です。

PCさえあれば、演習の通りに進めていけばWebページを作成できます。HTMLやCSSは改定のスピードが早いですが、初心者の方がまず覚えておきたい基礎的な部分はこの本で充分学べると思います。

これに限らず、HTML/CSSを習得済みの人が近くにいる場合は「どの本がよかったですか?」と聞いてみるのもよいでしょう。

勉強会に行ってみる

コストの低さ:★★
手軽さ:★
向いてる人:人と一緒に学ぶのが嫌じゃない人・最近は未経験者向けの勉強会やもあるため、内容のレベル感が合えば比較的どんな人にも向いています

勉強会と言うと「既にデキる人しか来ないんでしょ」と思われるかもしれませんが、今は未経験者向けにWebページを作る勉強会などもよく開催されています。同じように勉強している仲間に出会えるというのは、勉強会のひとつの魅力です。

無理に仲間を作る必要はありませんが、「独学だとついさぼってしまう…」「でもスクールに通うほどのコストはかけられない…」という人は、一度勉強会に参加してみるのもよいでしょう。

ただ、個人開催の勉強会は内容が保障されるものではありませんし、有料の勉強会もありますので申し込む前には開催内容をよく確認しましょう。(そして行けなくなったら必ずキャンセルの連絡をしましょう!)

勉強会は下記のようなサービスで検索・申し込みができます。

◇勉強会が探せるサービス

connpass
f:id:paiza:20141205172032p:plain


ATEND
f:id:paiza:20141205172359p:plain


dots.
f:id:paiza:20141205173817p:plain

スクールに通う

コストの低さ:★
手軽さ:★
向いてる人:未経験から本格的に習得してWebデザイナーやエンジニアとして転職したい人・基礎だけでも急いで学びたい人(一日集中コースなどもあるので)

「独学で習得するのは無理!」「やっぱり誰かに教わりたい!」「未経験から実務でばりばり使えるようになりたい!」という方や、動画学習サイトなどにチャレンジして、独学はきついかも…と感じた人は、予算と相談しつつ、スクールへの入会を検討してもよいかと思います。

今は夜間や土日・オンライン受講に対応したスクールも多く、一日集中コースなど短期集中レッスンを実施しているスクールもありますので、仕事が忙しい人やなるべく短期間で学びたいという人でもかなり受講しやすくなっていると思います。

コストはかかりますが、仕事で必要という人は会社の金経費で通えないか確認してみましょう。土日祝日・短気集中コースやオンライン受講に対応しているスクールをご紹介します。

◇HTML/CSS初心者向け講座があるスクール

DTP・Webデザインスクール Desi
f:id:paiza:20161013171423p:plain
私も以前、DTP・Webデザインスクール Desiさんにて、HTML/CSSではありませんがPhotoshopの基本講座(一日集中)を会社の金経費で受講しました。ゆっくり丁寧に教えてくださりとてもわかりやすかったです。


INTERNET ACADEMY
f:id:paiza:20150601181212p:plain


ナガセITスクール
f:id:paiza:20150601181349p:plain

■HTML/CSS学習・応用編

既に知っている人も多いかと思いますが、GoogleChromeのデベロッパーツールをいじることも、HTML/CSSの勉強になります。

やり方は簡単で、Chromeで好きなサイトを開き、右クリック→検証で
f:id:paiza:20161013175649p:plain

このようにHTMLソースを確認することができます。
f:id:paiza:20161013175830p:plain

このソースは自由に書き換えることもできます。これはボタンのサイズを巨大に変えてみました。
f:id:paiza:20161013180446p:plain

気になるサイトのソースを見て「このタグは何だ?」と調べたり、書き換えて結果を確認してみたりするのはとても勉強になります。調べる際は、ソースの意味を辞書のように調べられるリファレンスサイトや書籍を使うとよいでしょう。

◆リファレンスサイト

とほほのWWW入門 HTMLリファレンス
f:id:paiza:20161013181324p:plain

◆書籍

・HTML5&CSS3ポケットリファレンス

■HTML/CSSの環境に必要なもの

学習サイトで学ぶ場合はブラウザ上だけでコーディング・実行できる場合も多いです。

ただ、自分で一から環境を作る!という場合も、ブラウザとエディタさえあれば使えるのがHTML/CSSのよいところです。

◆ブラウザ

何でも大丈夫ですが、先ほどご紹介したデベロッパーツールがあるChromeがおすすめです。

◆テキストエディタ

何でも大丈夫(メモ帳でも)ですが、特にHTMLコーディングに適していると思われるフリーエディタをご紹介しておきます。

◇HTML/CSSコーディングに適したフリーエディタ

ez-HTML
f:id:paiza:20161013182753p:plain


TeraPad
f:id:paiza:20161013182825p:plain


Atom
f:id:paiza:20161013182849p:plain


エディタは本当にたくさんあるので初心者の方は迷うかもしれませんが、HTML/CSSを習得済みの人が近くにいる場合は「どのエディタがよかったですか?」と聞いてみるのもよいでしょう。

Bootstrapとは?

f:id:paiza:20161013184914p:plain
HTML/CSSに興味がある方の中には、Bootstrapが気になっている方も多いと思います。

Bootstrapは、よく使われるスタイルがあらかじめ定義してあるため、簡単にページをデザインすることができるCSSのフレームワークで、Bootstrapを使えば簡単にかっこいいデザインを作ることができるため、多くのWeb開発企業で必用不可欠なものとなっています。

getbootstrap.com


paizaラーニングHTML/CSS入門編では、このBootstrapの使い方についても学ぶことができます!
paizaラーニング

■まとめ

HTML/CSSは、Webページを作成・表示をするためには欠かせない言語で、私たちがブラウザで見ているWebページのほとんどは、HTMLとCSSを使って作られています。

ブラウザとエディタさえあればすぐにコーディングと実行できるHTMLとCSSですが、習得できれば様々なWeb制作をする際に必ずと言っていいほど役に立ちますので、学んでおいて損はありません

興味のある方は、自分が気になる学習方法から挑戦してみて、ぜひHTML/CSSの楽しさに触れてみてください!

■HTML/CSS/Bootstrapの学習レッスン動画公開中!プログラミング学習コース

f:id:paiza:20160830130051j:plain
paizaでは、計232動画(2016年10月14日時点)が視聴可能な「paizaラーニング就活パック」を好評公開中です。

プログラミング未経験者から始められるHTML/CSS入門編」もございますのでぜひチャレンジしてみてください。HTML/CSSだけでなくBootstrapの使い方も学べます!

paizaラーニング就活パック」は、企業からの「こんな開発スキル・知識を身につけている学生がほしい」という要望と、ITエンジニア志望の学生からの「就活を上手に進めるためにはどうしたらいいのか」という悩みに応えるための特別コースです。

もちろん学生だけでなく、既卒の方、社会人の方、どなたでも受講いただけます。

単純なプログラミングスキルだけでなく、業界・キャリアに関する知識やWeb周辺の知識の習得、選考用ポートフォリオとなるサービス作成までを行える就職特化型の講座内容になっております。

youtu.be




paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。

paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

paizaのスキルチェック

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

Web開発が捗るFirebase入門!JavaScriptで「Webユーザー認証」機能を超お手軽に作るチュートリアル大公開!

f:id:paiza:20161003115559j:plain
どうも、まさとらん(@0310lan)です。

今回は、Webサービスなどを開発する際に、ユーザーの管理や識別などで必要になる「ユーザー認証」機能を、できるだけシンプルに作ってみたいと思います。


利用するのは、さまざまなバックエンド機能を提供するGoogleのFirebase 】です!
f:id:paiza:20161003115754j:plain

非常に多機能なサービスですが扱いはとてもシンプルで、簡単なコードを覚えてしまえば誰でも活用できるはずです!

自分でサーバーを用意する必要もなく基本的な機能は無料で使えるので今すぐ始められるのも特徴と言えるでしょう。

■始め方!

今回は、「メールアドレス」と「パスワード」でログインする一般的な「ユーザー認証」ページの作成に挑戦してみましょう!


そこで、まずはFirebaseにアクセスして新規にプロジェクトを作成します。
f:id:paiza:20161003115833j:plain


好きな「➀プロジェクト名」と、自分の「➁国名」を指定します。
f:id:paiza:20161003115853j:plain


すると、プロジェクト専用の「ダッシュボード」が表示されます!
f:id:paiza:20161003115922j:plain
「ユーザー認証設定」も含めて、多彩な機能をこの画面から管理することが可能になるわけです。


それでは、「認証機能」を設定しましょう!

方法は簡単で、まずは左メニューの「➀Auth」を選び、ログイン方法の「➁メール/パスワード」の項目を選択します。
f:id:paiza:20161003115939j:plain


あとは、「有効にする」にチェックを入れるだけでOKです!
f:id:paiza:20161003122815j:plain
たったこれだけで、Firebase側の設定はひとまず完了です!


あとは、コードを書いていくだけなのですが、その前に画面右上の「ウェブ設定」をクリックしてみてください。
f:id:paiza:20161003120740j:plain


すると、Firebaseの専用ライブラリ「firebase.js」のリンクと、初期化設定用の「config」が表示されるのでコピーしておきましょう。
f:id:paiza:20161003120750j:plain
これらの内容は、あとでプログラミングする時に必要となるので、忘れないように確認しておいてください!

■必要なファイルを準備しよう!

それでは、Firebaseを使った「ユーザー認証」プログラミングに挑戦していきましょう!


今回作るのは、最低限の機能を備えたシンプルな「認証ページ」を想定しています。
f:id:paiza:20161003120814j:plain
必要なファイルとして、HTMLを記述する「index.html」と、認証機能を記述する「app.js」をこれから作成していきます。


まずは、シンプルな「画面UI」をサクッと作りましょう!

<!-- index.html -->


<div id="input-area">


    <input id="email" type="email" placeholder="メールアドレスを入力" required/>
    <input id="password" type="password" placeholder="パスワードを入力" required/>
    <button id="login">ログイン</button>
    <button id="newuser">新規登録</button>


</div>
<button id="logout" class="hide">ログアウト</button>

「inputタグ」と「buttonタグ」で単純に作っていますが、もちろん「formタグ」を使っても問題ありません。

また、「ログアウト」用のボタンは、初回時に見えないようにCSSで隠しておくのが良いでしょう。


最後に、「bodyタグ」の最下段に先ほどコピーしておいた「firebase.js」と、これから作る「app.js」を読み込むように記述しておきます。

<script src="https://www.gstatic.com/firebasejs/3.4.1/firebase.js"></script>
<script src="app.js"></script>

これで、「index.html」をブラウザで開くと「認証ページ」が表示されるかと思います。
(「index.html」のソースコードはコチラから確認できます…)


そして、肝心の「app.js」ですが、まずはコピーしておいた初期化用の「config」を貼り付けておきましょう。

// app.js


//Firebase初期設定
var config = {
  apiKey: "【apiKey】",
  authDomain: "【Domain】",
  databaseURL: "【URL】",
  storageBucket: "【Bucket】",
  messagingSenderId: "【ID】"
};
firebase.initializeApp(config);

これで、自分の「Firebaseプロジェクト」の初期化が完了し、利用可能な状態になっています。

あとは、「ユーザー認証」に必要な機能を実装するため、どんどんコードを追加していけばOK!

■「ユーザー認証」に必要な機能の実装!

今回作る「ユーザー認証」ページでは、以下4つの機能は最低限欲しいところでしょう。

1,新しいユーザーを登録する「新規登録」ボタン
2,既存のユーザーが「ログイン」できるボタン
3,「ログアウト」ボタン
4,現在の「認証」状態を監視する機能

これらをゼロから作るのは非常に大変ですが、Firebaseには上記4つの機能を簡単なコードで実現できるAPIが提供されています。


まず、「新規登録」「ログイン」機能を実現するのは簡単で、それぞれ1行のコードを書くだけというお手軽さです!

// 新規ユーザーの登録機能
firebase.auth().createUserWithEmailAndPassword(email, password)


// 既存ユーザーのログイン機能
firebase.auth().signInWithEmailAndPassword(email, password)

引数には、フォームから取得した「メールアドレス」と「パスワード」をそのまま代入してあげればOKです。


例えば、新規登録ボタンを実装するなら、ボタンがクリックされたタイミングで「メールアドレス」と「パスワード」を取得し、先ほどのコードに代入するだけでシンプルに実装できるでしょう。

// ボタンがクリックされた時の処理
button.addEventListener('click', function(e) {


    // メールアドレス・パスワードを取得
    var email = document.getElementById('email').value;
    var password = document.getElementById('password').value;
  
    // 新規ユーザーを登録
    firebase.auth().createUserWithEmailAndPassword(email, password)


});


上記コードを「新規登録」ボタンに実装し、実際に「メールアドレス」と「パスワード」を入力してボタンをクリックしてみましょう。
f:id:paiza:20161003121213j:plain


すると、Firebaseのダッシュボードから、見事に「新規ユーザー」が登録されているのが分かります!
f:id:paiza:20161003121223j:plain
登録が済んだら、次回からは「ログイン」による認証が可能になっています。


ちなみに、登録が済んでいないのに「ログイン」しようとしたり、同じメールアドレスで「新規登録」した時などは「エラー」が発生しますが、「catch()」を追加することで処理を分岐させることも出来ます。

// 登録に失敗した時の処理
firebase.auth().createUserWithEmailAndPassword(email, password)
.catch(function(error) {


    alert('登録できません(' + error.message + ')');


});


あと必要な機能として、現在のユーザーが「ログイン状態」なのか「ログアウト状態」なのかも把握しておかなければいけません。

これをFirebaseでは、以下のコードを書くだけで最適なタイミングで監視してくれるようになります。

firebase.auth().onAuthStateChanged()


実際には、IF文などで処理を分岐させるようになるでしょう。

// 認証状態の確認
firebase.auth().onAuthStateChanged(function(user) {
    if(user) {
    
        // ログイン状態の処理
    
    }
    else {
    
        // ログアウト状態の処理
    
    }
});

ユーザーが「新規登録」や「ログイン・ログアウト」をすれば、自動的にユーザーの状態を把握し処理を分岐してくれるので便利です。

ログイン後に、ユーザーのデータを読みこんだり、別画面に遷移させたりなどいろいろ活用できると思います。


最後に、「ログアウト」機能の実装ですが、これは非常に簡単で次の1行を書くだけで実現します。

firebase.auth().signOut();

これを「ログアウト」ボタンに実装すれば、最低限の機能を搭載した「ユーザー認証」ページの完成です!


今回のサンプルデモ「ユーザー認証ページ」の全ソースコードは、コチラから確認することが出来ます!

(CSSに関しては、超軽量フレームワークのmilligram.cssを使用しています…)

paizaについて

f:id:paiza:20150730172136p:plain
paizaでは、プログラミングスキルチェック問題を多数ご用意いたしております。もちろん今回使用しているJavaScriptにも対応しておりますので、「JavaScriptでプログラミング問題を解いてみたい」「自分のスキルを試してみたい」という方にもピッタリです!

paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください!!

プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者です」「初心者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。

さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください!

■まとめ

今回は、Firebaseが持つ便利な「ユーザー認証」機能の一部をご紹介しました。

実は、もっと多彩な機能が用意されているのですが、いずれにしても今回の基本的な内容がベースになっているので、まずは自分でサンプルデモと同じページが作れるようになってから次のステップアップを目指すと良いでしょう。


また、FirebaseではTwitterやFacebookなどで認証できる「SNS認証」や、メールアドレスの検証をサポートする機能や、Webページをそのままホスティングしたりデータベースを利用したりも可能なので、ご興味ある方はぜひこれらの機能も活用してみてください!


<参考>
「Firebase」公式サイト

Web版「ユーザー認証」公式ドキュメント




paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。

paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

paizaのスキルチェック

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

初心者におすすめ!プログラミング未経験でもC言語を学べる入門書


今回は、先日秀和システムより発売されましたこれならわかる! C言語入門講座 第2版』(水口 克也[著])が、C言語をこれから勉強する入門者の方にぴったりの内容でしたのでご紹介します!

これならわかる! C言語入門講座 第2版

これならわかる! C言語入門講座 第2版

これならわかる! C言語入門講座 第2版

<内容紹介>

第1章 C言語の基礎
第2章 プログラムの基本
第3章 変数とデータ型
第4章 条件分岐
第5章 ループ処理
第6章 配列
第7章 関数
第8章 ポインタ
第9章 構造体
第10章 ゲームの作成
補足授業 Visual Studioのインストールと使い方

◆C言語について

C言語は基礎的なプログラミング言語として人気が高く、大学などの情報系学部の授業でも取り上げられることの多いプログラミング言語ですが、プログラムが長くなりがちなことなどから、これまで初心者にとっては難易度が高い言語でした。

これならわかる! C言語入門講座 第2版は、そんなプログラミング初心者でもC言語の学習が始められる書籍となっております。

中身はこんな感じで、C言語やプログラミングの基礎的なことから説明が始まります。

「初心者にとって最大の難関がポインタです!」

これならわかる! C言語入門講座 第2版、「C言語を学びたい」また「C言語を使ってプログラミング教育をしたい」という方には大変役に立つ書籍だと思いますのでご興味のある方はぜひごらんください!

これならわかる! C言語入門講座 第2版

これならわかる! C言語入門講座 第2版

■C言語のレッスン動画は無料!「ITエンジニア就活特化」プログラミング学習コース好評公開中

f:id:paiza:20160923184850p:plain
paizaでは、計154動画が視聴可能な「paizaラーニング就活パック」を好評公開中です。

プログラミング未経験者から始められるC言語入門編」は無料でごらんいただけますのでぜひチャレンジしてみてください!

paizaラーニング就活パック」は、企業からの「こんな開発スキル・知識を身につけている学生がほしい」という要望と、ITエンジニア志望の学生からの「就活を上手に進めるためにはどうしたらいいのか」という悩みに応えるための特別コースです。

単純なプログラミングスキルだけでなく、業界・キャリアに関する知識やWeb周辺の知識の習得、選考用ポートフォリオとなるサービス作成までを行える就職特化型の講座内容になっております。

youtu.be

paiza.IOについて

f:id:paiza:20150205121058p:plain
「Web上の開発環境について」のページでは、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO」についてもご紹介いただいております。

paiza.IOは、ブラウザ上でコードが書ける、コードをその場で実行できるオンラインプログラム実行環境です。ブラウザさえあれば、面倒な環境構築なしに、プログラミングができちゃいます。C言語はもちろん、他にも多数のプログラミング言語に対応しています。

ブログパーツとして使えたり、GitHub(Gist)連携なんかもできますので、ぜひpaiza.IOでどんどんコードを書いてみてください!

Online PHP/Java/C++... editor and compiler | paiza.IO




paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。

paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

paizaのスキルチェック

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

面倒な設定不要!無料でWebサイトをSSL化してホスティングする超お手軽サービス厳選まとめ!

f:id:paiza:20160920152132j:plain
どうも、まさとらん(@0310lan)です。

最近は、無料であるにも関わらず、多彩な機能を提供してくれるホスティングサービスが増えてきました。


そこで今回は、面倒な「契約」や「設定」が不要で、誰でも簡単にWebサイトを即座に公開できる優れたサービスを厳選してご紹介してみようと思います。

これからWebサイトを公開しようと考えている方は、ぜひ参考にしてみてください!

■コマンド1発でホスティングが完了するサービス!

PubStorm

f:id:paiza:20160920152307j:plain
ブラウザ上に開発環境を構築できるクラウドIDEサービス「Nitrous」のチームが提供しているサービスで、エンジニアが扱いやすいように全てコマンドラインからの操作で完結できるように設計されています。


基本的な使い方としては、Webサイトを構成するファイルを作ったら以下のコマンドを叩くだけです!

$ storm publish 

たったこれだけで、【 プロジェクト名.pubstorm.site 】というURLで即座にWebサイトが公開されます。

さらに、「独自ドメイン」「SSL対応」「バージョン管理」「Basic認証」などもすべて無料で対応してくれるスグレモノなんです!


初めて使う人でも、以下3ステップのコマンドを実行するだけで簡単に導入可能です!

$ sudo npm install -g pubstorm 
$ storm signup 
$ storm init 

「storm init」を実行した後に、公開したいWebサイトのルートフォルダを指定し、URLとなる「プロジェクト名」を設定すれば準備完了です。

あとは、Webサイトのファイルを新規追加・更新する度に「storm publish」を実行するだけというお手軽さが魅力的です。


ちなみに、いくつか便利なコマンドが用意されているのですが、特にオススメのコマンドがこちら!

$ storm config

このコマンドを実行するだけで、なんと「HTML/CSS/JavaScript」ファイルを圧縮・結合してくれて、さらに画像ファイルの最適化や「sitemap.xml」の生成まですべて自動的に対応してくれますよ!


<参考>

■GitHubと連携可能な超お手軽サービス!

Netlify

f:id:paiza:20160920152703j:plain
海外では注目度が高まっているサービスで、こちらも「独自ドメイン」「SSL対応」「バージョン管理」など、基本的には先ほどご紹介した「PubStorm」とほぼ同じことが出来るようになっています。


そのため、サイトを公開する際も以下のコマンドを実行するだけでOKです。

$ netlify deploy 

特徴的なのは、GitHubアカウントでログインして自分の「リポジトリ」と連携できる点で、この「リポジトリ」を更新する度にNetlifyへ公開したWebサイトも自動で反映されるようになるのは便利です。


さらに、初心者でも簡単に扱えるように「ドラッグ&ドロップ」に対応したGUIも提供されています。
f:id:paiza:20160920153107j:plain
Webサイトを構成するファイルを1つのフォルダに収めて、zip圧縮してアップロードするだけで即座に公開することが可能です。

他にも、Webhookによるトリガ設定やSlack・メール通知などの独特な機能も搭載しており、活用次第では強力なパートナーになると思います。


<参考>

■さらに使いやすくなった定番サービス!

GitHub Pages

f:id:paiza:20160920153411j:plain
GitHubが提供しているホスティングサービスということで、すでに利用されている方も多いのではないでしょうか。


使い方もシンプルで、自分のユーザー名を含めた以下のような「リポジトリ名」を作れば準備完了です。(ユーザー名がsampleであれば、sample.github.ioになる…)

【ユーザー名】.github.io 

あとは、このリポジトリにWebサイトを構成するファイルを「プッシュ」すれば公開されるというお手軽さ。(公開手順詳細

もちろん、独自ドメインやSSLにも対応しています。


また、上記方法以外にも最近のアップデートにより、どんなリポジトリであっても「docs」フォルダ配下にあるWebページが自動的に公開されるようになりました。
f:id:paiza:20160920153527j:plain
これにより、以下のようなURLでサイトを閲覧できるようになるわけです。

【ユーザー名】.github.io/【リポジトリ名】 


ちなみに、「Git操作」に慣れていない人でも、新しくリポジトリを作って「➀Create new file」ボタンから、直接「➁Webページのファイル」を作ってブラウザ上でプログラミングすることも可能です!
f:id:paiza:20160920153608j:plain
もちろんファイルをアップロードしても良いので、Gitコマンドを使わなくてもサイトを公開することが出来るようになるでしょう。

類似サービスとして、「GitLab」が提供するサービス「GitLab Pages」というのもあるので、ご興味ある方はぜひ参考にしてみてください!


<参考>

■Googleが提供する多機能サービス!

Firebase

f:id:paiza:20160920153812j:plain
Firebase」は、ユーザー管理やデータベースなどの「バックエンド処理」を簡単に利用できるBaaSのようなサービスですが、ホスティング機能も提供しているのが特徴です。

Googleのアカウントを持っている人であれば、誰でも無料で利用できるようになっています。


コマンドラインからシンプルに使えるように工夫されており、導入は以下のコマンドを叩くだけです。

$ sudo npm install -g firebase-tools
$ firebase login


「loginコマンド」実行後に表示されるURLをクリックすれば、Googleアカウントで認証できるようになっています。
f:id:paiza:20160920153847j:plain
もし、ローカル環境での開発でなければ、オプションを付けることで「IDコード」による認証も可能です。

$ firebase login --no-localhost 


サイトを公開する前に、初回のみ初期設定を行います。

$ firebase init 

コマンド実行後に、「Firebase」で作ったプロジェクト名を選択し、Webサイトを構成するルートフォルダを指定します。


最後に「デプロイ」コマンドを実行すれば、即座にサイトが公開されます!

$ firebase deploy 


公開されると、以下のようなURLで閲覧可能!

【プロジェクト名】.firebaseapp.com 


Firebase」の使い方を覚えれば、独自ドメインやSSL対応だけでなく、SNS認証やユーザー管理・データベースといった多彩な機能も一緒に活用できるというのが最大の魅力と言えるでしょう。
f:id:paiza:20160920153940j:plain
また、スマホアプリなどの開発にも利用でき、テストやアナリティクスのような便利機能も活用できるスグレモノです。


<参考>

■おまけ

最後に、ホスティングサービスとはちょっとジャンルが違うのですが、サイトやWebアプリなどをSSL化して簡単に公開できるサービスとして2つご紹介しておきます!

Google Apps Script(GAS)

f:id:paiza:20160920154239j:plain
以前から、Googleドライブで利用できるようになっていたのでご存知の方も多いと思いますが、今では立派な「開発環境」と言っても良いくらいの存在感があります。


基本的には、JavaScriptによる「Webアプリ開発」が出来るのですが、独自に提供されているAPIを活用することで普通のWebサイトから複雑なWebアプリまで、さまざまなサイトを作って公開できるのが特徴です。

ほとんどのGoogleサービスと連携できるうえ、フロント側で扱うJavaScriptでは取得できないような外部JSONデータを操作したり、プログラムの定期実行をさせたり…など、ユニークな使い方も出来ます。

(使い方の詳細はコチラ!)


HyperDev

f:id:paiza:20160920154322j:plain
サイトにアクセスした瞬間から、「バックエンド」と「フロントエンド」両方の開発が可能な環境をブラウザ上に構築してくれるサービス。


サーバー側はNode.jsで開発できるようになっており、「package.json」に必要なNodeモジュールを記載するだけで自動的に利用できたり、GitHubアカウントに紐付けることで永続的にプロジェクトを保存したり、エディタをカスタマイズしたり、コラボ連携したり…などが可能です。


Webサイトのプロトタイプ作りから、高度なWebアプリ開発まで柔軟に対応してくれるので知っておいて損はないはず! (参考ドキュメントはコチラ!)

paizaについて

f:id:paiza:20150730172136p:plain
paizaでは、プログラミングスキルチェック問題(14言語に対応)を多数ご用意いたしております。もちろん今回使用しているJavaScriptにも対応しておりますので、「JavaScriptでプログラミング問題を解いてみたい」「自分のスキルを試してみたい」という方にもピッタリです!

paizaでプログラミング問題を解くと、結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください!!

プログラミング問題による学習コンテンツ(paiza Learning)もございますので、「まったくのプログラミング未経験者です」「初心者なのでプログラミング学習から始めたいな」という方もぜひご利用ください。

さらに、paizaが運営する無料オンラインプログラミング実行環境サービス「paiza.IO (パイザ・アイオー)では、JavaScriptはもちろん、多数プログラミング言語のプログラミングが面倒な環境構築なしに無料でできますのでぜひご利用ください!

■まとめ

ランディングページや企業サイト、ポートフォリオなど、シンプルなWebサイトであれば今回ご紹介したサービスを十分活用できると思います。


また、Webサイトを公開したことがない人や慣れていない方は、手始めに「Netlify」のドラッグ&ドロップによる公開作業を試してみることをオススメ致します。

ちょっとずつ慣れてきたところで、他のサービスも試してみると良いでしょう。


ほとんどのサービスは有料プランも提供されており、大規模なWeb開発にも柔軟に対応できるので、ご興味ある方はぜひ参考にしてみてください!




paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。

paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

paizaのスキルチェック

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaで何する?プログラミング学習・転職・就活…エンジニアとエンジニアを目指す人のためのガイド

paizaには中途・新卒求人だけでなく、初心者から始められるプログラミング学習や転職活動・就職活動に役立つコンテンツを多数公開しております。

ここでは、どんなコンテンツが公開されているのか、それぞれ何ができるのか、どんな人におすすめなのかを解説しています。目的に合わせて参考にしていただければと思います。


【目次】

■自分のスキルに合わせて挑戦できるプログラミング問題

スキルチェック問題

f:id:paiza:20160902154936p:plain
対応言語:Java、PHP、Ruby、Python2、Python3、Perl、C、C++、C#、JavaScript、Objective-C、Scala、Go、Swift

【こんな人におすすめ】
・レベル:初心者~上級者
・自分のプログラミングスキルを客観的に知りたい!
・転職活動・就職活動を始めようと思っている
・プログラミング問題を解きたい

スキルチェック問題は、D,C,B,A,Sのレベルに分かれており、正解するとスキルランクを獲得できます。

paizaでは求人ごとに応募できるランクが規定されており、ランク獲得済みであれば書類選考なしで必ず面接に進めます

もちろん「特に転職・就職は考えていない」という方でも大丈夫!「プログラミング問題を解くのが好きだから解いてみたい」「自分のスキルをはかるためだけにやってみたい」という方でもお気軽に挑戦してみてください。

f:id:paiza:20160902154943p:plain
初歩的な内容を問う初心者向けのDランク問題も多数ご用意しておりますので、「まだプログラミングの勉強を始めたばかり…」「まだ難しい問題は解けないよ…」という方もぜひチャレンジしてみてくださいね!

■初心者でも動画で学べるプログラミング学習&就活講座

動画でプログラミングを学べるpaizaラーニング

f:id:paiza:20160902155305p:plain
現在公開中の講座:Java、PHP、Ruby、Python、C、DB/SQL、HTML/CSS/Bootstrap、JavaScript、アルゴリズム、ITエンジニアのキャリア(随時追加予定)

【こんな人におすすめ】
・レベル:初心者~中級者
・プログラミングを勉強したい人(未経験者含む)
・エンジニアを目指す就活生
・エンジニアと仕事をすることがあるのでプログラミングの基礎を知っておきたい人

paizaラーニングでは、未経験者でも解説動画とブラウザ上の実行環境を通して、コードを書きながらプログラミングを学ぶことができます。

ほとんどの講座では、paizaの人気美少女キャラクター霧島京子(cv:上間江望)が、かわいい声で優しく・楽しく・わかりやすくプログラミングを教えてくれます。(たまに弊社社長が声を当てている動画もあります…)

「霧島京子による1本3分程度のレッスン動画」に加え、「ブラウザ上でコードを書いて実行できるオンライン実行環境」「複数の練習問題」で、初心者でも無理なく習得することができます。

レッスン中は、このような画面構成で、動画を見たりブラウザ上のエディタでコーディング・実行したりすることができるようになっています!
f:id:paiza:20160726140821j:plain

一部有料(※後でご紹介いたします「就活パック」に含まれるもの)の講座もございますが、無料の講座も多数ご用意しておりますので、「プログラミングを勉強したい」という方はぜひ動画を見てみてください!

paizaラーニング就活パック

f:id:paiza:20160907180044j:plain
paizaラーニング就活パックは、企業からの「こんな開発スキル・知識を身につけている学生がほしい」という要望と、ITエンジニア志望の学生からの「就活を上手に進めるためにはどうしたらいいのか」という悩みに応えるための特別コースです。

単純なプログラミングスキルだけでなく、業界・キャリアに関する知識やWeb周辺の知識の習得、選考用ポートフォリオとなるサービス作成までを行える就職特化型の講座内容になっております。

就活パックという名前ですが、もちろん就活生以外の方でも受講していただけます!

就活パックは月額600円~の定額見放題コンテンツです。どの講座もお試し用に一部の動画が無料で見られるようになっておりますので、ぜひ試しに見てみてください!

youtu.be

■初心者でも遊べるプログラミング学習ゲーム

コードガールこれくしょん

f:id:paiza:20160802110926j:plain
公開中のコース:Java、PHP、Ruby、Python、C、C#

【こんな人におすすめ】
・レベル:初心者~中級者
・プログラミングを勉強中で、コードを書く特訓をしたい人
・paizaラーニングでプログラミングを勉強中の人
・ゲームが好きな人

コードガールこれくしょん」略して「ガルこれ」は、美少女ナビゲーターと一緒にプログラミング問題を解いて「コードガール」を集めながらストーリーを進めていくプログラミング学習ゲームコンテンツです。

プレイヤーはプログラミング力が鍛えられるクエスト形式でストーリーを進行させていきます。進行度に合わせて徐々に難易度が上がっていく設定になっているため、初心者でも安心してプログラミング問題に挑戦することが可能です!

またプログラミング初学者に向けて、前述の「paiza動画ラーニング」もゲーム内で配信しています!

経験ゼロでも楽しみながらプログラミングを学べる、今までにない”楽しい学び”を実現しました。続々と登場する個性豊かなコードガールを収集しながら、ゲーム感覚でプログラミングを学んじゃおう!
f:id:paiza:20160420122649j:plain

■プログラミング問題を解いて漫画やゲームを進めよう!

paizaオンラインハッカソン

f:id:paiza:20160902151629j:plain
対応言語:Java、PHP、Ruby、Python2、Python3、Perl、C、C++、C#、JavaScript、Objective-C、Scala、Go、Swift

【こんな人におすすめ】
・レベル:初心者~上級者
・プログラミング問題を解きたい
・プログラミングを勉強したいけど、何を作ったらいいかわからない
・人が書いたコードが見たい

paizaオンラインハッカソン略してPOHは、ストーリーやゲーム内に登場するプログラミング問題を解いていくWeb上のハッカソンです。

同じ課題に対し、他の人はどういうコードを書くんだろう?」という思いが、POHの出発地点です。気軽に参加できて、他の人のコードが見られて、楽しく勉強になるイベントを目指して定期的に開催しています。

問題内容や解法・回答コードは公開・共有をしていただいて構いません。「この問題ちょっと難しいな…」というときは、誰かの回答コードを参考に解いていただいても大丈夫です!

問題は誰でも何度でも挑戦できますが、開催中に問題を解いていただきますと抽選でプレゼントが当たったりしますので、今後もぜひご参加ください!


↓歴代POHの詳しい難易度や内容に関してはこちらをご覧ください。
paiza.hatenablog.com

■ブラウザ上であらゆるプログラミング言語のコードを実行できる!

paiza.IO

f:id:paiza:20160907165020p:plain
対応言語:C、C++、C#、Java、Python2、Python3、Ruby、Perl、PHP、JavaScript、Objective-C、Scala、Swift、Go、Haskell、CoffeeScript、Bash、Erlang、R、COBOL、VB、F#、Clojure、D、MySQL

【こんな人におすすめ】
・レベル:初心者~上級者
・プログラミングしたいけど、実行環境を作るのが大変
・いつもメインでプログラミングしている言語とは違う言語でコーディングしてみたい
・勉強会や研修でプログラミングを教えたい

無料オンラインプログラミング実行環境サービスpaiza.IO (パイザ・アイオー)」では、多数のプログラミング言語のプログラミングが面倒な環境構築なしにブラウザ上で実行できます。

「ちょっとあの言語を試してみたい」「この言語でコーディングしてみたいけど実行環境を作るのが大変だな…」という場合も大丈夫!ブラウザさえあればすぐにコーディングをして実行することができます!

書いたコードはWeb上で共有することもできますので、自分でプログラミングがしたいときはもちろん、プログラミング教育・研修や勉強会の場など、「集団相手にプログラミングを教えたい」「初心者でもコードを共有できる環境がほしい」という場合もぜひご活用ください!

■転職活動・就職活動に役立つアドバイスが満載!

転職成功ガイド/就活成功ガイド

f:id:paiza:20160907165513p:plain
【こんな人におすすめ】
・転職/就職に興味のある人
・現在、転職活動・就職活動中の人
・転職活動・就職活動があまりうまくいかず悩んでいる人

paizaを使った転職・就職活動の方法、また面接でよく聞かれる質問など、転職・就職活動の対策や効果的な進め方がわかるページです。

履歴書のフォーマットも無料でダウンロードできますので、転職活動・就職活動を始める際はぜひご覧ください!

■Web漫画

4コマ漫画「ぱいじょ!」

f:id:paiza:20160907165831p:plain

POHやガルこれにも登場する女子高生たちが、ITエンジニアを目指してプログラミングしたりしなかったりのゆるふわ学園ライフWeb4コマ漫画「ぱいじょ!」毎週月曜日に更新しています。

ぱいじょ!」はプログラミング問題を解かなくても読めます!

バックナンバーも全て無料でごらんいただけます♪




paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。

paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

paizaのスキルチェック

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

プログラミングなし・埋め込みタグのコピペだけで超簡単にWeb制作できる「POWr」の多機能ぶりに驚愕!

f:id:paiza:20160905140641j:plain
どうも、まさとらん(@0310lan)です。

Webサイトには「問い合わせフォーム」「ショップページ」「ギャラリー」「コメント」…など、さまざまなコンテンツが詰まっています。

これらのWebコンテンツをプログラミングすることなく、まるで「YouTube動画」を貼り付けるような感覚で構築できる無料サービスがあるのでご紹介しようと思います!

POWr

f:id:paiza:20160905140745j:plain
POWr」は、およそ50種以上のWebコンテンツが登録されており、「埋め込みタグ」をサイトに貼り付けるだけですぐに利用できるようになります。

細かいカスタマイズにも対応しており、1つずつのコンテンツを複数組み合わせて使うのも自由自在です。

■使い方!

それでは、実際に使いながらどのようサービスなのかを見ていきましょう! 今回は、サンプルとして「お問い合わせフォーム」を作ってみたいと思います。


まずは、サイトにアクセスして無償の「ユーザー登録」を済ませておきます。
f:id:paiza:20160905140820j:plain


登録後に、自分の「ダッシュボード(管理画面)」が表示されます。
f:id:paiza:20160905140828j:plain
ここから、さまざまなWebコンテンツを選択して「埋め込みタグ」を生成することができるようになります。


Webコンテンツを生成するには、新しくプラグインを作ります。
f:id:paiza:20160905140843j:plain


左側のカテゴリから「Forms」を選択!
f:id:paiza:20160905140851j:plain


その中にある「Contact Form」を選びましょう。
f:id:paiza:20160905140900j:plain


すると、フォームを細かくカスタマイズできる「設定」と、デザインを確認できる「プレビュー」が表示されます!
f:id:paiza:20160905140908j:plain


ゼロからフォームを作りたいので、「START FROM SCRATCH」からまずは自分のメールアドレスを設定します。
f:id:paiza:20160905140919j:plain
これにより、誰かがフォームへ入力して送信すると、ここで設定したメールアドレス宛に通知が届くようになります。


初めて設定するメールアドレスの場合は、すぐ下の「認証ボタン」をクリックするのを忘れないようにしましょう。
f:id:paiza:20160905140931j:plain
設定したメールアドレス宛に「認証確認メール」が届くので、メール内にあるボタンをクリックすれば自動的に利用可能になります。


画面下の「NEXT」ボタンをクリックしていくと、フォーム内の「テキスト」やデザインの「レイアウト」などを細かくカスタマイズすることが可能です。
f:id:paiza:20160905140942j:plain
サイトのデザインに合わせたフォームにするなど、自由な編集が自分好みにできるのが魅力的です。


テキストを日本語にして、少しだけデザインをいじればこんな感じになります。
f:id:paiza:20160905140954j:plain


最後に、今作ったプラグインを保存したら、「➀ Add to Site」ボタンをクリックして表示される「➁ 埋め込みタグ」をコピーしておきます。
f:id:paiza:20160905141004j:plain


コピーしたタグは、HTMLの好きな場所へ貼り付けるだけで準備完了です!
f:id:paiza:20160905141012j:plain


先ほど作った「フォーム」が見事に表示されたのが分かります!
f:id:paiza:20160905141019j:plain


ちなみに、画面には「編集ボタン」が表示されていると思いますが、これは自分のPCだけに表示されるもので、実際にサイトを公開すれば表示されなくなります。
f:id:paiza:20160905141029j:plain
また、この「編集ボタン」は、クリックすることで「フォーム」の中身をすぐに再編集できるようになっています。


送られてきた「問い合わせ内容」を確認するには、「ダッシュボード」にあるプラグインの「➀ 設定」から、「➁ Submissions」をクリックします。
f:id:paiza:20160905141041j:plain


すると、「フォーム」から受け取ったデータの一覧が、「ユーザー別」で表示されます!
f:id:paiza:20160905141328j:plain
このように、埋め込み用のタグを貼り付けるだけで、簡単に「お問い合わせフォーム」が完成するので、誰でも容易に扱えるのが特徴と言えるでしょう。

■まだまだある、こんなコンテンツ!

さて、これまで「フォーム」の作成事例を見てきましたが、「POWr」の素晴らしい点は同じような感覚で50種以上のコンテンツを生成できるところです!
f:id:paiza:20160905141412j:plain


例えば、自分のPayPalアカウントに紐付けて、「商品画像」と「価格」を入力するだけですぐに「ネットショップ」コンテンツを生成することも可能です!
f:id:paiza:20160905141423j:plain
こちらも当然ながら、埋め込み用のタグをHTMLに貼り付けるだけで、すぐに自分のサイトに表示させることが出来ます。


「モノ」の販売だけでなく、電子書籍などのデジタルコンテンツ用の販売ページも簡単に作れますよ!
f:id:paiza:20160905141446j:plain


ユニークなコンテンツとして、地域を指定するだけでフォーキャスト付きの「天気予報コンテンツ」を生成したり…、
f:id:paiza:20160905141455j:plain


Instagramの「ユーザー名」を入力するだけで、自動的にレスポンシブな画像ギャラリーも作れます!
f:id:paiza:20160905141518j:plain


ブログ記事の下などに「コメント機能」を追加しても面白いでしょう。
f:id:paiza:20160905141528j:plain


また、Webサービスなどに使えそうな「料金価格表」コンテンツなどもあります!
f:id:paiza:20160905141540j:plain
カスタマイズ性も高くて、中身のコンテンツ編集はもちろんのこと、PayPalと連携して課金システムを構築したり、「お試しサービス」を提供することも出来ます。


さらに、公開前のWebサービスなどで使えそうな「タイマーコンテンツ」も便利です。
f:id:paiza:20160905141559j:plain
カウントアニメーションやスタイルも編集できるし、カウントアップに変更も可能!


少し変わったコンテンツとして、ミニブログ的な使い方ができるコンテンツもあります!
f:id:paiza:20160905141627j:plain
ちょっとした記事を掲載するのであれば、十分に実用的でしょう。


他にも、SNSボタンやフィードを表示させたり、「FAQ」「ポップアップ」「グラフ」「ドキュメントファイルの埋め込み」「アンケート」…など、まだまだ紹介しきれないほど多彩なコンテンツを無料で作ることが可能です!

このようなコンテンツを自由に組み合わせれば、とてもユニークなWebページをデザインできるので非常にオススメです。

JavaScriptHTML/CSS/Bootstrapを初心者でも無料で学べる動画講座公開中!

f:id:paiza:20160830130051j:plain
動画でプログラミングが学べるpaiza learning(パイザ・ラーニング)に、無料でごらんいただけるHTML/CSS/Bootstrap入門編」および「JavaScript入門編が追加されました!!

この講座では、paizaの人気美少女キャラクター霧島京子(cv:上間江望)が、かわいい声で優しく・楽しく・わかりやすくHTML/CSS/Bootstrap・JavaScriptの使い方を教えてくれます「霧島京子による1本3分程度のレッスン動画」に加え、「ブラウザ上でコードを書いて実行できるオンライン実行環境」「複数の練習問題」で、初心者でも無理なく習得することができます。

■まとめ

POWr」で生成できるコンテンツは随時追加されており、同時にバージョンアップも活発に行われています。

プロトタイプ作りにも最適ですし、「ちょっとあの機能が欲しい…」という時にもすぐに利用できて便利だと思います。

埋め込みタグを貼り付けるだけなので、国内のブログサービスやWordPressとも相性が良いので、ご興味ある方はぜひ気軽にトライしてみてください!




paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。

paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

paizaのスキルチェック

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

プログラミング中級者から上級者への近道!ゲーム感覚で問題が解きまくれるサイト7選

f:id:paiza:20161130154842j:plain
Photo by Shane K
f:id:paiza:20140916135428p:plainこんにちは。谷口です。

paizaでは初心者向けのプログラミング学習ゲームコードガールこれくしょんや動画でプログラミングが学べるpaizaラーニングで、初心者でも学びながらプログラミング問題に挑戦できるコンテンツを公開しています。

ただ、最近は既にプログラミングができる上級者の方々から「もっと難しい問題を解きたい」「中・上級者向けの学習コンテンツがほしい」と言われることが増えてきました。

そこで今回は

・既に仕事や授業でプログラミングをしている方
・競技プログラミングに挑戦してみたい方
・勉強をして「もう初心者レベルは脱出したかな?」という方
・もっと歯ごたえのあるプログラミング問題が解きたい方

という方々におすすめの、プログラミング中級者ぐらいの方が上級者にレベルアップできるような問題に挑戦できるサイトを7件ご紹介します。

TopCoder

f:id:paiza:20150413134559p:plain
TopCoderはTopCoder社が主催する、世界中で約60万人の人々が参加する世界最大規模の競技プログラミングコンテストです。

TopCoderの各種目に参加すると、プログラミングスキルを表すレーティングと呼ばれる数値が付けられます。名前が赤で表示されている人物は「レッドコーダー」(レーティングが2200以上の上位者)と呼ばれ、世界中のITエンジニア達の中でも一目置かれる存在です。

公式サイトには「practice room」という練習用の部屋もあり、過去問を解いたり、他の人のコードを見たりすることもできますので「コンテストには参加しなくてもいい…」「問題だけ解いてみたい」という方にもかなり勉強になると思います。

HackerRank

f:id:paiza:20150413134810p:plain
HackerRankでは、企業が採用のために提示した問題を解くと、他の人と比較してランクがつけられるサービスです。

もちろん転職目的だけでなく、いろいろな問題を解いて力試しがしたいという目的でも挑戦できます。

Codeforces

f:id:paiza:20150413134916p:plain
Codeforcesは月に2~3度プログラミングコンテストが開催されているサービスです。簡単な登録さえすれば誰でもすぐに参加することができるので、気軽に挑戦できるコンテストだと思います。

AtCoder

f:id:paiza:20150413135050p:plain
AtCoderはプログラミングコンテストを開催している日本のサービスです。

練習ページでチュートリアルからコードの提出方法などが練習できるため、「プログラミングは好きだけど競プロは初めて」という方にもおすすめです。

yukicoder

f:id:paiza:20150413135706p:plain
yukicoder競技プログラミング・アルゴリズムをゆるふわに練習する目的で運営されています。

こちらも初心者ガイドがあり、チュートリアルと簡単な問題から練習を始めることができます。問題を思いついたら出題することもできます。

CodingBat

f:id:paiza:20150902150700p:plain
CodingBatでは、JavaとPythonの問題を練習することができます。その場でコードを書いて結果を判定してくれるので、とにかくたくさん問題を解いて練習がしたい人で、Java/Pythonユーザーの人にはぴったりだと思います。

paiza/paiza新卒

f:id:paiza:20150730172136p:plain
paizapaiza新卒では、スキルチェック問題を多数ご用意いたしております。

プログラミング問題を解いた結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります

問題はレベルごとに分かれており、上級者向けの問題も多数ご用意しておりますので、「自分のプログラミングスキルを客観的に知りたい」「とにかくたくさん問題が解きたい」という方は是非チャレンジしてみてください!!

■まとめ

いくつかのサイトを紹介させていただきましたが、プログラミングが好きな方、難しい問題に挑戦してみたい方は、やはり一度競技プログラミングに挑戦してみることをおすすめします。

限られた時間の中でいかに効率のよいコードを書くかということが重要なので、「厳しい時間制限がある中でのプログラミングは苦手…」と思われるかもしれませんが、リアルタイムで世界中の猛者達と対戦できるのが競プロの楽しいところでもあると思います。

もちろん自分に合った難易度のプログラミング問題を解くことはスキルアップにつながるので、「まずは練習のために解きまくってみたい」という方もぜひ挑戦してみてください!




paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。

paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

paizaのスキルチェック

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

脱3日坊主!初心者でも、プログラミング問題を楽しくたくさん解いて学習できるサービス8選

f:id:paiza:20161130155323j:plain
Photo by Kristina D.C. Hoeppner
f:id:paiza:20140916135428p:plainこんにちは。谷口です。

プログラミングの勉強をしてみたい!」という初心者の方とお話していると

・プログラミングの勉強を始めたいけど、どうやったらいいかわからない
・実際にコードを書いてみたいけど、環境構築や概念を先に理解するのはハードルが高い
・勉強を始めてみたことはあるけど、3日坊主で終わってしまった

という人が結構多いと感じます。

プログラミングは、特に最初はある程度継続して勉強を続けることが大切です。

また、プログラミングを学ぶなら、最初から全ての概念を理解したり用語を暗記したりするよりも、自分で手を動かしてプログラミングをして、書いたコードを実行してみる…という実践的な勉強が重要になってきます。

とはいえ、「手を動かすと言っても、まだ初心者なのに何をプログラミングしたらいいかわからない」という方も多いと思います。

そこで今回は、初心者でもブラウザ上でたくさんのプログラミング問題が解けるサービスをご紹介していきます。対応言語や料金制度なども表記しておきますので、プログラミング問題を解いて勉強がしたい初心者の方の参考になればと思います。

Progate

f:id:paiza:20150204125057p:plain
対応言語:HTML&CSS、PHP、JavaScript、jQuery、Ruby、Ruby on Rails、Java
料金:基本無料(有料会員980円~)

Progateは、スライドによるレッスンで基礎を学び、オンラインエディタでプログラミングをして実行結果を見ることができます。

コーディングの際は、エディタやプレビュー画面と一緒にお手本となる見本画面や解説も見ることができますので、これまで「独学でプログラミングを学ぼうとしたけど挫折した……」という人にもかなりわかりやすいと思います。

CODEPREP

f:id:paiza:20151214173200p:plain
対応言語:Ruby、PHP、HTML、CSS、JavaScript、jQuery、Canvas、Animate.css
料金:無料

CODEPREPでは、コードの穴埋め問題を解きながらプログラミングの基礎から応用、アプリ開発に関してまでを学ぶことができます。

例えば「Javascriptでつくるタイマー」や「JavaScriptでつくるおみくじ」といったブックと呼ばれるカリキュラムがあり、問題を解き進めていくと実際にそのアプリができあがりますので、実際に動くものを作ってみたい人にぴったりです!

Progra!

f:id:paiza:20151214164952p:plain
対応言語:PHP、Ruby、Python、VBA
料金:無料

Progra!も、穴埋め問題で基礎的なコードの書き方を学べるサービスです。隙間時間などに穴埋め問題を解くだけで素早く学習を進められるので、「勉強したいけどあんまりまとまった時間がとれない…」という方にもおすすめです。

CodeEval

f:id:paiza:20160530180025p:plain
対応言語:Java、C、C++、JavaScript、PHP、Ruby、Perl、Clojureなど
料金:無料

CodeEvalはプログラミング問題を解いたエンジニアのスキルを見て採用活動を行うためのサンフランシスコ発のサービスです。もちろん学習や自分の腕試しのために問題を解いてみることもできます。

問題は初級や中級といった難易度に分かれており、かなり豊富に用意されています。対応言語も18言語以上と充実しており、問題はオンラインエディタでその場で解くことができます。

「海外のサイト?難しそう!」と思うかもしれませんが、「FizzBuzz」レベルの初心者向け問題からありますので、「初心者だけどとにかくいろんな問題解いてみたい!」という人におすすめです。

Codecademy

f:id:paiza:20150203192239p:plain
対応言語:HTML/CSS、Ruby、Python、PHP、JavaScript、jQuery
料金:無料

Codecademyも、実行環境を構築しなくてもオンライン上で書いたコードを実行できるサービスです。問題を解きながら実際にWebサイトを作ったりする実践的で本格的なコースで学習をすることができ、利用ユーザーはすでに全世界で1600万人以上とも言われています。サイト内は一部のみ日本語対応していますが、ほとんどは英語のみの表示となっています。

Codeschool

f:id:paiza:20150204150903p:plain
対応言語:HTML/CSS、JavaScript、Ruby
料金:月$25(無料コンテンツもあり)

動画とコーディング問題を通して、Webアプリを作る勉強ができるCodeschoolです。動画にゾンビが出てきたりして、課題も楽しく学習できます。そしてRailsに特化した学習サイトなので、「Railsの勉強になる問題が解きたい!」という人にはかなり良いサービスだと思います。

Elevator Saga

f:id:paiza:20160530175817p:plain
対応言語:JavaScript
料金:無料

ちょっと変わり種ですが、Elevator Sagaは、エレベーターのアルゴリズムをJavaScriptで書くゲームです。

何秒間のうちに何人を運ぶなどといった条件がステージごとに決まっているので、クリアを目指してコードを追記・修正したりしながら、エレベーターの動きを制御します。

実際に画面に表示されたエレベーターの動きで実行結果がわかるので、シンプルですが意外にハマります。

paiza/paiza新卒

f:id:paiza:20150730172136p:plain
対応言語:Java, PHP, Ruby, Python2, Python3, Perl, C, C++, C#, JavaScript, Objective-C, Scala, Go, Swift
料金:無料

paizapaiza新卒では、スキルチェック問題を多数ご用意いたしております。

プログラミング問題を解いた結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、「自分のプログラミングスキルを客観的に知りたい」「とにかくたくさん問題が解きたい」という方は是非チャレンジしてみてください!!

また、paizaではより初心者の学習に特化した以下のコンテンツも提供しています。

paizaラーニング

f:id:paiza:20160726140821j:plain
対応言語:Java、Python、Ruby、PHP、C言語、SQL、JavaScript、HTML+CSS(今後追加予定)
料金:基本無料(一部有料)

paizaには、オンラインでプログラミング学習ができる「paizaラーニング」を公開しています。動画でログラミングが学習できる未経験者向けレッスンを一部無料で受講できますので、ぜひごらんください!

paizaラーニング」では、動画レッスンを見て、その場でレッスン内容をプログラミングすることで理解を深め、その後に練習問題を解いて応用力をきたえることができます。1本3分程度という短い動画なので、毎日無理なく続けることができます。

また、わからない点は弊社エンジニアに質問をして、アドバイスをもらうことができます。初歩的なところでつまずいて、やる気を失ってしまうこともありません。

コードガールこれくしょん

f:id:paiza:20160420124328j:plain
対応言語:PHP、Ruby、Python、Java、C、C#
料金:無料
paizaが公開しているコードガールこれくしょん略してガルこれは、美少女ナビゲーターと一緒にプログラミング問題を解いて「コードガール」を集めながらストーリーを進めていく、これまでにないプログラミング学習ゲームコンテンツです!

ゲーム内ではクエスト報酬やログインボーナス・ミッションクリア等の各種特典として手に入る「コイン」や「ダイヤ」を使って、ガチャでさまざまな「コードガール」を収集することができます。クエストで有利になる特殊スキルを発動させたり、「これくしょん」に入れてマイページに飾ったりと、コードガールをたくさん集めるほど楽しみ方が広がります!!

■まとめ

始めたばかりの方が難しいシステム作りや環境構築に無理して挑戦し、歯が立たないと「プログラミングってつらい……楽しくない……」という印象を抱いてしまいがちです。

プログラミング問題をたくさん解くことは、勉強になるのももちろんですが、自分で作って動かして結果を見ることで、手軽にプログラミングの楽しさを実感することができると思います。

気になるサービスがございましたらぜひ挑戦して問題を解くことで、スキルアップにつなげていただければと思います。

paizaも、多くの方に「プログラミングって楽しい、もっとやってみたい、スキルアップしていろんなことができるようになりたい!」と感じてもらえるようなサービスを作っていきたいと思います。




paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。

自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。

paizaラーニング

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

paizaのスキルチェック

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのおすすめコンテンツ

PPG proken プログラミングゲーム「初恋 プログラミング研究会〜海に行こうよ〜」 PPG Bingo プログラミングゲーム「コードレビューBINGO!!」
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.