趣味で宇宙開発の技術広報課長の課外授業：Web系メディア開発はじめる

##はじめに
この記事は趣味で宇宙開発をしている団体「[リーマンサット・プロジェクト](https://www.rymansat.com)」がお送りする[新春アドベントカレンダー](https://qiita.com/rsp-dgkz/items/a6ff573c07dbe2c6166f)です。

私は広報部で**「技術広報」**課長をやっています。技術部と広報部の人をつないだり、内部メディアや外部メディアに営業もしつつ、自ら書きつつ、宇宙開発技術について発信しています（[「宇宙技術広報をはじめる」](https://note.com/kaitos_cosmos/n/n77ce2788d928)）。

やっぱり技術が好き！ものづくりもしたいということで超小型人工衛星**「RSP-01」**プロジェクトにも参加しています。C&DH系でプログラミング、人工衛星運用外部サイト作成でウェブ系エンジニアリングという領域に触発され、**今年の新年の決意のひとつは、「自分もメディアをつくって運用しよう！」**と決めました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529801/93fd2f17-88a0-59fa-9a16-f022f7b0f504.png)
## メディアの種類、手段は？
もともと、**メディア**（media）は、mediumの複数形で、ヒトモノコトの「媒体」、「中間」という意味から来ているそうです。私のなかでは、メディアとは**「人から人へ情報を伝える媒体」**と定義しています。

メディアの種類は、いわゆる「マスメディア」とよばれる①テレビ、②新聞、③ラジオ、④雑誌等と、「ネットワークメディア」とよばれるインターネット媒体のものがあるのではないかと思います。

どれが身近な手段なのかと考えてみると、テレビにちょろっと出たり、新聞雑誌に記事を書いた経験からすると不特定多数の幅広い年代の人に届く力は**マスメディア**は凄まじいです。しかし自分が発信したいことを発信するのが難しい。一方、**ネットワークメディア**であれば、FBやTwitterなどのソーシャルメディアやYouTube, Webサイトで自分のペースで自分のスタイルを発信できる受信できるメディアが作れます。
## ソーシャルメディアは同窓会、YouTubeはステージショー、WebサイトはHomeあるいは3rd Place
ネットワークメディアのなかで、私は**Facebook,Blogger**をほぼ創設当時くらいから利用しているのですが、そもそも利用する目的が海外留学の友人とつながり近況報告や情報交換するためでした。そのためこれらは私の中では完全に同窓会的メディアとして使っています。
**Twitter**はつぶやきって双方向だとしんどいなと思い基本やっておらず、**Instagram**や**Discord**にいたっては仲のいい友人のギャラリー訪問な感覚です。**YouTube**となるとステージショーという感覚です。
そんななか、**外部向けWebサイト**は、HomePageというようにインターネット上のマイホームか、コンテンツによってはサードプレイスにもなれるところだと考えています。

## 開発したいのはメディアなのか？　コンテンツなのか？
**メディア**は「人から人へ情報を伝える媒体」なので、Webサイトをつくる場合には、Web環境、web作成ツール、Webデザインツールなどを揃える必要があります。

**コンテンツ**は「伝えたい情報」なので、そこに載せたい情報は、誰を対象にどういう内容にするのかという構想やデザイン、テキスト記事や動画などを揃える必要があります。**コンテンツだけつくって手軽に発信したい！**という場合は、次のメディアツールを使えば簡単に十分にできます。
### [note](https://note.jp/)
SNSと同じくらいの手軽さで無料でweb記事を公開、情報発信できるサイト。とにかく誰でもが表現できるやさしい場所。
###[WordPress](https://wordpress.com/ja/create/)
webサイトやブログをプログラミング技術なくても構築、配信できるサイト。有料プランであれば個性的なサイトも手軽に作成できる。

最初は自分が発信したい宇宙技術開発のコンテンツを載せるホームをつくって、どんどんコンテンツを増やすということならばと**note**や**WordPress**を使ってみました。

次第に、こういう内容はこういう感じに発信したい、こんな機能は足せないのかなというのがでてきて、**うーんやっぱりwebごとつくってみたいな、こういうwebデザインにしたいなと**。そうなるとWeb開発に必要なことを知る必要があります。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529801/d83b6d10-6be5-64f1-1daa-9e523244b369.png)

## Web開発に最低限必要な基礎知識ってなんだろう？
とりあえず、まずはここから学んで「手を動かしてください」とエンジニアからアドバイスいただいたのは、以下の科目でした。
①コンピュータサイエンス基礎全般（できればUnixの基礎全般もざらっと）
②HTML/CSS基礎
③JavaScript基礎
④GitとGit Hubの基礎
⑤ウェブデザインの基礎（イラストレーターなど）

## Web開発の基礎をどう学ぶ？　①通学スクールのメリット、デメリット
私は社会科学系が専門なのでwebサイト制作経験は、むかし大学時代にIBMのThinkPadのMS-DOSやWindows 3.1環境で統計データ処理や専門の国際軍事安全保障系の機関や研究論文、資料をまとめる非常に限定したまとめサイトを作成していたな、CSS使ったかな？な程度です。だったら、スクールに通った方が手っ取り早いかなと思い、体験授業を受けてみました。

**メリット**
- ウェブ開発エンジニアを目指す講座なので、内容もカリキュラムも充実
- 一通りやり遂げればweb系エンジニアとしての基礎スキルをマスターできる
- わからないところ、行き詰まったところをすぐ質問できる
- スケジューリングが管理されているので挫折しにくい
- 自分が習いたいこと（開発基礎科目、デザインなど）をピンポイントで選択できる
**デメリット**
- お金がかかる
- 時間も場所も拘束される（いいなと思ったスクールは都心だったりする）
- 自分のPCでできない
- 意外とおすすめされない

