paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

情報過多社会における現役エンジニアの情報収集法を解説する

f:id:paiza:20181102123613j:plain
Photo by Allan Sharp
長田です。健康オタクエンジニアです。

前回、健康ではなく「勉強法」についていろいろ書きましたが、今日はそこから派生して「情報収集の方法」について詳しく書きたいと思います。

私は、今年の夏頃から健康に関する情報を収集し始めて健康オタクになったのですが、そのときまず考えていたのが「自分にとって本当に役に立つ情報を、どこからどうやって集めるべきか」でした。

この記事では私が具体的にどうやって情報収集しているのか、あやしい情報と根拠のある情報をどうやって嗅ぎ分けているのかといったことを書いていきます。

私は健康に関する情報を集める(もはや一番の趣味…)ためにこれらを実践しています。が、もちろんITエンジニアなので技術系の情報もよく調べていますし、どんなジャンルの情報収集にも応用できると思います。

情報あふれる現代社会で生きていくために、何か参考になる部分があれば幸いです。

情報過多社会ならぬ情報希薄社会?

下がり続ける情報の質

情報過多社会と言われて久しい昨今ですが…皆さんがふだん触れている情報の質は高いと思いますか?

あふれる情報の中には、ソースがあやしいもの、事実を捏造・歪曲したものなども多いですよね。近年、情報の量は上がっても、質は著しく下がっているように思えます。

なぜそういった情報が広まってしまうのか?「耳触りのいい情報」「ウケがいい情報」こそが広まり、バズり、注目されるということを、情報発信者たちが知ってしまったからです。

例えば、ツイッターなどで拡散され、いいね数を稼いでいる情報の中には「本当かどうかは分からないけれど衝撃的な情報」や「かわいいイラストやインパクトのある写真が目につくけど根拠のない情報」なども多くあります。

情報の質ではなく「ウケそうな情報」が広まってしまうのが、今の情報過多社会だと思います。

「ググレカス」とも言えない時代の到来

f:id:paiza:20181101144459j:plain
Photo by Bhupinder Nayyar
加えて、今やGoogleの検索結果も簡単には信じられない時代となってしまいました。

SEO(Search Engine Optimization)技術が世の中に広まった結果、Googleの検索結果ランキングは「情報の質の高さ」ではなく「SEO対策」に依存してしまっています。

一昔前のインターネット内では、何かにつけて「ググレカス(ggrks)」と返す風潮がありましたよね。しかし、今やググって出てきた情報が正しいかどうかもわからなくなってしまいました。

今やただ「ググる」だけではなく、自分たちで「ググった情報を仕分けて選別する」必要があります。

危険なのは「体験談」の過度な一般化

Web上の情報で特に気をつけるべきなのは、「個人の体験談や経験則を過度に一般化している情報」です。個人の体験談や経験則は、体験者本人にしか通用しない場合も多く、第三者にはほとんど役に立たないからです。

例えば誰かが「朝5時に起きたら普段より仕事に集中できた!」という経験談を持っていたとします。

別に「テストでこれだけ点数が上がった」「100人を5時に起こしたら90人は成果が上がった」みたいな実験をしているわけではないのなら、他の人にも当てはまるとは限りません。科学的に言えば「再現性が検証されていない」ということになります。

また、その人の仕事内容や食生活、年齢、健康状態、家庭環境などさまざまな状況が噛み合って、たまたま「集中できる」状況を生み出していたのかもしれません。

もちろん、体験者本人が「朝5時に起きたら仕事に集中できた経験」自体は事実ですから、その人自身にとっては有益な情報です。

しかし、情報収集にあたっては「基本的に単一の体験談や事例は一般化できない」のを忘れてはいけません。

知識の質がモノを言う時代

「何を選びとるか」で行動が変わる

情報過多社会の影響で、今や「情報を得られること」自体に優位性が生まれる時代ではなくなりました。誰でも手元のスマホ一つで簡単に情報が手に入るからです。

しかし、我々が持っている知識の質は、人によって大きく異なります。

最近はSNS、ニュースアプリ、Wikipedia、口コミサイトなどなど、さまざまな情報源があります。得られる知識の質もさまざまです。

この知識の質は、そのまま人間の行動にも影響を及ぼします。

私は「科学的根拠のある知識」を基準にしているため、科学的根拠のない情報に関しては発信源が誰であれ、疑ってかかります。一方で、信頼している人や口コミ発信の情報を重視している人は、それをもとに行動を変えたりしますよね。

