プログラミング初心者におすすめのサービス「Progate(プロゲート)」と、Webディレクターが習得するべき言語など

先日から「Progate(プロゲート)」という、プログラミング学習サービスにはまっています。

プログラミングをゲーム感覚で学べる、初心者にとっては非常に取っ付きやすいサービスで、料金は無料で始めることができます。月額980円の有料プランに加入することで、全コースが解放される仕組みになっています。

今回はこの「Progate」の紹介と、合わせてWebディレクターが覚えておくと良いと考える、関連スキルをまとめてみました。




Progateで学べるプログラミング言語一覧

Progateでは、以下のプログラミング言語を学ぶことができます。※2018年9月現在

正確に言うと「プログラミング言語」では無いものも含まれますが、あまり深いことは考えず、分かりやすくこの表記にしている様ですね。以下に引用して紹介します。

フロントエンド系
HTML & CSS
Webページの見た目をつくる言語
JavaScript(ES6)/ JavaScript(ES5)
多様な可能性を秘めたフロントエンド言語
jQuery
効果やアニメーションを実装できるJavaScriptライブラリ
Sass
CSSをより便利に効果的に操作する言語
サーバーサイド系
PHP
Web開発に適したサーバーサイド言語
Ruby
直感的に理解しやすく、高い生産性を誇るサーバーサイド言語
Ruby on Rails5
Webサービス開発に必須のRubyフレームワーク
Java
大規模開発からモバイルアプリまで、汎用的なプログラミング言語
Python
可読性が高く、科学演算や機械学習などにも用いられるサーバーサイド言語
SQL
データの操作や分析にも使えるデータベース言語
Go
Googleが開発した人気上昇中のサーバーサイド言語
アプリ系
Swift
iOSアプリの開発に用いられる モダンかつ高速な言語
ツール系
Command Line
コマンドを用いてコンピュータを操作する開発現場では必須のスキル
Git
ソースコードのバージョン管理や 共同開発を可能にするツール

開発で有名どころだと、C#やKotlinなどはまだ無いですが、多くの言語を網羅しています。

Progateの流れ

Progateの流れを画面キャプチャーでご紹介します。例えばJavaScriptだとこんな感じになります。

タイトル画面です。

何画面かリファレンスが流れます。

クイズの様な形式で、簡単なコードを画面に入力します。正解すると経験値が貰え、次のステージに進めます。

いかがでしょうか?かなりカジュアルに楽しめる作りになっていますね。

Progateのターゲットユーザーと上手い利用の仕方

非常に取っ付きやすいサービスになっていますが、Progateをマスターすることで実務に使えるかというと、難しいかと思います。これだけで未経験からエンジニアとして就職することも、まず無理でしょう。

では、どういった人がターゲットかというと、

「プログラミングを勉強しようと書籍を買ったけど、途中で挫折してしまった人」

ではないかと思います。

僕も当てはまりますが、、、せっかくプログラミングに興味を持ち書籍を買ってみたものの、続かず途中で挫折をしてしまう話をよく聞きます。
そういった方々は、Progateで触りだけの知識でも良いので、まずはコードを書く習慣を身につける。その後に書籍などで体系的に学び、サーバを用意し実際に動く物を作ってみるのが良いでしょう。

Webディレクターにおすすめのプログラム言語など

次にWebディレクターが覚えておくと良いと僕が考える、プログラム言語などを一覧にしてみました。

HTMLとCSS

Web制作の基本ですね。これが全く分からないと、ディレクターとしては厳しいと思います。

意外と落とし穴なのが、HTMLとCSSそしてWebブラウザで出来る表現が進化しているのに、数年前の知識で止まっているパターン。基本と侮らず、定期的な学び直しが必要です。

最低限ここを理解しておかないと、制作陣が苦労することになるので、必須スキルと言えます。

JavaScript

Webディレクターが「プログラミングにまず触れてみる」という点で、最もおすすめなのはJavaScriptだと考えています。理由は以下になります。

  • Webサイト制作での使用頻度が高い…というよりも、もはや必須
  • 基本的にブラウザで動くので、大掛かりな環境構築は不要
  • 後述するGoogle Apps Scriptと習得における親和性が高い
  • 開発の規模が比較的小さい物から始められ、(完全に主観ですが)書き方も取っつきやすい