デメリットに関しては完全に個人の事情に合うかにすぎないのですが、私は東京郊外で働くサラリーマンが趣味で学ぶには時間と場所が拘束されるのは厳しいなと思いました。
## ②オンライン学習　ProgateとUdemy、ドットインストール
秋ごろ、リーマンサット・プロジェクトメンバーから、今ならサイバー・ウィークでセールだよと紹介されたのがオンラインで学べるツールの**Udemy**そして**Progate**と**ドットインストール**です。

### [Udemy](https://www.udemy.com/)
**メリット**
- とにかく選択できる講座が豊富。コンテンツジャンルも幅広い。
- コンピューターサイエンスやUnixnなど総合的、体系的な基礎講座は学びやすい。
- 自分が習いたいこと（開発基礎科目、デザインなど）をピンポイントで選択できる
**デメリット**
- スクール形式と同じオンライン座学講義なので、インタラクティブではない。
- 値段設定や講座内容やスタイルがまちまち。

私は、まるっと学べるwebエンジニア講座と初心者向けの人工知能と機械学習のコースの２つを購入してみました。
###[Progate](https://prog-8.com)
**メリット**
- [Web開発パス](https://prog-8.com/courses)がわかりやすい
- 具体的なプログラム（HTML/CSS、JavaScript等）に関する学ぶときの実践（手を動かす）を重視している
- コードを書くために抑えておくべきポイント整理に対するインセンティブやガイドラインが豊富
- 継続して学ぼうとするモチベーションを維持するためのエンカレッジ機能が多彩
**デメリット**
- 講座やコース内容がまだ限定的。

###[ドットインストール](https://dotinstall.com/)
**メリット**
- 初心者にわかりやすい
- 実際にプログラミング作品（[javaScriptで神経衰弱をつくってみよう](https://dotinstall.com/lessons/memory_js_v4)等）をつくりあげるレッスンも多い
**デメリット**
- レッスンは全て初心者向きでまだ開発中の講座も多い。

## プログラミング感覚を得るには[Progate](https://prog-8.com)が楽しい！
Progateのメリットは上に上げたとおりですが、とにかくweb開発のパスを明確にしながら、基礎知識を初級、中級、上級とわかりやすくレベルアップさせるコンテンツをとりながら、コツコツ学べるように構成されているので、モチベーションあがるし、常に次のステップがみえているので取り組みやすかったです。

HTML/CSSの基礎講座から始めたのですが、各章の説明のポイント整理はごく簡潔にし、手でコードを書く演習をさせるドリル形式でした。その際にもIndexとCSSとwebサイトプレビューが常に操作できるような設定になっており、ノート型PCの私でも画面の切り替えの煩雑さもなく、とにかく演習をしながら全体像も意識して確認できるというのが学びやすかったです。

次にJavaScriptになってプログラミングスタイルも様式も変わるのですが、なんとなくプログラミングを書くという感覚がわかってきて、言語や文法は変わるがお作法は同じかもという風になってきました。

## ちょっとなんかつくれたという感覚を得るには、[Udemy](https://www.udemy.com/)や[ドットインストール](https://dotinstall.com/)が楽しい！
学ぶよりつくってみよう、というレッスンがあるのは、こちら。
そもそも私は「今年は自分のメディアをつくる」という目標があるので、さっさとWEBサイト構築に向けて学んでつくるに進むべきなんですが、学ぶ段階は、やはり飽きてきます。それなので、へえ、この言語でこういうふうに遊べるのか！とか、じゃあこういうことやりたいときにはこれが使えるの？みたいな発見や妄想が生まれる、とにかく「動くものをつくりたい」という時にはいいなと思いました。

やはり、**ひとつの教材よりは複数の教材を自分の学習環境も日々まちまちなので、今日はこれをしようと場合わけして使って学ぶ**と続く気がします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529801/bde1aa7d-ea0d-b0c6-ab8d-68b0901d0600.png)

## Web系エンジニアと話す機会をつくろう！
なにから？どうやって？どうして？どうしたら？と独学で学ぶとわからないことがゆきだるま式にでてきますし、web開発作業って結構孤独だなと思うことが時々あります。
こういう時、エンジニアの人はどうしているのだろう？というのは、ひとりで学び作業しているときにはわかりません。

リーマンサットの超小型人工衛星RSP-01の運用外部サイトを製作するときいたとき、Web開発の実装をやりたい！　独学頑張ってでも担当しますと言いたいと思って手を挙げた時に不安がなかったわけではありません。

でも、リーマンサットの技術部メンバーであるエンジニアの方のそんな人に対して、初心者向けのオンライン勉強会やもくもく会などを開催するなどサポートしてくれています。

リーマンサットは全メンバーが趣味で活動しているので、これは良心と善意とご好意があって成り立っていること。全くの初心者が学ぶことに対して向き合ってくださるエンジニアがいること、そうした環境にいられることって本当にありがたいと思います。

---
明日は @rhiro「アポロ計画におけるマトリックス組織」についてです。

リーマンサット・プロジェクトは「普通の人が集まって宇宙開発しよう」を合言葉に活動をしている民間団体です。
興味を持たれた方は [https://www.rymansat.com/join](https://www.rymansat.com/join) からお気軽にどうぞ。