どちらがいい・悪いという話ではありません。先輩に教えられたモノを使ったら共通の話題ができた、憧れの人と同じ行動をとったらモチベーションが上がった…といったこともあり得ますからね。

大事なのは「自分は何を選びとるのか」を考えて、情報の選別方法を意識的に持っておくことです。

情報収集方法の実践編

ここからは私が実際にやっている情報収集の方法です。(もちろんこれをしていれば絶対に正しい情報にありつける!というわけではありません)

大きく分けて「受動的情報収集」と「能動的情報収集」の2つについて説明します。

「受動的」な情報収集の戦略

まず疑う

f:id:paiza:20181101145000j:plain
Photo by Jurgen Appelo
科学の世界には「批判的吟味」という言葉があります。

これと同じように、なんらかの情報に触れたら、まず「本当かしら?」と疑ってかかります。Web上の情報はもちろん、書籍に載っている情報も鵜呑みにするのは危険です(本に書いてあるから正しい情報というわけではありません)。

もっと詳しく言うと、疑うフェーズにおいては情報を「ストーリー」と「データ」に分解します。

ストーリーには説得力を増幅させる効果がありますから、分離して考えたほうが冷静に吟味できます。(さっき触れた「体験談」とかもストーリーに入ります)

加えて、「この情報はそもそも自分に必要なのか?」も考えます。流れてきたすべての情報を吸収しようとすると疲れるし、そもそも不可能だし、本当に必要な情報のために必要なリソースも削られてしまいますからね。

不要な情報なら速攻「(自分にとっては)価値なし」と捨てて終了です。たとえば、私は芸能スキャンダルやゴシップ情報に興味がなく、必要性を感じないので、目に入ってきてもスルーしています。

深掘りして調べる

「この情報は自分に必要そうである、調べるに値する」と判断できたら、さらに調査をします。

例えば、その記事の中に出典や参考文献、原文などの記載があり、閲覧できる場合は必ず目を通します。書籍の紹介文や翻訳文などは、その要約や翻訳をする過程で仲介者のバイアスがかかっていたり、翻訳が間違っていたりして、原本の内容が捻じ曲がっているケースも珍しくないからです。

出典などがなければ、インターネットで調べます。さきほど「Googleの検索結果も簡単には信じられない」と書きましたが、ちゃんと意識的に選別すれば、検索結果でもある程度信頼できる情報(きちんと論文や文献をあげているような…)は出てきます。

「ノイズレスサーチ」などのGoogle検索結果から信ぴょう性の低い情報を排除してくれるツールも使います。

pasokatu.com

ちなみに、自分なりに信頼できる情報ソースを持っているとめちゃくちゃ便利です。私の場合(何度か紹介していますが)、健康や心理学に関する情報は真っ先に「パレオな男」さんでブログ内検索します。

yuchrszk.blogspot.com

こちらのブログは、年に数千本もの科学論文を読み漁っている化け物みたいな方(ほめています!!)が運営していて、毎日1〜2本の論文を紹介されています。読んでもらえればわかりますが、私の健康情報の基礎はこちらのブログでできています。

が、これも皆さんに「このブログを信じよう!」と言いたいわけでは全然なく(もちろんおすすめではありますが)、重要なのは「自分が得たい情報の質が担保されている情報源を探す」ことです。

私は、本来であれば自分で何千本もの論文を読み込まないといけないコストを「パレオな男」さんによってかなり省けています。(圧倒的感謝っ…!)

このように、コスト削減のためにも「この人が書いた本は信頼できる可能性が高い」みたいな基準が持てると情報収集は楽になります。

ランクづけする

「この情報をどのくらい信頼するか」は、なんとなくランクづけしています。

別に厳密な点数付けをしているわけではありません。以下のような基準をもとに、自分の中で「これは信頼できる!」「これは参考レベルかな」「これは信頼できないな」くらいの分類をしています。

S: 豊富なデータ量の論文がある
A: 豊富ではないにしろ論文がある
B: 論文はなくてもある程度事例がある
C: 強大な事例が1個ある
D: データなし、妄想、エンタメ

なぜランク付けをするかですが、結局「100%信頼できる情報などほぼ存在しない」と考えているからです。だから、100%信頼できる・できないではなく、優先順位付けが大事なんだと思います。

Sランク相当の健康情報でも自分には適合しない可能性はありますし(以前も言いましたが人には個人差があります)、のちに出てきた論文でその説が覆ってしまうこともあり得ますからね。

「能動的」な情報収集の戦略

欲しい情報の質について考える

