paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

20200204140738

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

プログラミング動画学習 paizaラーニング

機械学習でも定番のPythonライブラリ「NumPy」の初心者向け使い方チュートリアル

f:id:paiza:20170124153139p:plain
秋山です。

私は主にPythonを使って開発をしているので、以前Pythonの便利なライブラリやフレームワークを紹介する記事を書いたのですが(後でリンク貼りますね)、今回はその記事でも紹介したNumPy(なむぱいと読みます)という数値計算用ライブラリの使い方チュートリアルを書きたいと思います。

NumPyは機械学習やディープラーニングなどを学ぶ上でも前提知識とされることが多いため、これからその辺の分野の勉強をしてみたい人の参考になればと思います。

チュートリアルの実行環境は、ブラウザだけでPythonもNumPyも使えるオンラインのプログラミング実行環境「paiza.IO (パイザ・アイオー)を使っていきます。

NumPyにおける配列

NumPyにおける配列は"ndarray"という形式になっていて、このndarrayはいろいろな機能を持っています。

まず、普通のリストをndarrayに変換するには以下のようなやり方になります。

shape, ndim, dtype.name, itemsizeとndarrayにおけるいろいろな要素も同時に出力しています。

shapeは各次元ごとの配列の大きさ……要するに2次元配列の方では1次元が2要素、2次元が3要素……というわけで(2, 3)となっています。3次元配列の場合は、3次元目で[1, 2]と2要素なので(2, 3, 2)となります。

ndimは次元数を指しています。

type.nameは要素の型を表しています。

配列の初期化をする場合は、以下のようにzeros, onesなどが使えます。

他にも、arangeを使うとPythonのrangeの拡張(等差数列を生成)、linespaceを使うと特定区間の数値を等間隔でとれたりします。

■配列へのアクセス

いわゆる一般的な配列のように、"a[1][1]" のようなアクセスをすることも可能なのですが、NumPyでは "a[1, 1]" というようなアクセスが可能です。

また、縦一列、横一列、特定の範囲を切り取るような形の取得なども容易にできます。

↓具体的にはこんな感じ。

■配列への操作

NumPyでは、かなり柔軟に配列を操作することができます。

↓こんな感じで配列全体への加算など、演算適応も容易にできます。2次元配列の場合も、1次元目の何番目かを全体へ適応させることなどもできます。

2次元配列同士の掛け算は行列の積と勘違いしちゃいそうですが、行列の積を求める場合は "a.dot(b)" というような記述になります。

■配列同士の結合

配列同士を結合する場合は "hstacka(a, b)" "vstack(a, b)" を使います。

hが横、vが縦にaとbを繋げるという意味になります。

↓実際にやってみるとこんな感じ

■配列のいろいろな集計

配列の合計から、中央値などいろいろな集計を簡単にすることができます。

↓こんな感じで、sum(合計)・median(中央値)・mean(平均)・std(標準偏差)・var(分散)・max(最大)・min(最小)といった集計を容易にできます。

NumPyではこんなこともできます

◆相関関係を求める

相関係数を簡単に求めることができます。

◆多項式同士の計算など

np.poly1dを使えば多項式を作ることもできます。多項式同士の計算や特定の解を持つ多項式の生成などもできます。

■まとめ

Pythonの数値計算用ライブラリでは、今回使ったNumPyが基本のライブラリというか、定番として多くの人に使われているので、覚えておいて損はないと思います。

Pythonは数値計算処理が遅めな言語ではありますが、NumPyを使うと計算がすごく早くなります(※NumPyではC言語のネイティブコード上で計算が実行されるため)。

機械学習に限らず、ぜひ上記のようなコードを実際に書いて試してみてください。

NumPy公式ドキュメントはこちら

途中でブログパーツとして使ったオンライン実行環境サービス「paiza.IO (パイザ・アイオー)」はこちら


私が以前Pythonの便利なフレームワーク・ライブラリについて書いた記事はこちらですので、興味のある人は見てみてください。
paiza.hatenablog.com

■動画でプログラミングが学べるpaizaラーニングPython×AI・機械学習入門編が登場!


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

そしてこのたび、新たに「Python×AI・機械学習入門編」が追加されました。

人気声優の上坂すみれさんによる進行役のスベトラーナ・小百合・ベレフスカヤと一緒に、実際に画像認識技術を使いながら、初心者でも機械学習を体験・学習できるレッスン内容になっています。

Python×AI・機械学習入門編は全編無料でごらんいただけます。詳しくはこちら




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

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

paizaラーニング

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

paizaのスキルチェック

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

2017年版、5分でわかるJavaScript入門(ES6対応版)

f:id:paiza:20170123165644p:plain

f:id:paiza:20151217152725j:plainこんにちは、吉岡([twitter:@yoshiokatsuneo])です。

今、一番身近なプログラミング言語といえば、間違いなくJavaScriptです。

JavaScriptは、インターネット利用に必須のウェブブラウザ上で動作する唯一のプログラミング言語です。

プログラミングを学ぶ時も、いつも使っているブラウザ上で動作させることができて結果が見えるため、興味を持って始めるやすい言語かと思います。

JavaScriptには、広く使われていること、活発な開発、インターネットとの相性の良さ、非同期プログラミング、仕様が標準化されていること、オープンソースでの実装があること…などなどの特徴があり、今や以下のような様々な用途でも使われるようになっています。

  • ウェブブラウザ(Chrome, Firefox, Internet Explorer...)
  • サーバアプリケーション(Node.js, Express, App Engine, ...)
  • モバイルアプリケーション開発(Cordova, Ionic, ...)
  • ゲーム開発(Unity, cocos2d,...)

著名な質問サイトStack Overflowのアンケートでも、JavaScriptが一番人気のある技術となっています。

(f:id:paiza:20170124142640p:plain Stack Overflow Developer Survey Results 2016, I. Most Popular Technologies 2016より)

このように広く使われているJavaScriptは、インターネット上にも情報が多いですが、逆に断片的な情報や古い情報も多く存在しています。

特に、最新のJavaScript仕様ES6(ESMAScript 2015)は、2017年現在では全ての主要ブラウザで利用できます。古いブラウザにもトランスパイラ(Babel等)を使って動作させることができます。

ここでは、最新の仕様(ES6, ECMAScript2015)に従ったJavaScriptの基本を5分でわかるように簡単にまとめていきます。

目次

JavaScriptの開発方法

JavaScriptはブラウザ上で実行できますので、ブラウザさえあれば動作させることができますが、他の方法でも開発できます。

ここでは、JavaScriptプログラムの開発方法について紹介します。

ブラウザ上で実行

エディタ等でプログラムを書き、ウェブブラウザで実行する方法です。

エディタはプログラムなど文字を書いて保存するアプリケーションで、Windowsのメモ帳やMacのテキストエディットなども利用できますが、プログラムに向いたエディタを使うと便利です。例えば、Sublime Text、Atom、Visual Studio Codeなどが利用できます。

具体的には、以下のようにファイルを作成します。

index.html

<script type="text/javascript">
document.write("Hello world");
</script>

「document.write(メッセージ)」は、ブラウザ上に指定したメッセージを表示するJavaScriptのプログラムです。

ファイルを保存したら、ブラウザで確認します。

JavaScriptのプログラムが実行され、以下のメッセージが表示されます。

Hello world

以下のようにHTMLファイルとJavaScriptを別のファイルにすると、JavaScriptのみのファイルになるので、わかりやすくなります。

index.html:

<script type="text/javascript" src="test.js"></script>

test.js:

document.write("Hello world");

実際にJavaScriptのコードを開発するには、ブラウザに付属の開発ツールも利用します。

開発ツールは以下のように起動します。

  • Chrome ツールバーのメニューから「その他のツール」=「デベロッパツール」を選択します。

  • Firefox メニューの[ツール] => [Web開発]から[開発ツールを表示]を選ぶ。

  • Internet Explorer メニューの[ツール]=>[F12開発者ツール]を選ぶ。

  • Safari Safariメニューの[環境設定]から[詳細]タブを選び、[メニューバーに"開発"メニューを表示]にチェックする。

メニューに"開発"が追加されるので、そこから「エラーコンソールの表示」を選ぶ。

Chromeのデベロッパーツール:

f:id:paiza:20170123170937p:plain

ブラウザ上では"console.log()"などの出力結果を確認することはできませんので、デバッグツールのコンソール上で、コードの出力を確認することができます。

Node.js

Node.jsはWebサーバアプリケーションなどで使われるツールですが、単独のコマンドとしても動作しますので、ターミナル上でJavaScriptを実行するために利用できます。

Node.jsは以下からダウンロードできます。

Node.js

Node.jsを実行すると、プロンプトが表示されますので、JavaScriptコマンドを実行できます。

$ node
> console.log('Hello JavaScript')
Hello JavaScript

JavaScriptをファイルに保存し、"node"コマンドでファイルを指定して実行することもできます。

hello.js:

console.log('Hello JavaScript')
$ node hello.js
Hello JavaScript

ウェブ上のオンライン実行環境(paiza.IO, CodePen, JSFiddle)

JavaScriptのコードを編集、実行するためのオンライン実行環境を使えば、環境設定などを一切行わずにプログラムを書いて実行することもできます。

paiza.IOでは、書いたコードをNode.jsの実行環境を利用して実行し、結果を確認しながらプログラムを試すことができます。JavaScriptのプログラムを書くときに便利です。

Online PHP/Java/C++... editor and compiler | paiza.IO f:id:paiza:20170123171517p:plain

CodePen, JSFiddleなどでは、HTML, CSS, JavaScriptのコードを書いて、ブラウザ上で実行することができます。

HTMLと組み合わせたプログラムを作るときに便利です。

http://codepen.io

Create a new fiddle - JSFiddle

はじめてのJavaScriptプログラム

それでは、JavaScriptプログラムを書いて見ましょう。

まずは、文字を表示してみます。文字の表示には"console.log()"文を利用します。

JavaScriptは動作を書いた後はセミコロン(";")を指定します。(コンソールやNode.jsのプロンプトなどで一行だけ実行する場合はセミコロンをつけなくても動作はします。)