本格的にプログラミング言語を習得してみたいディレクターは、まずはJavaScriptを覚えてみてはいかがでしょうか。

正規表現

おそらくWebディレクターの多くが、文字列の整形が必要なシチュエーションを経験していると思います。

例えばこんな場合ですね。

  • クライアントから納品されたCSVファイルが、そのままエンジニアに渡せない。
  • ECサイトの商品情報インポート時に、ASPやシステムの仕様に合わせて編集が必要。
  • HTMLの一部分など、様々な事情で改変が必要になった。

こういった時に基本は検索/置換で対応しますが、そのまま処理ができないケースもあります。そこで正規表現の出番ですね。
僕は都度調べて対処していますが、知っているのといないのでは、大きく業務効率に差が出てきます。

Git

バージョン管理ツールのGitは、既に多くの開発現場で使用されています。

フロントエンドやシステムの実装が完了した後、リリースの直前でほぼ毎回あるのが、クライアントからの文言修正。
この段階だと、エンジニア陣には不具合の解消やブラッシュアップに注力をして欲しいので、量と状況にもよりますが、こういった雑務は作業範囲の取り決めをした上で、僕が巻き取ることもあります。
また、Gitなので、誤って編集してしまった箇所もログに残るので安心です。

習得しておくと、案件で役に立つと思います。

SQL

主に事業会社のディレクターが中心になりますが、Google Analyticsより精緻な分析あるいは、GAの情報だけでは難しい分析を行うため、データベース上の数値を使用するケースが多いです。

都度DBを触れるエンジニアに依頼し抽出してもらうのは、差し込み作業が多く非効率なため、例えばこちらの記事で紹介されているPIXTA社の例の様に、最近では非エンジニア職も習得する流れが増えています。

非エンジニアにSQLを布教して社内に起きた明るい変化

事業会社で働くディレクターはもちろん、受託制作メインの会社から事業会社へのキャリア転向を考えているディレクターも、覚えておいて損は無いスキルです。

ただし、サービスの運営にあたり最重要な部分なので、どの範囲までSQLを使用して良いか事前にチームでの擦り合わせは必須です。
(基本はSELECT文のみ使用可能という話になりそうですね)

Google Apps Script

Googleが自社アプリケーションのカスタマイズ用に提供している、JavaScriptをベースにしたプログラミング言語です。日本では頭文字を略して「GAS(ガス)」と呼ぶ人が多いです。

Googleのアプリケーションといっても、専門性が高いものではなく、Googleカレンダーやスプレッドシート、Gmailといった普段使用しているアプリケーションが対象になります。

僕が勤めている会社もそうですが、最近ではMicrosoft OfficeからG Suiteメインに移行している所も多いので、自分で案件に応じてカスタマイズができる様になると、Webディレクターにとって強力な武器になります。

また、クラウドなので、Googleのアカウントがあるだけで環境構築が完了。スプレッドシートをデータベース、GoogleDriveをWebサーバ的に使えるのも非常に分かりやすいです。

さらには、JavaScriptベースということもあり記法も近く、同時に習得するのも効率的だと思います。
※現状はまだES5になるので、JavaScriptの最新バージョンとの差が発生しているのが注意点です。

VBA

こちらは、マイクロソフトがOffice用に提供しているプログラミング言語になります。

特に常駐系の案件や一般企業のWeb担当の方が遭遇するケースが多いですが、クラウド系のツールが使用できない会社の場合は、Google Apps Scriptの代わりに習得すると、業務効率化を図れます。

Microsoft Officeが使用できない会社はまず無いので、ある意味環境構築も不要と言えます。

また、今年の春頃にマイクロソフトのExcel開発チームがアンケートを実施し、ExcelにPythonの統合を検討していると話題になりました。

Python as an Excel scripting language

非常に気になる動きですね。


基本的に業務でコードを書かないWebディレクターが、プログラミングを覚える理由は、次の2つに集約されます。

  • ディレクション用にツールを作り(使い)業務の効率化を図るため
  • エンジニアとより近い目線でコミュニケーションを取るため

これを前提に、業務での必要性やキャリアの方向性に応じて、覚える物を取捨選択をしていけば良いのではないでしょうか。