まず、漫然と情報収集するのではなく、自分がほしい情報についてちゃんと考えます。例えば「集中力」に関する情報を探す場合は、下記のような目的パターンがあります。

  • 古い知識をアップデートしたい
  • 科学的根拠がしっかりあるデータが欲しい
  • 事例データがたくさん欲しい
  • 信頼できる専門家が発信している知識が欲しい
  • 古典的な知識でもとりあえず仕入れておきたい

こういった目的を考えて、情報収集の「ゴール」を決めるわけです。

世の中にあるすべての知識を頭に入れるなんて不可能なので、「どんな知識を仕入れるのか」「どのレベルまで知識を入れるのか」をある程度定めておかないと、ゴールを見失ってしまいます。

本を漁る

f:id:paiza:20181101144326j:plain
Photo by faeryhedgehog
いきなり論文を漁るのは体力を使いますから、まずは本を探します。本探しのコツは、先ほど決めた「ゴール」を満たしてくれる情報があるかどうかです。

例えば「科学的根拠がしっかりした知識を入れたい」のだとしたら、文末などに参考文献を挙げていない書籍は、根拠が保証されないため、情報源候補から外されます。一方で、「とりあえず最近の企業が実践している最新事例をたくさん知りたい」みたいな目的であれば、別に参考文献の記載がなくても許容範囲内かもしれません。

本の読み方に関しては、前回の記事で詳しく書いているので、興味のある人は読んでみてください。
paiza.hatenablog.com

論文を漁る

本で解決できなかった場合は論文を漁ります。と言っても、論文すべてをもれなく読み込もうとすると、時間がいくらあっても足りません。私は別に研究者ではないですから、知りたい情報だけピックアップできればOKです。

優秀な論文は「Abstract(要旨)」を見ただけで、大体の結末がわかります。ただ、それだけではデータの質(分析方法や被験者数、効果量など)に関しては言及されていない場合もあるので、その場合は「Conclusion(結論)」や「Result(実験結果)」などをさらって、知りたい情報があるかどうか見ていきましょう。

論文の読み方・調べ方に関しては、以前も紹介しましたが「心理職のためのエビデンス・ベイスト・プラクティス入門」というとても優れた書籍がありますから、興味のある方は読んでみてください。(心理学以外の分野でも参考になる本です)

心理職のためのエビデンス・ベイスト・プラクティス入門―エビデンスを「まなぶ」「つくる」「つかう」

心理職のためのエビデンス・ベイスト・プラクティス入門―エビデンスを「まなぶ」「つくる」「つかう」

まとめ

というわけで、情報収集についていろいろ書いてみました。

健康法から始まって、前回は勉強法・今回は情報収集法と、いよいよ何が本業かわからなくなってきましたね。エンジニアです。

今までの記事に書いてきた内容は、こんなふうに自分なりに情報の取捨選択をしたり、論文やデータで調べたりした上で、実践していること(そして効果があったこと)を書いてきました。

ただ、私の記事に書いてある内容も、すべてが100%正しいというわけではありません。何度も言いますが、すべての人がひとつの法則にあてはまるわけでもなければ、何年も正しいとされてきた説が新しい論文でひっくり返されてしまうことはよくあります。

どんな分野の情報も、アップデートが重要ですね。みなさんも知識はどんどんアップデートしていきましょう。


以前書いた健康法の記事はこちら
paiza.hatenablog.com

paiza.hatenablog.com





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

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

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

詳しくはこちら

paizaのスキルチェック

未経験からエンジニアを目指す人にとって必ず役立つ6冊の書籍

f:id:paiza:20181102123502j:plain
Photo by hackNY.org
f:id:paiza:20140916135428p:plainこんにちは。谷口です。

開発未経験の方や第二新卒の方から「ITエンジニアになるためにどんな勉強が必要か?」といった相談を受けることがよくあります。

プログラミングの勉強はもちろん不可欠です。ただ、プログラミングをちょっと覚えれば、誰もが多くの人に使われるようなプロダクトを開発できるかというと、そうではありませんよね。

エンジニアになって活躍するには、さらに一歩進んで、システム開発をする際の考え方、チームで開発におけるノウハウ、プロジェクトの進め方…などなども知っておく必要があります。

今回は、実際にpaizaを作っているエンジニアたちに、未経験からエンジニアを目指している人の役に立ちそうな書籍を聞いてきたのでご紹介します。

エンジニアになりたい人・なったばかりの人の参考になればと思います。
 

青木です。paizaラーニングの企画・開発を担当しています。