console.log('Hello World');
// => Hello World

'Hello World'が表示されました。ブラウザ上では、Webページではなく、デバッグツールのコンソールで確認します。

Node.jsでは、ターミナル上で表示されます。paiza.IOでは出力ウインドウに表示します。引用符は「'」と「"」の両方を使えます。

console.log('Hello World');
// => Hello World
console.log("Hello World");
// => Hello World

計算

パソコンですので、当然ですが足し算などの計算もできます。文字列は"+"で連結します。

console.log(3*5+4);
// => 19
console.log(10/3);
// => 3.3333333333333335
console.log('Hello' + ' ' + 'JavaScript'); // 文字の連結
// => Hello JavaScript

コメント

プログラムとして実行しない説明などのコメントは、「//」「/ /」を使います。

// 一行コメント

/*
  複数行コメント
  複数行コメント
*/

変数

数字や文字は「変数」として名前(変数名)をつけて保存しておき、後で取り出すことができます。

f:id:paiza:20170123172104p:plain

変数は"let"で宣言します。宣言した変数は、名前でどこからでも設定、取得できます。

let a = 10;        // aを10に設定
let b = 1;         // bを1に設定
console.log(a+b);  // 10 + 1
// => 11
b = 2;             // bを2に変更
console.log(a+b);  // 10 + 2
// => 12

変数の値に1を加える場合、以下のように変数自身に結果を設定します。

let i = 1;
i = i + 1;         // iに1を加える
i += 1;            // iに1を加える
i ++;              // iに1を加える

