アイプランニングでWeb入門するときに利用している教材など
アイプランニングではB2Bのデスクトップアプリケーション開発が主流ですが、 Webシステムの開発を引き受けることも多くなっています。 当然人材育成が必要になるのですが、現時点でIPLで教育に使っている・使う予定のある教材を紹介します。
Webの基礎知識
まずはHTMLとCSSの学習から始め、サーバ・クライアントのイメージとDOMについての理解のベースを作ります。 MDNは現在最も信頼のおける学習リソースとなっています。
Webのローレベル
Webアプリエンジニアはいきなりフレームワークから学ぶことも多いと思うのですが、 実務ではChrome DevToolsでリクエストとにらめっこということも多くあります。 また、ローレベルをかみ砕いた網羅的な資料はネット上だと見つけづらいということもあり、書籍を持っておくことをお勧めします。
図解入門TCP/IP 仕組み・動作が見てわかる | みやた ひろし | コンピュータ・IT | Kindleストア | Amazon
TCP/IPメインの書籍ですが、HTTPに関しても説明されています。
O'Reilly Japan - Real World HTTP ミニ版
こちらは同名書籍のミニ版（無料）ですが、概略をつかむのに良い資料です。 歴史も絡めてHTTPの進化について説明されています。
モダンJavaScriptの基礎
JavaScriptはいつでも変化期にあるため、いつ書かれたものであるかが重要になってきます。 とはいえモダンブラウザが主流になっていくのであれば、古い知識はノイズになってくることでしょう。
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript PrimerはECMAScriptの仕様策定にかかわった方が著者であり、信頼のおける入門サイトです。 ただし少し内容が詳細すぎる面もあり、できればメンターが少しかみ砕くようにしたほうが良いでしょう。 例えば非同期処理・コールバック・Promiseの章などはもともと易しくできない内容なので難しいのですが、 あまりマスターすることに拘泥しないほうが良いかもしれません。
タートルグラフィックスで「納品体験」
毎年恒例の1dayインターンですが、前年まで実施していた「レゴで学ぶスクラム」はコロナ対策の為 実施不可能になってしまいました。好評だったのに残念です…
レゴスクラムは元ネタが存在するため楽だったのですが、前例のない状況下ですので自分で考えなくてはなりません。 頭を捻った末に生まれたのがこの「タートルグラフィックスで納品体験」です。
概要
Scratchでタートルグラフィックスを作り、それをクリスマスツリーに飾ります。
使うツール
スライド
目的
- forループを使って成果物を作る
- 見積もりを体験する
- ペアプログラミングを体験する
対象
- プログラミング未経験者２～４名
- ペアプロを実施するために偶数名が望ましいです。
- 所要時間１．５時間ほど
準備
- プロジェクター（主催者のPCを映す）
- 人数分のPC
- 大きめの正方形の付箋
- ホワイトボード
流れ
1. 準備運動
- まずScratchの使い方を学んでもらいます。Code.orgの#5あたりまで進めます。
- Code.orgの#10を開き、自由な図形を描けるようにします。
- 主催者はタートル配置ツールをプロジェクターに映しておきます。
2. ツリーのアイデア出し
- ホワイトボードにクリスマスツリーを書き、メンバーに好きにオーナメントを書いてもらいます。合計１０個くらいあると良いと思います。
- オーナメントを大きめの付箋に転記してもらい、ホワイトボードに張り出します。簡単・難しいで分けておくと良いでしょう。
3. 計画
- 10分間の時間制限を設けることを説明します。
- メンバーの名前で区切りを作り、メンバー間で相談し10分間でできそうな量をアサインしてもらいます。
4. 作業
- Code.org上に図形を作ってもらいます。
- 10分タイマーをスタートし、各自作業を実施します。
5. 納品
- 作成が完了したら、納品に移ります。
- エディタ右上の「コードの表示」からJavaScriptコードを出力できますので、コピーしてもらってください。
- チャットツール等で納品コードを主催者に送ってもらいます。
- タートル配置ツールを使い、オーナメントを指定の位置に配置してください。
6. タイムボックスを繰り返す
- 10分間を繰り返します。
- 10分間の作業が完了するたびに、作業の見直しを行ってください。
- 予定に無理があれば、作るオーナメントを変更しても問題ありません。
- オーナメント自体の形状を見直してもよいでしょう。
7. ペアプログラミング
- タイムボックスを２度ほど回したタイミングで、作業者とアドバイスをする人でペアを作り、共同作業で一つのオーナメントを作ってもらいます。
- ホワイトボードを使うように誘導すると連携が生まれやすいです。
8. まとめ
- それぞれ、感想を言ってもらいましょう。
- ワークショップを通じて、作業の振り分けや見積もりが可能になっているはずですので、その点に言及します。
- 最後に、ツリーの出来栄え、メンバーの努力とアイデアを称賛しましょう。そもそも初めて使うツールで、やったことのないタートルグラフィックスを使って手探りで成果物を作れたというのは素晴らしいことです。達成率や形状の美しさは二の次です。
Tips
オーナメントのアイデア出しで数を出すための工夫
- アイデア出しのコツは、出たアイデアを批評せず受け入れることです。
- 「渋谷に飾るクリスマスツリーだから」などと言っておくと、オーナメントのネタ出しがしやすくなります。
- 作る時のことを考えて単純な形を選びがちですが、自由な発想で書くように誘導してください。
- 難しい形状ばかりになってしまった時は、詰まってしまったときの逃げ道として簡単な形状を人数分足してあげてください。
注意点
- 見積もり体験がこのワークショップの目的です。作業スピードや品質などは目的ではないので、言及するときにはメンバーに対する攻撃にならないよう注意してください。
- 個々人の適正や慣れにより作業スピードは大きく異なります。優劣を付けるようなことを言うべきではありませんし、むしろフォローしてあげてください。
- タスクの完遂にこだわらないでください。形状により大きく難易度が変わるので、たいてい無理です。
- ペアプログラミングが一番盛り上がります。これはフラットな関係がキーになっているようで、主催者が上から介入するとたいてい盛り下がりますので注意してください。
その他技術的なこと
- タートル配置ツールは内製ツールです。Code.orgの吐くコードに対応するAPIを自前実装しています。色変え・線替え・スタンプなどには対応していません。
CSSレイアウト入門（社内ワークショップ用資料）
本記事では、CSSレイアウトの基礎とレスポンシブレイアウトについて学ぶ事ができます。
利用方法と対象読者層
この記事は社内CSSワークショップのために書かれた記事ですが、教育用途などにご自由にご利用ください。説明に1～1.5時間要します。
対象はHTML, CSSの基礎を知っている方です。div等代表的な要素を知っている、CSSセレクタがわかるレベルを想定しています。
基本的にはMDNの下記の記事を下敷きにしています。内容はなるべく噛み砕き、利用頻度の低い手法は省略しましたが、記載に食い違いがある場合はMDN側を正と考えてください。
通常フロー
ブラウザはレイアウトの関するCSSが未指定の場合でも、要素を順に並べていく「通常フロー」を行います。 このデフォルトの挙動を理解して活用するようにすると、無駄の少ないCSSを書くことに繋がります。
通常フローは、基本的に文字を書く方向に要素を詰めていきます。日本では上から下、左から右です。
並べ方には、要素の種別が重要になります。代表的な3つを紹介します。
block要素
block要素は、div要素やp要素にデフォルトで設定されている種別です。
inline-block要素
block要素にdisplay: inline-blockを設定することで、この挙動をさせることができます。
また、img要素はこのinline-block要素相当の挙動をするとみなせます（歴史的経緯によりこの言い方になります）。
inline要素
サンプルで試してみる
サンプルを開いて、displayオプションのコメントアウト部分を切り替えて、説明通りの挙動になっているか確認してみてください。
flexbox
flexboxは、伸縮するレイアウトを作る際によく使われるレイアウト方法です。
通常フローで作れないレイアウトは、大抵これで作ることができます（テーブルのような特殊なレイアウトを除く）。 （より高度なレイアウトをスマートに作るには「gridレイアウト」を使うこともできます）
例題
上記のコードを編集して、下記の画像のようなレイアウトを作ってみてください。
ヒント：下記の３行を使います。
display: flex; width: 200px; flex: 1;
position: absolute
上記のレイアウトから少し外れたようなレイアウトは「position: absolute」で作ることができます。
基準指定した要素から相対位置でボックスを配置することができます。大抵のケースでは親要素を基準にします。親要素に「position: relative」を指定してください。
例えば、下記のように左上にタグを貼り付けたようなレイアウトを作ることができます。
なお、absolute指定した要素に続く要素は下に潜りこむことに注意してください。
レスポンシブレイアウト
レスポンシブレイアウトは、画面サイズに応じてレイアウトを切り替える手法です。例えば下記のようにスマホとデスクトップで段組みを切り替えるのがよくある例です。
これはメディアクエリを使うことでCSSのみで実現可能です。 試しに、下記のようなレイアウトを作ってみましょう。
例題はスマホレイアウトのみ実装してありますので、600px以上はレイアウトを変更するようにしてください。メディアクエリは下記のように書きます。
@media screen and (min-width: 600px) {
<!-- ここに上書きしたいCSSを書く -->
}
メディアクエリのmin-widthを使うことで、閾値以上の画面幅の場合に上書き適用するCSSを設定します。CSSは基本的に後勝ちになりますので、メディアクエリはCSSの末尾に書くようにしてください。
- .parentに
display: flex;を適用 - .boxの背景色を変更し、
flex: 1とmargin: 5px;を指定する
上記の方針はモバイルファーストアプローチと呼びます。まずスマホ向けの画面を作り、デスクトップ向けの段組み等を使った複雑なレイアウトをメディアクエリで後付します。
スマホ向けレイアウトは通常フローで済むケースも多いため、デスクトップ向けの画面を特殊扱いしたほうが、デフォルト値を活用したクリーンなコードになりやすいです。
まとめ
上記までで、基本的なレイアウトとレスポンシブレイアウト実装の基礎を学びました。より詳しいことを知りたい場合はMDNの記事を参照してください。
Node.jsとnpmを使ってみよう
アイプランニングはWeb系企業ではありませんが、Web技術に関しての社内講座やハンズオンも積極的に実施しています。 Node.js入門として一般の方にも参考にしていただけるよう、一部を公開いたします。
Node.jsとは
Node.jsはサーバサイドJavaScriptランタイムです。たとえば、下記のようにJavaScriptファイルを実行することができます。
node main.js
ブラウザもJavaScriptランタイムの一つですが、Node.jsではセキュリティ上の理由でブラウザにはない「ファイルシステムへのアクセス」などの機能を使うことができます。
const fs = require("fs");
fs.writeFileSync("out.txt", "Hello, World");
fsはNode.jsにしか存在しないAPIで、ファイルシステム周りのアクセスを行えます。
上記スクリプトをNode.js上で実行すると、out.txtというファイルにHello, Worldが書き込まれます。
Node.jsのインストールは下記より行ってください。
npm
npmは「パッケージマネージャ」という種類のツールで、Node.jsに同梱されています。
npm上に多数の便利なライブラリやツールが登録されており、気軽に使うことができます。また、登録も個人が自由に行うことができます。
Node.jsの人気の理由の一つは、npm上に公開されているツール群を使いたいというニーズがあるためです。
npm上に登録されているツールを使ってみよう
実際に使ってみましょう。
Less
LessはCSSメタ言語という種類の言語・ツールです。Lessは変数・mixinなどの付加機能を使うことができます。最終的にはCSSファイルに変換されます。
下記のコマンドでインストールできます。
npm install -g less
下記のファイルをstyle.lessという名前で保存してください。
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
下記でlessファイルをcssファイルにコンパイルできます。
lessc style.less style.css
出力されたCSSで、変数が解決されていることを確認してください。
#header { width: 10px; height: 20px; }
変数は最近のCSSの仕様に盛り込まれているのと、業界的にはSassというLessに似たメタ言語が人気なため、Lessの名前を聞くことが最近は減っていますが、業務と要件に合ったものを使えばOKです。
TypeScript
TypeScriptは、JavaScriptの強化を目的とした言語です。特に型周りの機能強化が特徴です。 こちらも最終的にはJavaScriptに変換されます。
コンパイラをインストールしましょう。
npm install -g typescript
main.tsファイルを作成します。
function add(x, y) {
return x + y
}
console.log(add(1, 2))
下記を実行してコンパイルします。
tsc main.ts
ほぼ同じ内容のmain.jsが生成されたことを確認してください。
次に、型に関する機能を確認してみましょう。下記のようにmain.tsを書き換えてください。
function add(x: number, y: number) {
return x + y
}
console.log(add(1, 2))
コンパイルして、JSファイル自体は内容が変わらないことを確認してください。
TSファイルでは引数に number 型しか受け取らないようになっていますが、JSファイルに出力する時点でこの型に関する注釈は削除されます。
次に、下記のように引数を一つ文字列に変更してみてください。
console.log(add("1", 2))
すると、コンパイル自体が通らなくなります。
実装に矛盾のあるコードのコンパイルを通さないことは非常に重要です。 APIの利用方法のミス、リファクタリング時のデグレードなどのヒューマンエラーを防止することができ、 「実装が間違っているがなんとなく動いているコード」を早期発見することにも繋がります。
この先の学習について
- ここでは簡単のため
install -gを行いましたが、これはグローバルインストールというもので、もう少し行儀の良い方法としてはローカルインストールがあります。 - ローカルインストールについては
package.jsonあるいはnode_modulesについての理解が必要です。下記記事を参考にしてみてください。 - Node.js自体を深く学習するためには、サーバサイドアプリケーションを一つ作ってみると良いでしょう。Expressというサーバサイドフレームワークがおすすめです。
アイプランニングのインターン資料を公開します
インターンで実施しているプログラミング講座の資料を一般公開します。
インターンや新卒社員向けの講座コンテンツは多いですが、ゼロ知識から読めるものは数が限られます。 インターンでの講座受講者や、他社のセミナーなどにもぜひご活用ください。
プログラミングコース
プログラミングコースは「タイピングができる」レベルの受講者を対象に、Webアプリ開発を簡易体験できるコースです。
スライド資料
講座資料＆チュートリアル
業界研究コース
業界研究コースは、簡易版のプログラミング概要と、レゴスクラムの体験コースを含んでいます。
簡易版プログラミング概要のスライドです。
実施者向けの解説記事を公開しています。
スライドのPDFも公開しています。
https://iplanning.heteml.net/intern/ipl-seminar-r5-lego.pdf
プログラミング概要の資料に関しては、内製アプリを含むため非公開にしています。
CodePenを使ってWeb開発を体験する 後編（Vue.js）
Vue.jsのセットアップ
引き続き、CodePen上で作業を行います。
画面右上のSettingsを選択します。
ダイアログが表示されたら、JavaScriptタブを選択し、Search CDNjs欄にvueと入力します。
するとリストにvueが表示されますので選択します。
上記のようになればOKです。Closeを選択してください。
Vue.jsをサンプルで学ぼう
ここから先は、下記の繰り返しでVue.jsの役割について理解します。
- まずサンプルアプリを触ってみる
- サンプルアプリの完成一歩手前のものを開く
- 説明に従って完成させる
最初のサンプル
See the Pen Basic Binding by Robert (@ipl068) on CodePen.
まず、JS欄のdata内に下記のように「nameデータ」を記載します。今回はnameデータにはJiroさんを入力します。
次に、HTML欄のTaroと書かれている部分を{{name}}に置き換えてください。
{{ name }}のように書くことで、表示部分とdataを「紐付け」ることができます。
（Vue.jsはこれをバインディングという用語で呼びます）
name: "Taro"の部分を変更すると、名前が変更されることを確認してください。
入力欄を作る
See the Pen Basic: v-model by Robert (@ipl068) on CodePen.
新たにinputタグというものを学びます。
上記のように書くと、文字入力欄を作ることができます。
v-modelを使うと、data内の文字列をこのinputで変更することができます。
HTMLを下記のように書き換えてみましょう。
文字入力欄を変更すると、下記のように書き換わることを確認してください。
Vue.jsが便利なのは、このような「紐付け」がとても簡単に行えることです。 プログラミングでは「紐付け」を適切に行うことで便利なものを作ることができます。
はんこメーカー
上記で学んだことを使って、実用的？なものを作ってみましょう。
See the Pen hanko-simple by Robert (@ipl068) on CodePen.
HTMLでは、円などの図形も書くことができます（SVGといいます）。 また、今回はCSSを工夫して縦書きの文字も書いています。
さて、名前を自由に変更可能にしましょう。
下記のようにv-modelと{{name}}を書いてください。
これではんこの氏名を自由に変えられるようになりました。
次に、色を自由に変更できるようにしましょう。
inputの種類の中には、色を選ぶものもあります。
type="color"を使います。
クリックすると、色を選択するダイアログが表示されます。
さて、ここで選んだ色をはんこに反映させたいので、下記のように変更します。
これでinputとcolorデータがひも付きました。 次に、文字色や円の色にcolorデータを紐付けます。
:（コロン）を紐付けたい項目の前に付けます。=の後に紐付けたいデータ名を入れます（今回はcolor）
これで、好きな色のはんこが作れるようになりました。 ここまで、必要なのはただ「つなげる」ことだけです。
会いたくて震えるやつ
See the Pen 会いたくて震える by Robert (@ipl068) on CodePen.
さて、「ボタンを押すとなにかする」というものを作ってみたいと思います。 下記のように書くとボタンを作ることができます。
ボタンを押すとなにか起きるようにするには、@clickを使います。下記のように書き加えてください。
ボタンをクリックすると、furueruデータにtrueという値が入ります。ボタンを押すと絵文字が震えます。
すでに下記のようなコードを組んであります。v-ifというのは、値が「true」だった場合に表示するようにするものです。今回の場合は、furueruデータがtrueだった時に震える絵文字を表示するようにしてあります。
逆に、furueruデータが逆のfalseだった場合には、震えない絵文字を表示しています。
さて、震えを止められるようにしましょう。 下記のように書き加えてください。
これで震えを止められるようになりました。
MP3プレーヤー
See the Pen MP3 Player by Robert (@ipl068) on CodePen.
audioタグは小型のオーディオプレーヤーを表示するタグです。srcにmp3を指定すると、再生をすることができます。
今回はsrcを変更すると自動的に再生が始まるように「autoplay」を付けています。
では、曲を切り替えられるようにしましょう。下記のように変更してください。
その後、buttonタグに書いてある @clickの中にURLをコピペします。
これで、ボタンがクリックされたときにselectedにmp3ファイルが指定されるようになります。
すべて指定すると、ボタンに応じて曲が切り替わるようになります。
画像ビューア
ここから先は少し難しくなります。 JavaScriptの文法の一つ「リスト（配列）」が出てきます。 さらっと流しますが、理解のためにJavaScriptの初心者向けの本を読んでみてください。
See the Pen Cat Viewer by Robert (@ipl068) on CodePen.
この部分が「リスト」です。お気に入りの猫の写真をたくさんリストに入れてあります。
このリストを一覧表示できるようにしましょう。 下記のように記入します。
これで、下記のように写真のリストが表示されるようになります。
v-forが登場しました。
これはリストの内容（この場合はcats）を取り出して、その数画像を作ってくれるものです。
取り出された一つ分は「cat」に入ります。
srcに画像URLを入れることで、それぞれの画像を表示することができます。
では、縮小画像をクリックしたら、拡大画像を表示するように変更しましょう。
拡大画像の方をzoomCatデータに紐付け、縮小画像をクリックしたときにzoomCatデータにcatを移します。 クリックして、画像が切り替わることを確認してください。
一工夫として、選択されている縮小画像がわかるようにしたいです。下記のように書きます。
これは、zoomCatとcatの内容が同じであれば、その画像にactiveというクラスをつけるものです。やや慣れが必要ですが、使いこなすと下記のように選択されている画像がわかりやすくなります。
推奨書籍
本稿著者のおすすめ書籍をリストアップします。すべて初心者向けです。また、2019年現在で古い記載が無いかどうかもチェック済みです。
- JavaScript 1年生
- かなり噛み砕いて書かれた Webアプリ作成の入門書です。
- 知識ゼロからはじめるゆっくり・ていねいJavaScript
- 前述の本よりもう少し事細かに幅広く書かれていますが、専門用語なども控えめで読みやすいです。
- 動かして学ぶ！Vue.js開発入門
- 本稿で学習した内容を復習するのにピッタリな本です。前述のJavaScript本のどちらかを先に読むことをおすすめします。
- 基礎から学ぶ Vue.js
- やや専門用語が増えており中級者向けですが、Vue.jsを仕事で使う上での知識がわかりやすく書かれています。
CodePenを使ってWeb開発を体験する 前編（HTML / CSS）
HTML, CSS, JSを個別に学習してWebアプリを作れるようになるまでには、少し時間がかかります。
学ぶ内容にもよりますが、公開できるレベルのアプリを作ろうと考えれば、最低でも２ヶ月は必要でしょう。
基礎はもちろん大事ですが、目的地をはっきりさせて興味を持続させることも、挫折を防ぐ意味で大事なことです。
今回は、 基本をすべて飛ばした上 でいきなり Vue.js というフレームワークを使うチュートリアルを公開します。
本講座で概要を掴んだ上で、おすすめの書籍を購入いただき、基礎をキャッチアップしてみてください。
CodePen
CodePenとは、HTML, CSS, JSをブラウザ上で書いてすぐに変更を見ることができるサービスです。作ったものにURLを発行して公開することもできます。
その手軽さとデザイン性の高さから、主にWebデザイナーに人気のあるサービスです。
CodePenを使ってみよう
CodePenにアクセスしたら、Start Codingをクリックしてください。
すると上記のような画面になります。試しに簡単なHTMLを書いてみましょう。
HTMLを書いてみよう
HTMLは左上に書きます。
左上に書いたHTMLが、左下にプレビューされます。 今回はdivタグを使いましたが、他にも色々タグがありますので、興味がある方は下記から学習してください。
CSSを書いてみよう
書いたHTMLに飾り付けをしましょう。
HTML
<div class="message"> Hello World </div>
.message{ background: chocolate; color: white; font-size: 20px; padding: 1em; text-align: center; width: 8em; border-radius: 0.5em; }
上記をそれぞれHTML / CSSの欄にコピペすると、下記のようになります。
サンプルの解説
HTMLとCSSは「クラス」というものを使って紐付けされています。
この例で言うと、HTMLのDIVタグには「messageクラス」が付けられていて、それを目印にCSSが装飾を行います。.messageというのは、CSS側でのクラス指定の記法です。
細かな装飾内容は上記のようになります。 もっと詳しく知りたい方は、下記のサイトを参考にしてください。
下記のサイトで視覚的に色々試すことができます。
Demo
See the Pen CSS Example by Robert (@ipl068) on CodePen.