新装版 達人プログラマー 職人から名匠への道

新装版 達人プログラマー 職人から名匠への道

新装版 達人プログラマー 職人から名匠への道

「ただプログラミング言語の書き方を知っている」というだけでは、基本的なコードは書けても、多くの人に使われるようなサービスやソフトウェアの開発はできません。

この書籍には、プログラミングを通してソフトウエアを作る際の考え方など、仕事としてのよりよい開発を進めていくための慣習や哲学的な知識が詰まっています。未経験からITエンジニアになった人や目指している人には、かなり役立つと思います。

コンピュータの構成と設計 第5版

コンピュータの構成と設計 第5版 上

コンピュータの構成と設計 第5版 上

コンピュータの構成と設計 第5版 下

コンピュータの構成と設計 第5版 下

コンピュータアーキテクチャについて、定番の入門書です。「コンピュータ」とは一体何者なのか、コンピュータの初歩から現代までの歴史、どうやって動いているのか、どうやって作ればよいのかが理解できるようになるかと思います。

「そんなこと学生時代に勉強したぜ、常識だぜ」って人にはもちろん必要ないです。ただ、異業種からエンジニアを目指したい人や学生さんの中には、「プログラミング言語については勉強したけど、ハードウエアやコンピュータ科学などについては全然勉強したことない」って人も多いですよね。そういう人たちも、いずれはこういう書籍を使って体系的に学んでおいたほうがよいと思います。

上下巻ありますが、Kindleでは上下合本が出ていて安くなっているので、紙じゃなくていい人はそちらのほうがいいですね。

コンピュータの構成と設計 第5版 上・下電子合本版

コンピュータの構成と設計 第5版 上・下電子合本版

 

長田です。ブログでは健康オタクエンジニアとして何者なのかわからない記事ばっかり書いていますが、一応エンジニアとして、主にpaiza新卒の開発を担当しています。前職はフリーランスのエンジニアでした。

SOFT SKILLS ソフトウェア開発者の人生マニュアル

SOFT SKILLS ソフトウェア開発者の人生マニュアル

SOFT SKILLS ソフトウェア開発者の人生マニュアル

ソフトウェアエンジニアで、30代前半でセミリタイアに成功したジョン・メソンズ氏の著書です。

この書籍には、エンジニアの生き方について包括的に書かれています。技術力の向上方法や仕事のやり方はもちろん、給料交渉の仕方、フリーランスへの手引き、健康や恋愛、家族などについてまでも言及さえれています。

現役エンジニア、もしくはエンジニアを目指している人なら、生き方の指南書(と言うと大げさですが…)として一度は読んで損はないと思います。転職やキャリアに関する話もたくさんあるので、転職したい人にも参考になるはず。
 

長谷です。プログラミングが動画で学べるpaizaラーニングの制作ディレクターをやっとります。

Team Geek ―Googleのギークたちはいかにしてチームを作るのか

Team Geek ―Googleのギークたちはいかにしてチームを作るのか

Team Geek ―Googleのギークたちはいかにしてチームを作るのか

Googleのマネージャーたちが、エンジニアがチームで働く上での方法論を書いた書籍です。って言うと難しそうですが、読みやすいです。

「君は君の書いたコードではない」は何度でも声に出して言いたい名言。レビューをする側もされる側も、理解しておくべき大事なことですね…。(こういう「エンジニアがチームでうまくやっていくためのコツ」が、例をもとに解説されています)
 

吉岡です。ブラウザ上でWeb開発やプログラミングが実行できるPaizaCloudpaiza.IOの開発を担当しています。

プロジェクトマネジメント知識体系ガイド PMBOKガイド 第6版

プロジェクトマネジメント知識体系ガイド PMBOKガイド 第6版(日本語)

プロジェクトマネジメント知識体系ガイド PMBOKガイド 第6版(日本語)

「PMBOK」と呼ばれるプロジェクトマネジメントの教科書的な書籍です。開発プロジェクトの進め方や、プロジェクト管理、ステークホルダーについてなどなど、プロジェクトマネジメントに必要な要素を網羅して解説されています。

もちろん、すべてのプロジェクトがこの本に書いてあることに当てはまるわけではありません。ただ、PMやエンジニアにとっての共通言語の勉強にはなるので、扱うプロダクトや開発スタイル、マネジメントする側/される側にかかわらず、役に立つ書籍だと思います。

まとめ

現役エンジニアがおすすめする、未経験からエンジニアを目指している人の役に立ちそうな書籍をご紹介してきました。