バックスラッシュ(`)を利用すると、変数から文字列を作れます。

(日本語キーボードでバックスラッシュを入力するには、Shift(シフト)キーを押しながら"@"を押します。)

let v = 'pen';
console.log(`This is a ${v}.`);
// => This is a pen

バックスラッシュでは、複数行の文字列も作れます。

let v = 'Pen'
let s =
`This is a ${v}
That is a ${v}`;
console.log(s);
// => This is a Pen
//    That is a Pen

変数宣言では"let"以外に、"const"、"var"も利用できます。"let"は変数のスコープ(利用できる範囲)がブロックですが、"var"のスコープは関数です。"const"で宣言した変数は変更できなくなります。

条件文

条件によって動作を変えるには、"if"文を利用します。

かっこ"()"の中の条件があっている場合に、その下の"{}"で囲まれたブロックを実行します。

f:id:paiza:20170123172705p:plain

if(a === b){
  console.log("aとbは同じです。"); 
}

条件に一致しない場合の動作も指定する場合、"else"を追加します。

if(a === b){
  console.log("aとbは同じです。"); 
}else{
  console.log("aとbは違います"); 
}

複数のif elseを組み合わせることもできます。

if(a === b){
  console.log("aとbは同じです。"); 
}else if(a === c){
  console.log("aとcは同じです。"); 
}else{
  console.log("aはbともcとも違います"); 
}

条件式は以下のような演算が利用できます。

内容
a===b aとbが同じ
a!==b aとbが違う
a < b aがbより小さい
a <= b aがb以下
a > b aがbより大きい
a >= b aがb以上
a && b aとbと両方がtrue
a && b aとbのいずれかがtrue
! a aの否定

なお、"==="と同じような演算子に"=="もありますが、型変換を行うため数字の5と文字列の"5"が等しくなるなど利用しにくいので、通常は"==="を使います。

配列

f:id:paiza:20170123173021p:plain

複数の値を並べたものを配列としてまとめることができます。配列の要素は括弧([])で参照します。

配列の中には、数字、文字や配列を入れることができます。

let a = [1, 2, 3]       // 数字の配列
let b = [1, "foo"]      // 数字と文字の配列
let c = [[1, 2], [3, 4]]  // 数字の配列の配列

配列の要素は"配列名[インデックス]"で参照(設定・取得)します。インデックスは、0ではじまる数字(0,1,2...)で、配列の要素の位置を指定します。

console.log(a[0])     // => 1
a[0] = 10             // a = [10, 2, 3]
console.log(a[0])     // => 10
console.log(a.length) // 3 (配列aの長さは3)

配列の要素を追加、削除するには、push/pop/shift/unshiftを使います。

let a = [1, 2, 3]
a.push(4)      //         a = [1, 2, 3, 4]
a.pop()        // => 4 // a = [1, 2, 3]
a.shift()      // => 1 // a = [1, 3]
a.unshift(10)  //         a = [10, 1, 3]

配列の値のインデックス(位置)はindexOfで取得します。

let a = ['a', 'b', 'c']
a.indexOf('b') // => 1

配列はsortで小さい順に並べ替えることができます。

let a = ['c', 'a', 'd', 'b']
a.sort()
// => [ 'a', 'b', 'c', 'd' ]

配列の各要素について操作を行うにはmapを利用します。

let a = [1, 2, 3]
a.map((v) => {     // a.map(function(){...}) とも書けます。
  return v * 10;  // 全ての要素を10倍する
})

("var"も利用できますがスコープが関数で扱いづらいので、最近はスコープがブロックの"let"を利用します。)

連想配列

配列は単純に値を並べたものですが、それぞれの値に名前をつけると便利なことがあります。

連想配列では文字列をキーとして値を設定・取得することができます。

連想配列は中かっこ({})で記述します。

var a = {apple: 1, pen: 2}
console.log(a.apple) // => 1
console.log(a['apple']) // => 1
a.apple = 10
console.log(a.apple) // => 10

ループ(while文, for文)

ループはwhile文を利用します。whileかっこ("()")内の条件式を満たす場合にブロック("{}")の中の動作を繰り返します。

// 5回ループ
let i = 0
while(i < 5){
  console.log(i);
  i = i + 1
}
// => 0, 1, 2, 3, 4

変数の値を変えながら繰り返すにはfor文を利用します。

// 5回ループ
for(let i=0; i<10; i++){
  console.log(i);
}
// => 0, 1, 2, 3, 4

配列の値を取り出すにはforEachを使います。

a = [3,4,5]
a.forEach((v) => {
  console.log("v=", v);
})

連想配列の値を取り出すにはfor in を使います。

a = {foo:1, bar:2}
for(let key in a){
  console.log("key=", key, "value=", a[key]);
}

文字列操作

文字列は、以下のような操作を行えます。

  • split

文字列を指定した文字で分割します。

let a = 'Pen Pineapple Apple Pen'; 
a.split(' ')                      // => ['Pen', 'Pineapple', 'Apple', 'Pen']
  • substr

指定したインデックスから指定した長さの文字列を取得します。

let a = 'Pen Pineapple Apple Pen'; 
a.substr(4, 9)                    // => 'Pinapple'
  • length

指定した文字の長さを取得します。

let a = 'Pen Pineapple Apple Pen'; 
a.length; // => 24

関数定義

複数の動作をまとめた関数を作ることができます。関数は"function 関数名(){}"という形で、かっこ"{}"の中に関数の動作を書きます。

function ppap(){
  console.log('pen');
  console.log('pineapple');
  console.log('apple');
  console.log('pen');
}

関数は、関数名の後にかっこ("()")をつけて呼び出します。

ppap()
// =>
//    pen
//    pineapple
//    apple
//    pen

関数は、関数名の後に引数を指定し、動作を変えることができます。

function pen(n){
  for(let i=0; i < n; i++){
    console.log('pen');
  }
}

pen(10)
// => pen pen ....

関数は、値を返すことができます。返された値(返り値)は、関数を呼び出した後に利用できます。

function sum(n){
  let total = 0;
  for(let i=0; i<10; i++){
    total += i
  }
  return total;
}
let a = sum(10)
console.log(a)    // => 45 (1+2+..+10)

関数を変数として使う

JavaScriptでは、関数を変数として保存することができます。(第1級関数と呼ばれます)

保存した変数は、関数と同じように呼び出すことができます。

let sum = function(n){
  let total = 0;
  for(let i=0; i<10; i++){
    total += i
  }
  return total;
}

sum(10)

関数は以下のようにアロー関数(=>)を用いて簡潔に記述できます。(また、変数"this"が呼び出す場所によって変わらないという違いがあり、アロー関数の方が使いやすくなっています。)

let sum = (n) => {      
  let total = 0;
  for(let i=0; i<10; i++){
    total += i
  }
  return total;
}

sum(10)

関数自身を他の関数に渡すこともできます。

例えば、3秒に一回文字を表示する場合、以下のようにします。

let pen = () => {       // let pen = function(){...}とほぼ同じ
  console.log('pen');
}
setInterval(pen, 3000)  // 3000ミリ秒に一回penを呼び出す

クラス

JavaScriptでは、データと関数をまとめてオブジェクトとして扱うことができます。

オブジェクトは、その構造をクラスとして記述します。

オブジェクトは複数の値をまとめ名前をキーとして値を操作しますので、連想配列と同じようなものと言えます。

例えば、車は、メーカーと色と持ち、表示関数を持つ"Car"クラスとして作成できます。

"this"はこのクラスから作られたオブジェクトを表します。

class Car{
  constructor(maker, color){
    this.maker = maker;
    this.color = color;
  }
  print(){
    console.log("Maker:", this.maker, ", Color:", this.color);
  }
}

次に、クラスを雛形として、"new"を用いてオブジェクトを作成します。

例えばメーカーが'Toyota'、色が'Blue'のCarオブエクトは、"new Car('Toyota', 'Blue')"として作成します。

let a = new Car('Toyota', 'Blue');
let b = new Car('Nissan', 'White');

オブジェクトに対しては、クラスで定義したメソッド(関数)を呼び出すことができます。

メソッドの呼び出しは"."を使います。呼び出された関数は、変数"this"が、呼び出したオブジェクトに置き換えられて実行されます。

a.print()
// => Maker: Toyota ,Color: Blue
b.print()
// => Maker: Toyota ,Color: Blue

クラスの拡張

同じようなクラスはクラスの拡張を使ってまとめることができます。

まとめたクラスを元に新しいクラスを作ることを拡張といい、"extends"を使います。

継承元のクラス(親クラス)を呼び出すには、"super"という名前でメソッドを呼び出します。

class Vehicle {
  constructor(speed){
    this.speed = speed;
  }
  print(){
    console.log('Speed:', this.speed);
  }
}
class Car extends Vehicle {
  constructor(speed, maker, color){
    super(speed);
    this.maker = maker;
    this.color = color;
  }
  print(){
    super.print()
    console.log("Maker:", this.maker, ", Color:", this.color);
  }
}

let a = new Car(100, 'Toyota', 'White')
a.print()
// => Speed: 100
//    Maker: Toyota, Color: White

まとめ

JavaScriptの概要と、基本的なプログラムの書き方を説明しました。

ブラウザで動作するJavaScriptは非常に身近な言語で、広く使われています。

プログラムは実際に書いて試してみることで理解が深まります。

「paiza learning」では動画を見ながら、ブラウザ上でJavaScriptのコードを書いたり演習問題を解くことで、気軽にプログラムを学べます。ぜひ試してみてください。


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

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

paizaラーニング

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

paizaのスキルチェック

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

これからエンジニアになる人必見、入社前から読んでおくべきIT系ニュースサイト22選

f:id:paiza:20170119165905j:plain
Photo by Ruben Schade
秋山です。

4月からエンジニアとして就職する予定の皆さん、技術系の情報収集はどうしていますか?

新しい技術やプロダクト等の情報収集は技術者として欠かせないことです。特にIT技術は毎日のように進化していて、流行もすぐに変わります。

ただ、当然ながら専門分野の情報って、Yahoo!ニュースやGunosyみたいな一般のニュースサイトを流し読みしてるだけじゃ全然集まらないですよね。今は情報が流れるスピードが相当早くなっているので、ぼーっとしていると、重大ニュースや話題の技術を自分だけ知らなかった…などという恐ろしいこともあり得ます。

今回は、そんな悲劇を防ぐために、これからエンジニアになる方に役立ちそうなIT系の情報サイトやブログを紹介していきます。

大きなジャンルで分けて紹介していったら結構な数になったので、就職先で想定される業務や興味ある分野に合わせて参考にしてください。

■IT総合系

この辺は紹介するまでもないかもしれませんが…。

ITmedia

f:id:paiza:20170119170201p:plain
ITmediaは企業とIT、システム導入、マーケ×IT、製造業、電力、スマホ、パソコンなど、IT関連のニュースに特化した大手ポータルサイトです。情報系じゃなくても見たことある人多いんじゃないでしょうか。

ITpro

f:id:paiza:20170119170830p:plain
日経BPのIT系情報サイトなのでちょっと固めでビジネス寄りの記事も多いです。

Cnet Japan

f:id:paiza:20170119170904p:plain
米国のIT系ニュースサイト「CNET」の日本版です。企業向けのビジネスニュースとかも多いです。

■テクノロジー系

Qiita

f:id:paiza:20170119170959p:plain
Qiitaはニュースサイトではないですが、プログラマのための技術情報共有サービスなので。 プログラミングに関するTips等を個人で書いて公開できます。

Hacker News

f:id:paiza:20170119183034p:plain
Hacker Newsもユーザー投稿型の技術系ニュースサイトで、Y Combinatorという有名なベンチャーキャピタルが運営しています。やはりIT系の情報は海外の方が早いので、英語OKな人は見ておくといいかも。

@IT

f:id:paiza:20170119171047p:plain
ITmediaと同じ系列で、特にテクノロジー関連の情報が集まってるのが@ITですので、エンジニアになる人はこっちもブックマークしとくとよいのでは。

ZDNet Japan

f:id:paiza:20170119171121p:plain
こっちはCnet Japan系列のテクノロジー寄り版という感じですね。

CodeZine

f:id:paiza:20170119171844p:plain
CodeZineは「開発者のための実装系Webマガジン」といううたい文句のとおり、実装に使える記事が多いのでエンジニアは重宝するかと思います。

Think IT

f:id:paiza:20170119172000p:plain
Think ITは主にオープンソース技術の活用に関する情報サイトです。

POSTD

f:id:paiza:20170119181206p:plain
プログラミングに関する海外の記事を翻訳して掲載してくれているサイトです。

■Q&A系

Stack Overflow

f:id:paiza:20170119172030p:plain
具体的な開発に詰まって検索してるとStackOverFlowにたどり着くことでおなじみの(?)超有名なQ&Aサイト。日本語版もありますが、やはり英語版の方が情報が厚いですね。

■スライド共有系

SpeakerDack

f:id:paiza:20170119172141p:plain
勉強会やセミナーで発表資料として作られたスライドがよく公開されています。過去のいろんなスライドが見られるので知っておくといいです、すぐに自分もスライド作ることになるかもしれないですし。

■セキュリティ系

ScanNetSecurity

f:id:paiza:20170119172226p:plain
セキュリティ情報の大手ポータルサイトです。

トレンドマイクロ社のブログ

f:id:paiza:20170119172259p:plain
ウイルスバスターでおなじみのトレンドマイクロ社によるブログです。最新のセキュリティに関する脅威情報やニュースが記事になっています。

カスペルスキー公式ブログ

f:id:paiza:20170119175336p:plain
セキュリティ製品を開発しているカスペルスキーの関するブログも、脆弱性などに関する情報が早いし面白い記事が多いです。日本語版はこちら

■ガジェット・デバイス系

ASCII

f:id:paiza:20170119172350p:plain
ASCIIはエンジニアじゃなくても、デバイスとかガジェット好きな人たちには紹介するまでもないですね……でもプログラミング始めてからその辺に興味持ち出す人もいるかもしれないので紹介しておきます。

ギズモード・ジャパン

f:id:paiza:20170119172453p:plain
ギズモード・ジャパンは米国のブログメディア「Gizmodo」の日本版で、Apple製品とかガジェット系のニュースが中心です。ガジェットだけでなくITが絡んでいればどんなニュースも扱ってる感じのサイトです。

Make: Japan

f:id:paiza:20170119180216p:plain
自作に関する情報はここで見ています。自作沼をのぞいてみたい人はぜひ。

■スタートアップ・プレスリリース系

Techable

f:id:paiza:20170119172527p:plain
Techableは主に国内外のスタートアップベンチャーのニュースが掲載されています。スタートアップ企業でエンジニアになる予定の人はぜひ。

TechCrunch Japan

f:id:paiza:20170119172604p:plain
TechCrunch Japanも最新技術やスタートアップ系のニュースが中心です。

■ゲーム系

4Gamer.net

f:id:paiza:20170119180918p:plain
4Gamer.netはゲーム情報の大型ポータルサイトなので、ゲームエンジニアになる人、ゲーム好きな人に。最近人気のVR系の情報もあります。

■まとめ

プログラミング経験が浅い人は、就職して仕事が始まって、さらに情報収集の癖もつけようと思うと大変かもしれません。

ただ、やはり技術的な専門情報というのは一般的なニュースサイトを眺めてるだけでは入ってこないので……最初は「こういうサイトがあるんだな」と知って、あいた時間でいろいろ眺めるぐらいから始めるといいかと思います。

paiza新卒について

f:id:paiza:20150730172136p:plain

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

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

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

paiza新卒

■学生向け「ITエンジニア就活特化」プログラミング学習コース好評公開中

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

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

paizaラーニング




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

paizaのスキルチェックでは、自分のプログラミングスキルを客観的に知ることができます。興味がある方はぜひ一度ご覧ください。

paizaのスキルチェック

初心者からのJavaScript開発入門!iTunesのJSONデータを使ってランキングサイトを作るチュートリアル大公開!

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

今回は、JavaScriptでJSONを使った「Webアプリ開発」に挑戦してみようと思います!


そこで、アップルが提供しているRSS Generator」からJSONデータを取得し、多彩なジャンルのランキングサイトを構築してみましょう!

RSS Generator

f:id:paiza:20170117152214j:plain
RSS Generator」という名前の通り、これはiTunes Storeで提供されているスマホアプリ、音楽、映画…などの最新情報をRSS形式で取得可能なURLを自動生成してくれるサービスです。


ただし、URLを少し変えるだけで「JSON(JSONP)データ」も取得できるようになっているので、このデータを読み込んでアプリや音楽などの最新ランキングを自動表示するサイトを作ってみたいと思います!

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

それでは、最初に必要となるファイルを準備するところから始めましょう!

今回のランキングサイトは非常にシンプルなので、必要なファイルは「index.html」と「app.js」の2つだけです!


取得したJSONデータを「テーブル要素」でランキング順に表示するという単純なモノです。
f:id:paiza:20170117152237j:plain


まずは、「index.html」のbody内に、テーブル要素の枠組みだけを用意しておきます。

<!-- index.html -->


<body>


    <div class="container">


        <!-- ランキング表示用のテーブル要素を準備 -->
        <table id="ranking" class="table table-striped table-hover"></table>


    </div>
    
</body>

今回はJavaScriptにフォーカスを当てたいので、CSSに関しては軽量で汎用性の高いフレームワーク「Spectre.cssを読み込むだけにしておきましょう。(CSSフレームワークについてはコチラを参照

※上記HTML要素内のクラス名は、すべて「Spectre.css」で用意されているものだけを使っています。


次に「app.js」ですが、ひとまず以下のような内容で作っておきましょう!

// app.js


window.addEventListener('load', function() {


  // 最初に実行される処理を書く
  getAppList();


});




function getAppList() {


  // JSONデータを取得する処理を書く
  
}

HTMLを読み込んだ後、最初に実行される関数として「getAppList()」を作成しています。

この中に、「iTunes Store」のJSONデータを取得する処理を書いていくようにしたいと思います!

■「JSONデータ」が得られるURLを作ろう!

必要なファイルが準備できたところで、早速「JSONデータ」を取得するURLを作っていきましょう!


最初に、「RSS Generator」のサイトにアクセスして、以下の画面構成を確認します。
f:id:paiza:20170117152359j:plain

それぞれの機能は以下のとおり!

  1. 国名を選択
  2. アプリ、音楽、映画などのメディアを選択
  3. 無料アプリ・有料アプリ、最新情報などの選択
  4. 取得するデータ数の選択
  5. 各メディアのジャンルを選択

上記の内容で、自分が欲しい情報をマウスでボチボチと選択するだけでURLが自動生成されるので便利です!

例えば、日本のiOS無料アプリランキング情報(全ジャンル)を10件取得するためのURLはこのようになります。

https://itunes.apple.com/jp/rss/topfreeapplications/limit=10/xml


そして、このURLからJSONデータを取得するのは簡単で、末尾の「xml」を「json」に書き換えるだけでOK!

https://itunes.apple.com/jp/rss/topfreeapplications/limit=10/json


試しに、このURLをブラウザのアドレスバーに入力すると、「JSONデータ」として情報が得られているのが分かります!
f:id:paiza:20170117152449j:plain

■「JSONデータ」をJavaScriptで扱おう!

さて、ここまで来ればあとはJavaScriptからJSONデータを読み込んで、ランキングを表示するだけです!

そこで、jQueryなどのライブラリを使っても良いのですが、単純にJSONを取得するだけなので今回は標準で使える「fetch」を使ってみましょう!


「fetch」の使い方はものすごく簡単で、JSONを読み込むだけならこんな感じに書けます。

  fetch(url)
  .then(function (data) {
 
     return data.json(); // 読み込むデータをJSONに設定


  })
  .then(function (json) {


    // JSONデータを取得して処理する


  });

冒頭の「url」の部分に、先ほど生成したURLを代入すれば、最終的に変数「json」の中に取得したデータが入っています。


結果をコンソールログに出力すると、「feed」→「entry」配下にしっかりとデータが取得できていますね!
f:id:paiza:20170117152554j:plain

サンプルソースコード


このように、「fetch」は簡単で使いやすいのですが、一部のブラウザはまだ対応していなかったりします。

対応状況の詳細|Can I use… 】

f:id:paiza:20170117152634j:plain
そこで、現状は同機能を提供するライブラリ「fetch.js」を読み込んでおくのが良いでしょう。

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.1/fetch.min.js"></script>

■ランキングに必要な情報を確認しよう!

先ほど、コンソールログに出力したデータの中身をもう一度よく見てみましょう!

10件のデータが配列で用意されているわけですが、それぞれのデータには…

  1. アプリのアイコン画像URL
  2. アプリのタイトル
  3. アプリのダウンロードURL

のような個別の詳細情報も取得できるのが分かります。
f:id:paiza:20170117152732j:plain

今回作るランキングサイトはシンプルなモノなので、上記3点の情報があればひとまず充分でしょう。


これらのJSONデータにJavaScriptからアクセスするのは簡単で、それぞれの階層を辿っていくだけで取得できます。

// 10件の配列データを格納
var appList = json.feed.entry;


for(var i=0; i<appList.length; i++) {


    // ①アプリのアイコン画像URLを取得
    var imgUrl = appList[i]['im:image'][0].label;


    // ②アプリのタイトルを取得
    var appTitle = appList[i].title.label;


    // ③アプリのダウンロードURLを取得
    var linkUrl = appList[i].link.attributes.href;


}

データはランキング順に用意されているので、for文で順番にループを回しながら各データにアクセスすれば良いでしょう。

■ランキングを表示してみよう!

取得したランキング情報を、JavaScript側で動的に「テーブル要素」を生成して表示してみたいと思います!

すでに冒頭で、HTML側に「table」要素の外枠を用意していたので、あとは中身の「列・行」を追加していくだけでOKです。


先ほど、for文を使って「imgUrl(画像)」「appTitle(タイトル)」「linkUrl(リンク)」をそれぞれ取得しているので、以下のような感じでテーブルを作ることが出来ます!

// 行を追加
var row = table.insertRow();


// 順位をセルに追加
row.insertCell().textContent = i+1;


// アイコン画像をセルに追加
row.insertCell().innerHTML = '<img src="'+ imgUrl +'">';


// タイトルをセルに追加
row.insertCell().textContent = appTitle;


// ダウンロードリンクをセルに追加
row.insertCell().innerHTML = '<a href="' + linkUrl +'">リンク</a>';


ブラウザで確認すると、見事にランキングが表示さましたね!
f:id:paiza:20170117152835j:plain

ちなみに、「RSS Generator 」をいろいろ触ってみると分かりますが、URLを少し変えるだけでさまざまなランキングを作れるのが分かります。


例えば、「topfreeapplications」→「toppaidapplications」に変更すれば、有料アプリランキングも簡単に作れます。


f:id:paiza:20170117152902j:plain

「topsongs」に変更すれば、音楽のランキングが表示されます。


f:id:paiza:20170117152925j:plain


「topmovies」に変更すれば、映画のランキングも簡単です。


f:id:paiza:20170117152942j:plain

(音楽・映画などは、JSON構造が少し違う場合もあるので要注意)


さらに、URL内の「jp」を「us(アメリカ)」「cn(中国)」「ru(ロシア)」などに変更すれば、世界各国のランキングを作ることも簡単に出来るわけです。

■ブラウザ側にデータを保存しよう!

最後に、取得したJSONデータをブラウザの「ローカルストレージ」に保存する方法も解説しておきます。

現状は、毎回データを取得しにいくプログラムになっているため、あまり効率が良くないので「ローカルストレージ」にデータを保存し、そこから読み込むように変更してみましょう!


といってもそんなに難しくはなく、一番最初に「ローカルストレージ」にデータがあるかどうかをチェックする条件分岐を書いておけばOKです!

window.addEventListener('load', function() {


    // ローカルストレージのデータを取得
    var listKey = window.localStorage.getItem('appranking');


    if(listKey) {
    
        // ローカルストレージにデータがあれば
        // そのデータを使ってランキングを表示する
    
    }
    else {
    
        // ローカルストレージにデータが無ければ
        // JSONデータを取得しにいく
  
    }


});


ローカルストレージにデータを保存する処理もこのように簡単です。

var appList = json.feed.entry; // 配列データを格納


// 取得したデータを「appranking」という名称で保存する
window.localStorage.setItem('appranking', JSON.stringify(appList));


ここまでの内容を踏まえて、今回のサンプルデモを以下のリンクから確認できるのでぜひ試してみてください!(手動で最新データに更新する機能も追加しています…)

サンプルデモ


サンプルデモの全ソースコードは、以下のリンクから確認できます。
github.com

■まとめ

今回利用した「RSS Generator 」のランキング情報は、実際にiTunesやApple Storeなどで閲覧できるランキング情報と同じものですが、少し更新タイミングにズレがあるのは覚えておきましょう。

ただ、自分で好きなようにカスタマイズして開発できるのは大きな魅力だと思います。


注意点として、JSONデータへのアクセスはなるべく最小限にし、サーバーに負荷をかけないようにローカルストレージなどを使いましょう。

ぜひ、みなさんも挑戦してみてください!

■アルゴリズムの学習レッスン動画が期間限定無料で見放題!プログラミング学習コース

f:id:paiza:20170117132313p:plain
paizaでは、未経験者でも動画を通してプログラミング等が学べる「paizaラーニング」を公開しております。

本日から2017年1月23日までの期間限定で「アルゴリズム入門1」を無料公開中

来週2017年1月24日から30日までの一週間は、「アルゴリズム入門2」の無料公開を予定しています。

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

paizaラーニング




paizaではスキルのあるエンジニアがきちんと評価されるようにし、技術を追い続ける事が仕事につながるようにする事で、日本のITエンジニアの地位向上を図っていければと考えています。特にpaizaではWebサービス提供企業などでもとめられる、システム開発力や、テストケースを想定できるかの力(テストコードを書く力)などが問われる問題を出題しています。

paizaのスキルチェック

テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

プログラミング問題を作るエンジニアが、数学的な面白いアルゴリズムを紹介してみた

f:id:paiza:20170117123901j:plain
Photo by Alex Graves
秋山です。

paizaでは主にプログラミングスキルチェック問題の作成を担当しているので、アルゴリズムについて調べることもよくあります。

というわけで今回はみんな大好き?な、数学的なアルゴリズムについて書いてみたいと思います。

プログラミングの勉強を始めたばかりの人から「アルゴリズムってどうやって考える&勉強するといいんですか?」と聞かれることもあるので、参考になればと思います。

■数列のアルゴリズム(フィボナッチ数、黄金比)

数字が 1,2,3,4,5,6....100 というように、最初の1から順に1ずつ増えていくというのも、ある意味アルゴリズムにのっとった数列であると言えます。

もう少し複雑な数列になると、paizaラーニングアルゴリズム入門編でも出てくる「フィボナッチ数列」という数列があります。数学が苦手な人でも聞いたことある言葉ではないでしょうか…。(フィボナッチ数 - Wikipedia

フィボナッチ数列とは、 1, 1, 2, 3, 5, 8, 13, 21,.... と続く、要は「前の2つの数字を足したもの」の数列で、アルゴリズムを考える上でのいろんな要素が詰まっています。

フィボナッチ数列は、自然界の現象に数多く出現するとされています。例えば、ヒマワリの種のらせんはフィボナッチ数の法則に従っているとする話があります。が、実際は数が小さいうちは法則通りでも、一定数を超えると種の並びに分岐などが起こったりして、必ずしもアルゴリズム通りではないそうですね。

f:id:paiza:20170117115746j:plain
Photo by Marcel Sigg

またフィボナッチ数列には、いわゆる「黄金比」と言われているものが隠れています。

黄金比とは
f:id:paiza:20170117121146p:plain
(1:1.6180……)になる比のことです。

これがフィボナッチ数列とどう関係あるかというと、例えば 1, 1, 2, 3, 5, 8, 13, 21,.... の8番目の 21 を 7番目の 13 で割ると、 1.61538461538 という、黄金比の近似値を求めることができます。もっと数列を進めれば、隣同時の比も、どんどん黄金比に近づいてきます。フィボナッチ数列で隣り合う数の比は、黄金比に収束するんですね。

黄金比は、古い建造物や絵画などにも現れていると言われていますが、偶然なのかこじつけなのかはよくわかりません。

ちなみに、MacBookPro13・15インチは解像度の比率が1.6です。テレビ放送や映像作品では、16:9が主流となっていて、1.77ぐらいの比率です。古いアナログ放送などは、4:3で1.33ぐらいの比率です。どの比率が見やすいかは個人差かもしれませんが、なんとなーく近い範囲なのが興味深いです。(これこそこじつけかもしれませんが……)

↓フィボナッチ数列を使ったプログラミングが学べるpaizaラーニングこちら
アルゴリズム入門編: FizzBuzzとフィボナッチ数を学ぶのチャプター一覧 | プログラミング学習サービス【paizaラーニング】

■リュカのキャノンボール問題(平方ピラミッド問題)

フランスの数学者、エドゥアール・リュカが考案した「砲丸を並べて底面が正方形のピラミッドを作っていった時に、ピラミッドに使われた砲丸の総数が平方数になるピラミッドの段数を答えよ」という問題です。

(ちなみにリュカは先に紹介したフィボナッチ数列を研究したり、ハノイの塔のアルゴリズムを考案したりした人です。ハノイの塔についてはpaizaラーニングアルゴリズム入門編でも説明しています。)

一見、砲丸を無限に積めるとなると、平方数も無限に出てきそうな気がしますよね。

でも、実際に平方数になるのは1段と24段の時だけなんです。これを証明するのはものすごく難しいので、力技で解いてみたのがこちら↓

少なくとも、1000段目までの間で、1段目と24段目以外に平方数は出てきませんでした。

無限に試しても平方数になるのは1段目と24段目だけ、という数学的証明について日本語で読める概要はこちら↓が参考になるかと思います。
平方ピラミッド問題と楕円曲線の整数点 石井夕紀子

■Googleの入社試験で出た?という噂がある数列問題(※真偽は不明です)

1, 11, 21, 1211, 111221, ...
10,9,60,90,70,66, ...
という数列において、「それぞれ次に来る数字は何か答えよ」という問題です。

これはちょっと意地悪な問題です。数列を読み上げるとわかりますね。

1
11 ← 1つの1(手前の数字を読み上げる)
21 ← 2つの1
1211 ← 1つの2 と 1つの1
111221 ← 1つの1 と 1つの2 と 2つの1

ということは、次の数は

3つの1 と 2つの2 と 1つの1 → 312211

となりますね。

次の数列も読み上げるとわかります。(英語で)

10 → ten
9 → nine
60 → sixty
90 → ninety
70 → seventy
66 → sixty-six

文字数に注目すると、1ずつ増えているのがわかります。
ということは、次の数は

ninety-six → 96

となります。

10 tenのところがoneやsix、同様に9 nineのところがfourやfiveでない理由は、その文字数中で最大の数……という意味らしいです。

もし本当に出題されていたとしたら、こういった点について具体的に説明できるかどうかを面接で見ていたんですかね。


※余談ですが、昔、数学の授業で 1, 3, 4, 6, 8, 10, 12 は何の数列?という問題を出されたことがあります。ヒントはこの数字は2011年廃止されて 1, 2, 4, 6, 8, 5, 7 に切り替わっているということ。

答えは地上波放送(首都圏)のチャンネル番号です。この話をすると歳がバレますね…。

■まとめ

というわけで数学的なアルゴリズムに触れてみました。

アルゴリズムはプログラミングを考えるときに重要ですし、いろんな法則があって楽しいので、少しでもアルゴリズムの勉強に興味を持ってもらえたらうれしいです。(数学的な話が多くて嫌いになったって言われたらどうしよう……)

フィボナッチ数やハノイの塔、またもっと単純なFizzBuzz(Fizz Buzz - Wikipedia)などは、paizaラーニングアルゴリズム入門編でも学べます。ぜひごらんください!


paizaラーニングでは、paizaの人気美少女キャラクター霧島京子(cv:上間江望)が、かわいい声で優しく・楽しく・わかりやすくプログラミングを教えてくれます。

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

paizaラーニング




paizaではスキルのあるエンジニアがきちんと評価されるようにし、技術を追い続ける事が仕事につながるようにする事で、日本のITエンジニアの地位向上を図っていければと考えています。特にpaizaではWebサービス提供企業などでもとめられる、システム開発力や、テストケースを想定できるかの力(テストコードを書く力)などが問われる問題を出題しています。

paizaのスキルチェック

テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

Pythonの学習を始めた初心者が、知っておきたいテクニック4つ

f:id:paiza:20170110162953j:plain
Photo by francois schnell
秋山です。

Pythonって多少プログラミング経験がある人であれば、文法的にはそこまで難しい言語ではないと思うのですが、初心者の人がPythonでゼロから何か作ろうとしたり、細かい修正をしなきゃならなくなったりしたときに知っていると得するかもしれないTips的なことを紹介したいと思います。

「既にPython使いまくってる」という人にとってはおなじみの内容ばかりかもしれませんが、「最近Python使い始めた」という人は意外とまだ知らない、そして知っておくとお得なことがある(かもしれない)話です。

■クラスなどの扱いに関して

※他の言語の仕様を全て認識しているわけではないので、Python以外の言語でも似た仕様のものはあるかもしれません。

◆classを定義する際のインスタンス変数、クラス変数のprivate的な動きについて

大多数の言語において、外部から直接アクセスして欲しくない(アクセスできるのはメソッド経由な場合のみに制限したい)変数のために、private修飾子というものがあります。が、Pythonには修飾子としてのprivateは存在しません。

Pythonでは↓このようにアンダーバーを頭に2つつけ、" self.__hoge "というふうに書くことで、ネームマングリング(名前修飾)されたプライベート変数的な扱いとなります。

Paizaというクラスで " self.__piyo "というクラス変数を定義した場合、" paiza = Paiza() " として " paiza.__piyo " では外部からアクセス不可能になります。

また推奨されてはいませんが、" paiza._Paiza__piyo " とすればアクセスすることが可能になります。

■リスト内包表記

◆リストを作るとき

※Python特有(と言いつつHaskellにもあるので他にもあるかもしれない)っぽい表現について

リストを作る際に、 " [i for i in range(1, 10) if i%2 == 0] " という書き方をすると、1から10の偶数を出力できます。これによって、普通はループを使ってリストを生成するような流れの場合もかなりコードを短縮できます

↓実際に偶数を作り、その偶数リスト全体を2乗したリストを作るコードを書いてみました。

range(1,10) の部分はリストもしくはイテレーターなら何でもいいので、フィルタリングや特定の処理を全てにしたい場合などはすごく重宝します

慣れないうちは読みづらく感じるかもしれませんが、慣れてくるとさっと書けて、他の言語でmap, filterに当たる記述をまとめて書けるのがよいです。(Pythonにもmapやfilterはありますが)

※たまにリスト内包表記芸みたいな感じで、リスト内包表記で素数を作ったりFizz Buzzしたりするお遊びみたいなコードを見かけますが……それは普通にループ書いた方がよいですよというマジレスを置いときます。Fizz Buzzはこんな感じ↓

またリスト内包表記以外にも、辞書内包表記 " {i : k for i, k in [(i, i**2) for i in range(1, 10)]} " とかすることもできます。

プログラミング経験がある方は、「ここからさらに " (i for i in range(3)) " のようなタプル内包表記などもできるのかしら?」と思うかもしれませんが、この場合はジェネレータ式と呼ばれる別物になります。なのでタプルを作りたい場合はリスト内包表記を記述して、tuple()を使い変換してください。

ジェネレータ式についてはこちらに詳しく書かれています。
関数型プログラミング HOWTO — Python 3.8.0 ドキュメント


■多次元リスト(配列)の作り方

これはですね、地味なハマりどころです。

Pythonで空の特定の長さの0で初期化されたリストを作るとき " a = [0] * 3 " とすることができます。ですので、リストについて少し知っている方は、ここから発展して、 " a = [[0] * 3] * 3 " とかして3×3の0で初期化されたリストを作りたい!と思われるかもしれません。

しかし、これをすると " a[0][0] = 1 " という望まない結果となってしまいます。

a[0][0], a[0][1], a[0][2] がすべて 1 となってしまうわけですが、これはなぜかというと、リストの乗算はコピーではなくオブジェクトへの参照を作ってしまうからなのです。

この場合、初期化されたリストを作りたいなら、推奨される書き方はリスト内包表記を使って " [[0]*3 for i in range(3)] " となります。

また過去のPythonライブラリ記事(後でリンク貼ります)で紹介したNumPyなどを使うと、

numpy.zeros((3, 3)) 

と書くことで作れます。((3, 3)の部分は引数ではなくタプルである点に要注意です。(3, 3, 3)と与えれば3次元配列を作ってくれます)

■三項演算子

三項演算子は、一般的な言語では " bool ? a : b " という記法が一般的です。最初に条件式、左側がTrue,右側がFalseという感じですね。

これがPythonの場合は、" a if bool else b " という書き方になります。中央に条件があり左側がTrue, 右側がFalseの場合の値という順になっているので、他の言語での三項演算子に慣れていると、違和感があるかと思います。

■まとめ

Python始めたばっかり…っていうかプログラミングも始めたばっかり! という人にはちょっと「???」な内容もあったかもしれませんが、いつか他の人が書いたコードを読んだり修正したりすることになったときに、こういった書き方のコードが出てきたら思い出してください。

また、こうした便利な書き方を適宜利用することで、冗長じゃなく簡潔で読みやすいPythonコードを書いていっていただければと思います。

paizaでもPythonが学べる動画学習コースを無料で公開しています。ちょうど本日「Python入門編4」の動画が公開になったところですので、「Pythonに興味あるけどプログラミング初心者です!」という人はぜひのぞいてみてください。

あと途中でブログパーツとして使ったオンライン実行環境サービス「paiza.IO (パイザ・アイオー)」はこちら

私は前回、前々回の記事もPythonについて書いてますので、ご興味ある方はごらんください。
paiza.hatenablog.com

paiza.hatenablog.com




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

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

paizaラーニング

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

paizaのスキルチェック

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

Web上からソースコードの圧縮・整形・変換など190以上のツールを利用可能な「BeautifyConverter」を徹底解説!

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

今回は、ブラウザ上からWeb制作などで便利に使えるミニツールを190以上も搭載した異色のWebサービスをご紹介しようと思います!

特に、ファイル関連のジェネレーターやコンバーターが豊富に揃っているのが特徴で、コンソールからタスクランナーなどを起動する必要もなく、フロントエンド側だけでちょっとした制作を行うのに最適だと思います。

BeautifyConverter

f:id:paiza:20170106111812j:plain
「BeautifyConverter」は、主にファイルの「圧縮」「整形」「変換」などから「構文チェック」「画像変換」「各種ジェネレーター」…など、多種多様な便利ツールが揃っています。

登録不要で、誰でも今すぐブラウザから利用できるので、ブックマークしておいて損はないでしょう!

■基本的な使い方!

BeautifyConverter」の基本的な使い方を実際に試しながら、どのようなサービスなのかを見ていきましょう!


まず、サイトにアクセスすると利用可能な「ミニツール」一覧が表示されているので、使いたいツールを選択します。

試しに、JavaScriptファイルを圧縮できる「JavaScript Minifier」をクリックしてみましょう!
f:id:paiza:20170106111839j:plain


すると、専用のエディタが別タブで起動するのが分かります。
f:id:paiza:20170106111847j:plain

JavaScriptファイルは、エディタに直接書いたりコピペしても良いし、自分のPCにあるファイルを指定したりネット上にあるURLを指定することも可能です。


あとは、「圧縮」ボタンをクリックするだけでOK!
f:id:paiza:20170106111858j:plain


大幅にファイルサイズが圧縮されました!
f:id:paiza:20170106111908j:plain


同じ要領で、HTMLファイルも圧縮したり…
f:id:paiza:20170106111916j:plain


CSSファイルを圧縮することも簡単です!
f:id:paiza:20170106111927j:plain


また逆に、圧縮されたJavaScriptファイルを整形して標準スタイルに戻すのも一瞬です。(HTML,CSSも同様です)
f:id:paiza:20170106111935j:plain
「ファイルが少し崩れて読みにくい…」というような場合にも有効ですね。


さらに、CSSをもっとプログラマブルに書ける「LESS」や「Stylus」を、通常のCSSに変換することも出来ます。
f:id:paiza:20170106111945j:plain
他にも、JSON・XML・SQLなども圧縮や整形が簡単に出来るようになっているので便利です。


このように、利用したいツールを選択するだけで、ブラウザ上から専用エディタですぐに作業ができるのは便利でお手軽と言えるでしょう。

■ファイルの「変換」機能を使ってみよう!

さて、「BeautifyConverter」の基本的な使い方が分かったところで、このサービスの「得意技」とも言えるファイルの「変換」機能を試してみましょう!

非常に幅広いバリエーションが用意されているので、いくつかピックアップしてご紹介してみます。


例えば、「CSV」⇔「JSON」相互変換ツールで、CSVをJSON形式にしたりその逆も簡単に処理できます。
f:id:paiza:20170106112003j:plain


「CSV」⇔「HTML」変換を使えば、テーブル要素をサクッと取得できたり、逆にテーブル要素からCSV形式にすることも出来ます。
f:id:paiza:20170106112012j:plain


「JSON」⇔「SQL」変換は、JSONをSQL形式にしたり、SQLのデータをWebで扱いやすいJSONに変換してプログラミング出来ます。
f:id:paiza:20170106112024j:plain


また、ちょっと強引ですが「HTML」⇔「JavaScript」の相互変換も可能です。
f:id:paiza:20170106112036j:plain
ちなみに、「HTML」に関しては、他にも「Jade」「JSP」「PHP」「Perl」などに変換することも可能だったりします。


「RSS」→「JSON」変換ツールを使うと、RSSフィードでよく使うXMLを扱いやすいJSONへと変換することが出来ます。
f:id:paiza:20170106112045j:plain


「HTML」⇔「テキスト」変換は、普通の文書をHTMLにしたり、逆に特定のHTML要素をテキスト文書へ簡単に変換できます。
f:id:paiza:20170106112054j:plain


さらに、「JSON」→「PDF」変換を行うと、JSONファイルを整形して見やすい「表」にした後にPDFファイルとして書き出すことも可能です。
f:id:paiza:20170106112103j:plain
もちろん「JSON」だけでなく、「CSV」「TSV」「SQL」「Excel」などをPDF変換することも出来るので便利です。

他にも、ファイル変換系のツールは豊富に揃っており、これだけでおよそ80種近いバリエーションが用意されているのは面白いところでしょう。

■まだまだある、こんなツール群!

サイトの機能一覧を見ていると、他にもユニークなツールが用意されているのが分かると思います。


例えば、「JavaScript」「CSS」「XML」「JSON」「YAML」などを正しく記述できているかの構文チェッカー
f:id:paiza:20170106112122j:plain


Webサイトの「アクセス制限」「リダイレクト」「認証」などを記述する「.htaccess」ファイルを簡単に生成できるツール
f:id:paiza:20170106112130j:plain


画像ファイルを「文字データ(Base64)」に変換して、直接HTMLに埋め込んだりできるジェネレーター
f:id:paiza:20170106112138j:plain


PCブラウザはもちろんのこと、スマホからでもWebサイトの「ソースコード」を簡単に閲覧できるビューアー
f:id:paiza:20170106112147j:plain


さらに、100種類以上のシンタックスハイライトに対応した「オンラインコードエディタ」まで用意されています。
f:id:paiza:20170106112157j:plain
他にも、「単位変換」「URLのエンコード&デコード」「セキュアなパスワード生成」「IPアドレスやドメイン情報の取得」「JPG」⇔「PNG」⇔「GIF」⇔「BMP」ファイルの相互変換…など、すべてを紹介できないくらい多くのツールがまとまっているのが大きな特徴と言えるでしょう。


慣れてくると、お気に入りのWebサイトを読み込んで「ソースコード」を表示し、そこから任意の情報だけをJSONにして「表」に整形してからPDF変換するような作業も、すべてブラウザ上で簡単に出来るようになるので便利ですよ。

■初心者でも動画でプログラミングが学べる!paizaラーニング公開中!

f:id:paiza:20160830130051j:plain
paizaでは、未経験者でも動画を通してプログラミング等が学べる「paizaラーニング」を公開しております。

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

■まとめ

今回ご紹介した「BeautifyConverter」は、普段からコンソール画面でコマンドを叩いて作業することに慣れていない方でも、ファイルの圧縮・整形・変換などをブラウザから利用できるため、プロトタイプなどちょっとした作業にも最適ではないでしょうか。


個々のツールは、ネットで探すと見つけることは出来ますが、これだけ多くのツールを1つにまとめているのは珍しいので、ブックマークしていつでも利用できる状態にしておくと良いかもしれません。

ぜひ、みなさんも一度トライしてみてください!




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

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

paizaラーニング

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

paizaのスキルチェック

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

Pythonエンジニアが紹介する、Pythonの超便利なライブラリ・フレームワーク13個

f:id:paiza:20161227121203j:plain
Photo by hoerner_brett
秋山です。

私は主にPythonを使って開発をしているので、今回はPythonの便利なライブラリやフレームワークを紹介していきたいと思います。

といっても割と定番のものを中心に使っているので、既にPythonをがんがん使っている人にとっては「知ってるわ!」というものも多いかと思います。「最近Python書くようになりました~」という人たちにも「これ良い!」ってものが見つかればと思います。

ちなみに前回はPython2系と3系の違いについて書いてますので、「3系に移行しよっかなー」と考えている人は合わせて見てみてください。
paiza.hatenablog.com

■Pythonの便利なライブラリやフレームワーク

◆Web開発系フレームワーク

Django

f:id:paiza:20161226221604p:plain
みんな大好き有名なDjango。RubyでいうところのRailsのような……全部のせ的なフレームワークです。管理画面が簡単にジェネレートできるのも大変いいと思ってます。

Bottle

f:id:paiza:20161226221752p:plain
Bottleは有名かどうかはわかりませんが、薄くて軽いフレームワークです。というか、ルーティングとかぐらいしか機能がないです。

業務で使うには足りないと思うので、趣味的な開発をちょっとしたい、軽いフレームワークをちょっと入れたい、みたいなときに使うといいでしょう。実際、自分も仕事ではなく家で趣味で開発するときによく使います。ただ、データベースやCSRF等の機能はほとんどないので、必要に応じて別のライブラリを読み込まないといけないですね。

◆データ処理、数値計算用

※数値計算系のはほぼScyPyプロジェクトのものですね。

NumPy

f:id:paiza:20161226222258p:plain
メジャーな数値計算用ライブラリですね。Pythonは、数値計算を素直に書くと処理が遅めな言語ではありますが、NumPyを使えばC言語のネイティブコード上で計算してくれるのでめちゃくちゃ速くなります。

pandas

f:id:paiza:20161227143647p:plain
こちらも速度が必要な部分はC言語などで書かれているので高速に動いてくれるデータフレームライブラリです。時系列データなどの扱いが大変楽になってよいです。あと欠損値の補完や変形など、楽にデータ操作をするための機能が多数あるところもよいです。

matplotlib

f:id:paiza:20161226222751p:plain
↑のNumPy向けのグラフ描画ライブラリです。NumPypandasと合わせてよく使われています。

SciPy library

f:id:paiza:20161226223046p:plain
↑この3つにさらにこれを加えて使われることがあります。科学系の計算とかいろんな計算ができますよ。

Jupyter

f:id:paiza:20161226223225p:plain
これはライブラリというかPythonで分析をした際の記録用ツールで、コードやコメント、データなどをひとまとめに残しておけるツールです。

さらにpy_d3を使うとJupyter内でd3.jsのグラフなども表示できるようになって、より見た目をよくすることができます。逆に見た目は別に気にしないという場合は↑のmatplotlibだけで充分かもしれません。

◆UIとかゲーム関連

kivy

f:id:paiza:20161227114359p:plain
クロスプラットフォームのUIライブラリです。スマホとかマルチタッチ対応もできるのが便利です。

cocos2d

f:id:paiza:20161227114533p:plain
今さら紹介する必要なさそうな言わずと知れたゲームライブラリですね。Objective-CやSwiftでゲームが作れるということで有名ですが、実はPythonがオリジナルです。

◆スクレイプとかAPI叩く関連

Requests

f:id:paiza:20161227115030p:plain
httpでWebサイトのデータを取るときなどに使えます。Pythonの標準ライブラリだけでも取れますが、Requestsを使うともっとわかりやすく書けます。特にAPIを叩きたいときは可読性も上がるし楽です。

lxml

f:id:paiza:20161227115108p:plain
lxmlを使うと、xmlやhtmlをパースしたりすることができます。Seleniumと組み合わせて使えば、スクレイプとかに大変便利です。

Scrapy

f:id:paiza:20161227115341p:plain
自前でスクレイプしたいとき、小規模ならRequests,Seleniumを使う、大規模ならScrapyを使う……というふうにするのがいいんじゃないかなと。Scrapyはスクレイプフレームワーク全部盛りみたいなものだと思っています。

◆その他

Twython

f:id:paiza:20161227143532p:plain
Twitter APIのラッパーですね。たまにTwitter関連のデータ集計が必要なときに使っています。

■まとめ

割と定番のものを中心に紹介してきました。このほかにも、Pythonには機械学習のためにデータを処理するライブラリ(数値演算をするためのライブラリとか図を作成するライブラリとか)がそろっていて、呼び出したり組み合わせて処理したりしやすいので、最近はたくさんの人が機械学習でPythonを使ったり勉強を始めたりしてますねー。

paizaでもPythonが学べる動画学習コースを公開していますので、初心者だけどPythonに興味ある!という人はぜひのぞいてみてください。




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

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

paizaラーニング

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

paizaのスキルチェック

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

Python初心者が2系→3系への移行時に意外と気づかないけど、知らないままだと危険な変更点

f:id:paiza:20161220122202j:plain
Photo by Yuya Tamai
秋山です。

私は主にPythonを使って開発をしているのですが、Python2系とPython3系にはいろんな変更点があります

で、互換性がない変更点も割とあって、よく知らないまま初心者が2系から3系に移行しちゃうと結構危険なところもあるので、今日はその辺の話をしていきます。

print に括弧が必要になっちゃったよねーみたいな話や、よく言われている raw_input とか xrange の話は飛ばします。

■意外と気をつけたいPython3系における変更点

◆map,filter,zipがイテレーターを返してくる

Python2系ではmap, filter, zipともに普通のリストを返していますよね。

map_object = map(int, "12345")
print(list(map_object))
print(list(map_object))

この場合、3系だと2回目の出力でリストの中身は空になります。イテレーターなので。

sumも同様です。

next(map_object)

を実行すると、返した値が消えます。

これは当然、for文やリスト内包表記で使っても消えてしまいます。

既にPython2系でもイテレーターを使ったことがある人にはなじみのある動作で「当たり前やんけ」と思うかもしれません。が、あまりイテレーターなどに触れたことがない人、「mapとかfilterとかzipって、つまりリストでしょ」と思い込んでいる人が、気付かずPython3系に移行して使うと重大なバグを生みそうな部分ではあると思います。

◆iterator の .next() が名前変更されて __next__() になった。

本来は __eq__, __len__ などと同等に扱われるべきだったのにずっと残っていたのが、3系になってやっと変更になった部分です。

リストが list.__len__() という関数を持っていて、組み込み関数の len() で長さが取得できる……というのと同じように、イテレーターも iterator.__next__() という関数を持っていて、組み込み関数の next() を使えばイテレータの次が取得できる……というやり方にした方が一貫性があるよね、ということで変更されたようです。

Python2では iterator.next() と next(iterator) が両方使えましたが、Python3では next(iterator) しか使えないので注意しましょう。

◆dictなどのitems()で返ってくるのが、リストでもイテレーターでもなくビューオブジェクトになった

dict の items,values,keys で、2系ではリストが返ってきていましたが、3系ではビューオブジェクトを返すようになりました。2系であった、 iteritems などイテレーターで取得する手段もなくなりましたね。

ビューオブジェクトはリストでもイテレーターでもないので

d = {'a':1,'b':2,'c':3}
dict_items = d.items()
print(next(dict_items))
print(dict_items[1])

上記のように、nextを使って値をイテレーター的に取得することも、リストとして取得することもできません。

d = {'a':1,'b':2,'c':3}
dict_items = d.items()
for i in dict_items:
     print(i)

上記のようなループ処理では使えます(帰属演算子 in が使えるということです)。

len() を使って総数を確認することや iter() でイテレーターを作ることもできますので、 iteritems() と同等の処理をしたいときはこちらを利用できます。

ビューオブジェクトの詳細はこちらを参照してください。
4. 組み込み型 — Python 3.5.4 ドキュメント

◆リスト内包表記の変数のスコープが外に漏れなくなった

[i for i in range(3)]
print(i)

このコードですが、

↓こちらは【Python2】です、実行してみてください。
エラーにならず、 i の値が普通に出力されます。

↓一方、【Python3】では……実行してみてください。
i のスコープがリスト内包表記の外に漏れないので、 i が未定義ということでエラーになります。

2系ではリスト内表記の i を内包表記外で使えていたのですが(それ自体コードの書き方としてあんまりよくないんですが……)、3系だと想定外の i が出てきたということでエラー扱いされるようになりました。

◆地味に使えていた <> 演算子が使えなくなり、使えるのは != だけになった

SQLなどでも使う演算子 <> が、3系では使えなくなっています。

現実的には、2系でもほとんどの人が != を使っていたと思うのでトラブルが起こる可能性は低いかと思いますが、3系では廃止されているので要注意ということで。

◆a,b,c = (1,2,3) のような代入のとき、 *a, b, c = (1,2,3,4) というような書き方ができるようになった

a, *b, c = (1,2,3,4,5)
print(a, b, c)

このようなコードの出力結果は

1 [2, 3, 4] 5

となります。

ちなみに

a, *b, *c = (1,2,3,4,5)

みたいな書き方は当然ですが不可能ですので。

便利に使えそうな気もする一方で微妙にわかりづらい書き方ですが、Python3系の場合は誰かがこんなふうに書いている可能性がなきにしもあらずなので要注意です。

■まとめ

これだけじゃなく、2系と3系の間にはほかにもいろいろな変更が入っているので、詳しく知りたい人は公式ドキュメントを見てみましょう。

公式なので当然ですが、2→3の大きな変更以外にも、3.4→3.5などの細かーい変更に関しても詳しく書かれています。
What's New in Python — Python 3.7.3 ドキュメント


あと途中でブログパーツとして使ったオンライン実行環境サービス「paiza.IO (パイザ・アイオー)」はこちら

Python2・3はもちろん、ブラウザだけで多数言語のコードを実行することができちゃいます。2系と3系で同じコードを書いた時の動作の違いとかもすぐに確認できますので、気になる人は使ってみてください。
Online PHP/Java/C++... editor and compiler | paiza.IO

■Pythonの学習レッスン動画も公開中!プログラミング学習コース

f:id:paiza:20160830130051j:plain
paizaでは、未経験者でも動画を通してプログラミング等が学べる「paizaラーニング」を公開しております。

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

paizaラーニング

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

paizaのスキルチェック

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

Web制作を劇的に効率UPさせる、最近人気の軽量「CSSフレームワーク」を厳選してみた!

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

みなさんは、「CSSフレームワーク」を活用しているでしょうか?


いきなりフレームワークと聞くと、「なんだか難しそう…」と思ってしまうかもしれませんが、最近は誰でも利用できるようにシンプルな設計で公開されているモノが増えています。

そこで今回は、多機能でありながらも学習コストが低い「CSSフレームワーク」を厳選し、レスポンシブ対応でモバイルに優しいものをいくつかご紹介しようと思います!

■CSSだけで多彩なサイトを構築できるフレームワーク!

Picnic CSS

f:id:paiza:20161219141052j:plain
Web制作に必要なコンテンツを、とにかく簡単な手順で手っ取り早く構築できるように設計されているのが「Picnic CSS」です!

特に、Flexboxを活用した非常に柔軟なグリッドレイアウトや、JavaScript不要でインタラクティブな要素を構築できる機能などはとても便利だと思います。


例えば「グリッドレイアウト」を使う場合は、クラス名に「flex」と記述するだけでOK!

<!-- index.html -->


<div class=”flex”>
    <div>ボックス1</div>
    <div>ボックス2</div>
    <div>ボックス3</div>
</div>


また、3列でグリッド状に並べたければ、クラス名を「class=”flex three”」のように「列数」をそのまま英語で記述するだけなので非常に直感的で分かりやすいでしょう。

小難しいレスポンシブ対応も「列数」と「画面サイズ」をそのまま記述すれば良いので初心者でも理解しやすいと思います。

(例)画面サイズが1200以上は6列、600〜1200は3列、それ以下は2列の書き方

<div class=”flex two three-600 six-1200”>


</div>

オフセットを指定したり、画面サイズによって条件分岐させることも簡単なクラス名で実現できるようになっています。


以下は、グリッドレイアウトのサンプルです。ぜひ、コードもチェックしてみてください!(スマホの方はコチラ

See the Pen Picnic CSS Sample by CodeSample (@webhacck) on CodePen.


Picnic CSS」では、JavaScriptを書かなくてもある程度の「インタラクティブ要素」も構築できるようになっています。

例えば、Webサービスなどでよく使う「モーダルウィンドウ」をはじめ、画像を多用するようなサイトで活用できる「イメージギャラリー」などがあります。

See the Pen Picnic CSS Sample2 by CodeSample (@webhacck) on CodePen.

(スマホの方はコチラ

他にも、フォーム、カード、テーブル、ナビゲーション、タブ、ツールチップ、固定ヘッダー…など、驚くほど簡単に構築できるので、Web制作を効率よく進められるフレームワークと言っても過言ではないでしょう。

ちなみに、gzip圧縮で10kb以下という軽量のうえ、Normalize.cssをベースに考えられたリセットCSSも組み込まれています。


<参考>

■マテリアルデザインを取り入れたフレームワーク!

Materialize

f:id:paiza:20161219141354j:plain
Materialize」は、Webサイトへ手っ取り早く「マテリアルデザイン」のテイストを取り入れたい場合にピッタリのフレームワークです。

また、それ以外にも非常に多機能なフレームワークなので、これ1つでWebサイトやサービスなど幅広い制作に活用できるポテンシャルを秘めているのが特徴と言えます。


マテリアルデザインで印象的なカラーパレットや、その配色を活かしたボタンなどのコンテンツは非常に簡単な手順で導入できるようになっています。
f:id:paiza:20161219141407j:plain
例えば、覚えづらいカラーパレットも「red」「pink」「purple」のような基本的なカラーの名称さえ知っていれば、あとは明るさを指定するだけで自動的に推奨カラーに設定できるという便利な機能が備わっています。

(例)ちょっと明るい感じの「赤色」を使いたい場合

<div class=”red lighten-3”>サンプルボックス</div>

上記のように、明るい色が欲しい場合は「lighten-1」「lighten-2」〜「lighten-5」といったクラス名を追記すればよく、暗い色なら「darken-1」「darken-2」〜「darken-5」のように記述するだけでマテリアルデザインの推奨カラーを指定できるわけです。


また、影を要素に付与する場合も「z-depth-1」「z-depth-2」〜「z-depth-5」のようなクラス名を付与するだけで、イメージ通りの影を簡単に作成できます。

さらに、ボタンなどをクリックした時に波紋のように白く光るエフェクトなども、「waves-effect」や「waves-light」のような「エフェクト名」をクラスに追記するだけで利用可能なので便利です!

See the Pen Materialize Sample by CodeSample (@webhacck) on CodePen.

(スマホの方はコチラ


Materialize」は、「ナビゲーションメニュー」「フッターコンテンツ」「カード」「ページネーション」「カルーセル」「アコーディオン」「モーダル」…のような、Web制作で必要と思われるコンテンツをほぼカバーしている点も魅力的です。

jQueryベースの簡単なJavaScriptと併用することで、以下のような多彩な表現を簡単に実現できるようになっています!

See the Pen Materialize Sample 2 by CodeSample (@webhacck) on CodePen.

(スマホの方はコチラ

公式サイトには、パララックス効果を使ったサンプルデモや、実際にどのような用途に使われているかの使用例も多数公開されていますので、ご興味ある方はぜひこちらも一度チェックしてみることをオススメ致します!

<参考>

■究極に軽くて学習コストも低いフレームワーク!

Milligram

f:id:paiza:20161219141809j:plain
Milligram」は、gzip圧縮でたったの2KBしかない超軽量級のフレームワークで、主にプロトタイプ制作などに最適な選択肢になると思います。

また、独自の「クラス名」などがあまり無く、通常のHTMLを記述するだけで見栄えの良いデザインを適用してくれるので、ほとんど学習することなく利用できるのが大きな特徴と言えるでしょう。


例えば、基本的な「テーブル」「引用文」「フォーム」などの要素は、CSSを一切書かずにHTMLの記述だけで以下のようなデザインが自動的に適用されます!

See the Pen Milligram Sample by CodeSample (@webhacck) on CodePen.

(スマホの方はコチラ


もちろん、独自の「クラス名」も用意されていますが記述は非常に簡単です。

例えば「グリッドレイアウト」の場合だと、「row」クラス内で必要な要素に「column」クラスを付与するだけでOKです!

<div class=”row”>
    <div class=”column”></div>
    <div class=”column”></div>
    <div class=”column”></div>
</div>

以下は、「ボタン」や「グリッドレイアウト」のサンプルになります!

See the Pen Milligram Sample 2 by CodeSample (@webhacck) on CodePen.

(スマホの方はコチラ

細かいオフセットの調整やスタイルのパターンを変えるクラスも用意されていたり、「clearfix」「container」といったユーティリティも利用できるので便利です。

ある程度「見た目」を気にしつつも、手っ取り早くプロトタイプを構築したいケースには最適なフレームワークと言えるでしょう。


<参考>

■シンプルなデザインに特化したフレームワーク!

Spectre.css

f:id:paiza:20161219142044j:plain
先ほどご紹介した「Milligram」だとちょっとシンプル過ぎる…という方の第2の選択肢としても活用できるのがコチラ!

gzip圧縮で6〜7kbと、非常に軽量なフレームワークにも関わらず、必要と思われるほとんどのWebコンテンツを簡単に構築できるように設計されているのが大きな特徴と言えるでしょう。

可能な限り無駄を省いたシンプルなデザインに特化しているので、プロトタイプ用途や個人で開発するSPAやWebアプリなどのUIに最適だと思います。


クラスの指定方法がどことなくBootstrapと似ているため、慣れている方であればサンプルコードを少しいじるだけですんなり導入できると思います。

<!-- ボタン要素のスタイリング -->
<button class="btn btn-primary">プライマリ</button>


<!--- フォーム要素のスタイリング -->
<div class="form-group">
    <label class="form-label" >名前</label>
    ・
    ・
</div>


<!-- グリッドレイアウトのスタイリング -->
<div class="columns">
    <div class="column col-md-6 col-xs-12">要素</div>
    ・
    ・
</div>

以下に、基本的なサンプルを掲載しておきます。

See the Pen Spectre.css Sample by CodeSample (@webhacck) on CodePen.

(スマホの方はコチラ


また、軽量&シンプルなフレームワークにも関わらず、「ツールチップ」「メニュー」「タブ」「パンくずリスト」「ページネーション」「カード」などの多彩なコンテンツも簡単に構築できるのが魅力的です!

See the Pen Spectre.css Sample 2 by CodeSample (@webhacck) on CodePen.

(スマホの方はコチラ

全体的なデザインがとてもシンプルなので、いろんなタイプのWeb制作に合うと思います。とにかく、素早くカタチにしたいケースには重宝するフレームワークではないでしょうか。


<参考>

■モダンでお洒落な雰囲気のフレームワーク!

Bulma

f:id:paiza:20161219142340j:plain
Bulma」(ブルマ)という名称がとても印象的ですが、中身はモダンでカラフルな配色が施されている多機能で実用的なフレームワークになります。


例えば、「ボタン」「タグ」「通知」「ローディング」などの基本パーツは、いずれも目に止まりやすい明るいカラー配色が使われているのが特徴的でしょう。

See the Pen Bulma Sample by CodeSample (@webhacck) on CodePen.

(スマホの方はコチラ

また、ユニークな点として「ヒーローバナー」と呼ばれる…バナー表示で大きなテキストを表示できる機能があります。

これは、まさにブログ記事などで「タイトル」のテキストを大きく表示したいようなケースにピッタリと言えるでしょう。もちろん、Webサイトのトップページに表示するメッセージなどにも有効です。

See the Pen Bulma Sample 2 by CodeSample (@webhacck) on CodePen.

(スマホの方はコチラ


さらに面白い特徴として、自在にレイアウトが可能な「タイル状」のWebデザインを簡単に構築できる機能が提供されています。
f:id:paiza:20161219142428j:plain
これは、複数の「tile」クラスを「ネスト構造」にしていくことで、複雑な配置のデザインを簡単に実現しています。


具体的には、「tile」クラスを付与した要素を用意し、「親要素」「子要素」をペアで作りネストしていきます。

<!-- すべてのタイルの親クラスを作成 -->
<div class="tile is-ancestor">


    <!-- 親要素を作成 -->
    <div class="tile is-parent">


        <!-- 子要素を2つ作成 -->
        <div class="tile is-child"></div>
        <div class="tile is-child"></div>
    
    </div>


    <div class="tile is-parent">
        <div class="tile is-child"></div>
    </div>


</div>

「tile」クラスは、基本的に水平方向へどんどん並べられるのですが、垂直方向に配置できる「is-vertical」クラスを併用することで、複雑な配置も簡単に実現できるように設計されています。

以下は、タイルデザインのサンプルです。スマホだと縦一列に要素が並ぶので、PCブラウザを利用してみてください!(コチラから別タブでも開きます)

See the Pen Bulma Sample 3 by CodeSample (@webhacck) on CodePen.

Bulma」は、全体的にモダンなレイアウト&デザインを取り入れているので、用意されているコンテンツを利用するだけで、ちょっとお洒落なWebサイトを手軽に構築できるのが魅力と言えるでしょう。


<参考>

■美少女育成×プログラミングゲーム「もし次の常駐先が、女子エンジニアばっかりだったら」を公開!!

f:id:paiza:20161202164715j:plain
paizaでは、美少女育成プログラミングゲーム「もし次の常駐先が、女子エンジニアばっかりだったらの公開を開始いたしました。

もし次の常駐先が、女子エンジニアばっかりだったらは、ITエンジニアの夢をかなえる楽しく華やかな環境での業務シミュレーションを行いながら、さまざまな難易度のプログラミング問題を解くゲームです。

ITエンジニアとして働くあなたが新しい常駐先を訪ねると……そこは女子エンジニアだらけの開発現場だった!助けを求める女子エンジニアたちへ救いの手を差し伸べていけば、あなたを慕った彼女たちはどんどんチームのメンバーとして仲間になって…!?案件炎上、メンバー離脱……さまざまなトラブルを乗り越えながら案件を成功させ、可愛い女の子たちが成長していくと――。

最高の開発現場を作れるかどうかは、あなたのプログラミングスキルと采配次第!ぜひ挑戦してみてください!

paiza.jp

■まとめ

今回ご紹介した「CSSフレームワーク」は、いずれも簡単に扱えてドキュメントがとても充実しています。

そのため、公式サイトに掲載されている「サンプルコード」をコピペして、実際に動作確認をしていくだけで、ある程度の使い方が分かるようになると思います。

慣れてくると、簡単なWebサイトであれば驚くほど早く、そして美しいデザインで構築できるようになるので、ご興味ある方はぜひトライしてみてください!




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

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

paizaラーニング

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

paizaのスキルチェック

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

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング Copyright Paiza, Inc, All rights reserved.