興味を持たれた方は、この読書の秋にぜひ読んでみてください。

未経験でも学べるプログラミング動画学習サービスpaizaラーニングでは、Python、Ruby、C#、JavaScript、SQLなど多数のレッスンを公開しています。

詳しくはこちら

また、実務未経験から応募できるエンジニア求人はEN:TRYで多数公開しています。

詳しくはこちら
“EN:TRY"





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

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

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

詳しくはこちら

paizaのスキルチェック

初心者も10分でWebサービスを作れる!PythonフレームワークFlask入門

f:id:paiza:20181023173148p:plain
(English article is here)

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

Pythonは、コードが簡潔、ライブラリが豊富、機械学習で事実上の標準となっていることなどから、現在最も人気があるプログラミング言語の一つと言っても過言ではありません。

「Pythonはアメリカの大学で最も多く教えられている言語である」といった データ もあるくらいです。

PythonのフレームワークにはFlask、Django、Pyramid、Bottle…などがあります。中でもFlaskは「マイクロフレームワーク」と呼ばれるシンプルでわかりやすいフレームワークです。

Flask自体の機能はDjangoのようなフルスタックフレームワークに比べると少ないですが、ORマッパーのSQLAlchemyなど他のライブラリを組み合わせることで、さまざまな用途に利用できます。

ただ、いざ開発でFlaskを使おうとすると、Python、Flask、データベースを動かすための環境構築やデプロイなどが必要になってきます。これが意外と厄介で、手順通りにインストールしたつもりでも、OSやバージョン、ほかのソフトウェアなど、さまざまな原因でエラーが出たりして失敗することもあります。

そこで、今回はブラウザだけでFlaskを使ったWeb開発ができるPaizaCloud Cloud IDEを使い、簡単なToDoリストサービスを作ってみましょう。(2018年10月時点で最新のFlask1.0とデータベースMySQLを使った手順で書いていきます)

PaizaCloudでは、さまざまなフレームワークや言語を使ったWeb開発が、ブラウザだけで簡単に始められます。開発環境がクラウド上で動作しているので、自分でサーバなどを用意しなくても、作ったWebサービスをその場で公開することも可能です!

手順に沿って進めれば、初心者でも10分程度で作れるかと思いますのでぜひ挑戦してみてください。

PaizaCloud Cloud IDEを使う

それでは、始めていきましょう。

PaizaCloud Cloud IDEのサイトはこちらです。

https://paiza.cloud/

メールアドレスなどを入力して登録すると、登録確認メールが送られてきます。GitHubやGoogle(Gmail)ログインを利用すると、ボタン一つで登録することもできます。

サーバを作る

開発環境となるサーバを作りましょう。

f:id:paiza:20171213234155p:plain

「新規サーバ作成」ボタンを押して、サーバ作成画面を開きます。

データベースを利用できるように、phpMyAdmin, MySQLをクリックして「新規サーバ作成」ボタンを押します。

f:id:paiza:20180228111202p:plain

3秒程度で、Flaskを使える開発環境がブラウザ上にできあがります。

f:id:paiza:20180228120822p:plain

アプリケーション作成

では、Flaskを使ったWebアプリケーションを作成してみましょう。

まず、Flaskのプログラムを書くためのPythonファイルを作ります。

ここでは、"myapp.py"という名前のファイルを作成します。

画面左側の「新規ファイル」アイコンをクリックしてみましょう。

f:id:paiza:20171218232330p:plain

ファイル名を入力する画面がでてくるので、ファイル名を"myapp.py"として、「作成」ボタンを押します。

f:id:paiza:20181023173718p:plain

作成できたら、最初のプログラムを書いてみましょう。

myapp.py:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return "Hello World!"

app.run(debug=True)

f:id:paiza:20181023173913p:plain

書けたら「保存」ボタンを押すか、「Ctrl-S」や「Command-S」キーを押して、ファイルを保存します。

画面左側のファイルファインダを見ると、"myapp.py"というファイルが作られていることがわかります。

10行足らずの短いコードですが、これだけでも立派なWebアプリケーションです!

コードを見ていきましょう。

1行目の"from flask import Flask"では、flaskモジュールを読み込んでいます。

3行目の"app = Flask(name)"では、Flaskアプリケーションを作成しています。

5行目から7行目が、トップページとなるルートパス("/")に対するアクションを指定しています。

Flaskでは"@app.route('/')"のようなデコレータを利用して、URLのパス名("/")とアクション(index関数)の対応づけを行っています。このindex関数の返り値がWebページに表示される内容です。ここでは、"Hello World!"という文字列を返しています。

最後の"app.run()"で、Flaskアプリケーションを実行します。Flaskアプリケーションはデフォルトで5000番ポートで動作します。

また、app.run()の引数に"debug=True"と指定してデバッグモードで実行することで、エラー時にブラウザ上でエラー内容を確認できるようにしておきましょう。

Flaskサーバの起動

それでは、早速このプログラムを動かしてみましょう。

プログラムを動かすには、Pythonのコマンドを使います。

PaizaCloudでは、ブラウザ上で、コマンドを入力するための「ターミナル」を使うことができます。

画面左側の「ターミナル」のボタンをクリックします。

f:id:paiza:20171213234317p:plain

ターミナルが起動しますので、"python3 myapp.py"のように、"python3"のあとに実行するプログラムの名前を入れて、改行キー(エンターキー)を押します。

$ python3 myapp.py

f:id:paiza:20181023174056p:plain

画面の左側に、"5000"と書かれたボタンが追加されました。

Flaskの開発環境では、5000番ポートでサーバが起動します。

PaizaCloudでは、この5000番ポートに対応したブラウザ起動ボタンを自動で追加しています。

ボタンをクリックすると、ブラウザ(PaizaCloudの中で動くブラウザ)が起動して、"Hello World"と表示されました!

f:id:paiza:20181023174506p:plain

HTMLファイルの表示

次は、"Hello World"だけではなくHTMLファイルを作ってみましょう。

まず、HTMLファイルを表示されるため、myapp.pyの中身を以下のように書き換えます。

myapp.py:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

app.run(debug=True)

f:id:paiza:20181023174553p:plain

コードを見ていきましょう。

1行目で"render_template"を読み込んで利用できるようにし、7行目でそのrender_template関数を実行しています。引数で指定した'index.html'テンプレートファイルを読み込んで、HTMLファイルを生成しています。

なお、FlaskではJinja2というテンプレートエンジンを利用しています。

次に、HTMLファイルを作成しましょう。

まず、画面左側のファイルファインダでホームディレクトリ("/home/ubuntu")を右クリックし、「新規ディレクトリ」を選んで"templates"というディレクトリを作成します。

f:id:paiza:20181023174702p:plain f:id:paiza:20181023174707p:plain

次に"templates"ディレクトリを右クリックし、「新規ファイル」を選んで"index.html"というファイルを作成します。

templates/index.html:

<h1>Todo List</h1>

f:id:paiza:20181023174855p:plain

それでは、ブラウザ(PaizaCloudの中のブラウザ)をリロードしてみましょう。

HTMLファイルの中身が表示されるはずです!

f:id:paiza:20181023174938p:plain

データベースを作成

次に、データベースを使ってみましょう。

データベースサーバ(MySQL)はサーバ作成時に設定したので起動していますが、設定していない場合は以下のように起動しておきます。

$ sudo systemctl enable mysql
$ sudo systemctl start mysql

PaizaCloudでは、このようにroot権限でパッケージをインストールすることもできます。

まずはMySQL上に、このアプリケーションで使うデータベースを作成しましょう。

ここでは、mysqlコマンドを使って、"mydb"というデータベースを作っておきます。

PaizaCloudでは、ブラウザ上でコマンドを入力するための「ターミナル」を使うことができます。

画面左側の「ターミナル」のボタンをクリックします。

f:id:paiza:20171213234317p:plain

以下のコマンドを実行しましょう。

$ mysql -u root
create database mydb;
exit

f:id:paiza:20180216010049p:plain

データベースが作成できました。

テーブルの作成

続いて、データベース上にテーブルを作成してみましょう。

ターミナル上で、以下のコマンドを実行して"todos"という名前のテーブルを作成します。

$ mysql -u root mydb;
use mydb
create table todos(id int auto_increment primary key not null, name text);
exit

テーブルが作成できました。

phpMyAdminの利用

作成したデータベーステーブルのデータは、phpMyAdminでも確認できます。

PaizaCloudで青いアイコンのPaizaCloudメニューをクリックし、"phpMyAdmin"の"open phpMyAdmin"を選びます。(または、PaizaCloudのブラウザ上で、"http://localhost/phpmyadmin/"と入力します。)

f:id:paiza:20180228120501p:plain

phpMyAdminが表示されました。ここで、データベースの閲覧、編集などができます。データベースの内容を確認しながら開発を進めていくと理解も深まるので、ぜひやってみてください。

ToDoリストの作成

それでは、ToDoリストを作成してみましょう。

まず、"myapp.py"を以下のように編集します。

myapp.py:

from flask import Flask, redirect, render_template, request, url_for
import pymysql

app = Flask(__name__)

conn = pymysql.connect(host='localhost', user='root', password='', db='mydb',
     autocommit=True,
     cursorclass=pymysql.cursors.DictCursor
     )
db = conn.cursor()

@app.route('/')
def index():
    db.execute('SELECT * from todos')
    todos = db.fetchall()
    return render_template('index.html', todos = todos)

@app.route('/create', methods=('POST',))
def create():
    name = request.form['name']
    db.execute('INSERT INTO todos(name) VALUES (%s)', (name,))
    return redirect(url_for('index'))

@app.route('/<int:id>/delete', methods=('POST',))
def delete(id):
    db.execute('DELETE FROM todos WHERE id = %s', (id,))
    return redirect(url_for('index'))

app.run(debug=True)

ファイルが編集できたら、「保存」ボタンを押すか、「Ctrl-S」または「Command-S」キーで保存します。

コードを見てみましょう。

1行目では、flaskモジュールから、利用するFlask, redirect, render_template, requestを読み込んでいます。

2行目では、PyMySQLを読み込んでいます。PyMySQLはPythonからMySQLを利用するためのライブラリです。

4行目では"app = Flask(name)"でFlaskのアプリケーションを作成しています。

6行目では、"pymsql.connect()"でPyMySQLのconnect()関数を呼び出し、MySQLと接続しています。

引数では、ホスト名を'hostname'に、ユーザ名を'root'に、パスワードを''(なし)''に、データベース名を'mydb'に指定しています。

"autocommit=True"で、データ追加・変更時に自動的に保存(コミット)するようにします。cursorclassでは、検索結果を辞書として受け取れるようにDictCursorを指定しておきます。

続いて、各URLパスと、その動作(アクション)を設定しましょう。

ToDoリストでは、一覧表示、ToDoの追加、ToDoの削除の3つの操作を行います。

それぞれ、以下のようなURLルーティングを割り当てます。

メソッド パス名 関数名 動作
GET / index ToDo一覧表示
POST /create create ToDo追加
POST /<int:id>/delete delete ToDo削除

ToDo一覧表示を行うindex関数では、db.execute()でToDo一覧を取得するSQL文'SELECT * from todos'を実行します。

SQLの実行結果は、db.fetchall()関数で取得します。

また、render_template()で"index.html"テンプレートを読み込みます。第二引数に"todos = todos"と指定することで、テンプレート中の"todos"変数で、ToDo一覧を参照できるようにします。

ToDo追加を行うcreate関数では、"request.form['name']"で、テキスト入力フォームから送信された追加ToDoの値を取得して、name変数に保存します。

そして、db.execute()でSQLの"INSERT INTO"文を実行し、todosテーブルに追加します。

PyMySQLでは、SQL文中の"%s"のように指定された場所を第二引数の値(name)で置き換えることができます。このように、直接文字列を生成せずに"%s"を経由することでエスケープ処理を確実に行い、SQLを安全に実行できます。

SQL実行後は、redirect_forでトップページにリダイレクトしています。url_for('index')とurl_forを使うことで、直接URLではなくアクション名で指定できるため、より柔軟なコードになります。

ToDoの削除を行うときは、delete関数を使います。パス名で"/<int:id>/delete"のように指定すれば、deleteの引数でToDoのidを受け取れます。

db.execute()で、SQLの"DELETE FROM"文を使って指定したidのToDoを削除します。

SQL実行後は、redirect_forでトップページにリダイレクトしています。

最後に、"app.run(debug=True)"で作成したFlaskアプリケーションをデバッグモードで実行します。

続いて、HTMLテンプレートファイルを編集しましょう。

テンプレートファイルは複数作成することが多いので、共通のレイアウトファイル(templates/base.html)とToDo表示ページ用ファイル(templates/index.html)に分けて作成していきましょう。

まず、ToDo一覧表示用テンプレートファイル "templates/index.html" を以下のように編集します。

templates/index.html:

{% extends 'base.html' %}

{% block content %}
    <h1>Todo List</h1>

    {% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
    <form action="{{url_for('create')}}" method="post">
        <!-- Todo Name -->
        <div class="form-group">
            <label for="name" class="col-sm-3 control-label">Todo</label>
            <div class="col-sm-6">
                <input type="text" name="name" id="name">
            </div>
        </div>

        <!-- Add Todo Button -->
        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-6">
                <button type="submit" class="btn btn-default">
                    <i class="fa fa-plus"></i> Add Todo
                </button>
            </div>
        </div>

    </form>
    

    <!-- Current Todos -->
    <h2>Current Todos</h2>
    <table class="table table-striped todo-table">
        <thead>
            <th>Todos</th><th>&nbsp;</th>
        </thead>
        <tbody>
            {% for todo in todos %}
                <tr>
                    <!-- Todo Name -->
                    <td>
                        <div>{{ todo['name'] }}</div>
                    </td>
                    <td>
                        <form action="{{url_for('delete', id=todo['id'])}}" method="post">
                            <button>Delete</button>
                        </form>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    
{% endblock %}

ファイルが編集できたら「保存」ボタンを押すか、「Ctrl-S」または「Command-S」キーで保存します。

ファイルを見ていきましょう。

ファイルの中に"{% %}"や"{{ }}"と書かれた部分がありますが、これらはPythonのコードとして実行されます。"{% %}"で囲まれた部分のコードは実行だけですが、"{{ }}"では、実行結果がその場所に表示されるようになります。

通常、Pythonではインデントでブロックを作成しますが、HTML中ではインデントが難しいため、"endblock"や"endfor"などでブロックの終わりを示します。

"{% extends 'base.html' %}"では、'base.html'をレイアウトファイルとして利用することを指定します。

"{% block content %}"と"{% endblock %}"で囲んだ範囲がページの中身となる部分で、レイアウトファイルの"content"ブロックに埋め込まれます。

"<form action="{{url_for('create')}}" method="post">"が、追加するToDoの入力フォームになります。送信時は、'create'アクションに対応する'/create'が呼び出されます。

"<input type="text" name="name" id="name">"で、nameという名前のテキスト入力欄を作成します。

"{% for todo in todos %}"では、todos変数でToDo一覧を参照し、一個ずつ"todo"変数に入れて繰り返しています。この中で{{ todo['name'] }}として、ToDoの名前となるnameカラムの値を表示しています。

"<form action="{{url_for('delete', id=todo['id'])}}" method="post">"では、削除ボタン用のフォームを作成しています。url_forを使って、"/delete/ID"というパスを生成しています。

次に、レイアウト用のテンプレートファイル(templates/base.html)を編集しましょう。

"templates"フォルダを右クリックして"新規ファイル"を選択し、"base.html"という名前のファイルを作成します。作成された"templates/base.html"ファイルを以下のように編集します。

templates/base.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Todo List</title>
        <!-- CSS And JavaScript -->
        <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

        <link rel="stylesheet"
            href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
        <link rel="stylesheet"
            href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
        <link rel="stylesheet"
            href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
    </head>
    <body>
        <div class="container">
            {% block content %}
            {% endblock %}
        </div>
    </body>
</html>

ファイルが編集できたら「保存」ボタンを押すか、「Ctrl-S」または「Command-S」キーで保存します。

ヘッダ(head)ではHTMLをきれいに表示するため、linkタグでMilligramというCSSフレームワークを読み込んでいます。

"{% block content %}{% endblock %}"が、レイアウトファイルを利用する各ページの内容が埋め込まれる部分になります。

動作確認

プログラミングは以上です。実際に動かしてみましょう。

Flaskアプリケーション(サーバ)を終了している場合は、以下のように実行します。

$ python3 myapp.py

ブラウザアイコン(5000)をクリックして、PaizaCloud内のブラウザを起動します。

最初はToDoはありませんが、"Todo List"ページが表示されていますよね。

ToDoの追加や削除をしてみましょう。

f:id:paiza:20181023175222p:plain

動きましたね!FlaskとMySQLで作ったToDoリストの完成です!

なお、PaizaCloudの無料プランでは、一定時間が経つとサーバは停止します。継続的に動かしたい場合は、ベーシックプランへアップデートしてください。

詳しくはこちら https://paiza.cloud

まとめ

というわけで、PaizaCloudを使って、開発環境などを構築することなく、ブラウザだけでFlaskとMySQLを使ったWebアプリケーションを作ってみました。

すぐに作れるので、みなさんもぜひ試してみてください!

(何かサービスができたらpaiza( @paiza_official )まで教えてくれるとうれしいです!)


PaizaCloud」は、環境構築に悩まされることなく、ブラウザだけで簡単にウェブサービスやサーバアプリケーションの開発や公開ができます。 https://paiza.cloud


paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

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

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

paizaのスキルチェック