どうも、まさとらん（@0310lan）です！ 今回は、フロントエンド開発者およびこれから学習をしようと考えている人に最適な無料リソースを厳選してご紹介します。 学習コンテンツばかりでなく、開発に便利なサービスやツールなども紹介しつつ、初心者から中級者くらいまで役に立つドキュメントもまとめています。すべて無料なのでWeb開発にご興味ある方はぜひ参考にしてみてください！ ■何を学習したらいいのかをロードマップで確認する 【 Developer Roadmaps 】 フロントエンドの学習といっても意外に広範囲なので、まずは何から勉強をすればいいのか迷う人も少なくありません。この「Developer Roadmaps」はWeb開発者が勉強するための学習内容をロードマップとして無償公開しています。 さまざまな種類が用意されていますが、例えばフロントエンドの場合は以下のような感じです。 有名なロードマ

どうも、まさとらん（@0310lan）です！ 今回は、Webサイトの構造を可視化して直感的に理解しやすい「ビジュアルサイトマップ」を作成できるWebサービスをご紹介します。 ブラウザからGUIベースのエディタにアクセスするだけで誰でも利用可能で、すべてマウス操作でできるので初心者でも簡単に使いこなせます。ブロックを追加していくだけでサイトマップに簡易的なワイヤーフレームが挿入できる点がとても便利です。 また、既存のWebサイトから素早くサイトマップに変換する方法も合わせて解説しているので、ご興味のある方はぜひ参考にしてみてください！ 【 Octopus.do 】 ■「Octopus.do」の使い方 それでは、「Octopus.do」をどのように使うのか詳しく見ていきましょう！ トップページにアクセスしたら【Create sitemap】ボタンをクリックします。 すると「サイトマップエディタ

どうも、まさとらん（@0310lan）です！ 今回は、膨大な量のAPIを横断検索できてそのままブラウザ上でテスト実行も可能なWebサービスのご紹介です。 元々はRapidAPIが提供していたサービスを楽天がパートナー契約を結んだことで、日本語でも利用できるようになりました。2018年末にはバージョン2.0となり改良も進んでいます。 APIの開発者やWeb開発に興味のある方は、ぜひ参考にしてみてください！ 【 Rakuten RapidAPI 】 ■「Rakuten RapdAPI」の使い方 それでは、実際に使いながらどのようなサービスなのかを見ていきましょう！ 最初に、トップ画面から【新規登録】ボタンをクリックしてユーザー登録を済ませておきます。 メールアドレス・パスワードなどを設定すればすぐに登録できます。 （※GitHubやGoogleアカウントでも登録可能です） 登録が完了したら、す

Photo by Phil Whitehouse こんにちは。倉内です。 paizaでは、プログラミング問題を解いてS・A・B・C・D・Eの6段階のランクでコーディングスキルを測るスキルチェックを提供しています。初めてプログラミングに触れた方には、まずDランクの問題から挑戦することをオススメしています。 恐らくpaizaラーニングなどで言語の入門レベルの知識を身につけた方は、Dランク問題はクリアできると思います。しかし、そのあとCランクを取得し、さらにBランク問題に挑戦！となると少しハードルが高いと感じるかもしれません。 そこで今回は先日こちらの記事で解答コードを公開した、ゲームイベントのBランク相当の問題を例に、解答にたどり着くためのプロセスを詳しく解説したいと思います。 はじめに Bランク取得が難しいと感じている方の中にも「要求されていることは理解でき、プログラムも書けるがあと一歩ラン

青木です。paizaラーニング担当のエンジニアです。 paizaで公開しているプログラミングゲーム『エンジニアが死滅シタ世界〜アンドロイドとふたりぼっちで生きろ〜』、みなさんチャレンジしていただけましたでしょうか？ 先日すべての問題の解答コードを公開しましたが、今回はこの中でもっとも難易度の高い「有名なプールサイド [MISSION LEVEL: A]」の問題の概要と解法について図解で解説します。 paiza.hatenablog.com 「とりあえずどんな問題か知りたい」「やってみたけど解けなかった」といった方の参考になればと思います。 ちなみに、こちらの問題はランキング問題となっており、上位スコア獲得者はランキングに掲載されます。 後半ではより効率的な解き方でスコアを高めていく方法についても解説しますので、「とりあえず正解はできるけどスコアが伸びない」「もっといい感じの解き方が知りたい

こんにちは。谷口です。 paizaでは多数のプログラミングスキルチェック問題を公開しています。 問題はS・A・B・C・Dと5つのランクにわかれているので、プログラミング初心者の方でもDランクから無理なく挑戦していただくことができます。 ただ、プログラミングの勉強を始めたばかりの方から「簡単な問題は解けるけど、なかなかランクをアップさせることができない」「少し難しい問題になると、途端に解き方がわからなくなってしまう…」とご相談を受けることもあります。 そこで、paizaラーニングでは「スキルチェック入門編」という動画講座を全編無料で公開しています。 プログラミング問題を題材に、単純な解き方だけでなく、コードの改善の仕方やアルゴリズムの考え方などもあわせて解説しています。「プログラミングスキルをアップさせたい」「プログラミング問題に挑戦してみたい」といった方の参考になると思いますので、今回はそ

Photo by edro Alonso こんにちは。谷口です。 プログラミング初心者の皆さんは、OSや仮想マシン、ネットワークシステムやコンピュータアーキテクチャなどといったいわゆる低レイヤーの分野を学んだことはありますか？ 低レイヤーの技術とは、すごく簡単に言うと、より物理的なコンピュータの仕組みに近い技術のことです。 例えば、初心者でもRubyやPythonなどで、「Hello World」を表示させる、「1+2」の計算結果を変数に格納する…などといったことはできますよね。では、print関数や四則演算の実行を命令したときに、コンピュータのどこで、どんなことが起きているのでしょうか？これを理解するためには、低レイヤーに関する勉強が必要です。 「プログラミングできたら何が起きてるかなんてわからなくてもいいじゃん」と思われるかもしれませんが、実務でシステム障害が発生したり、メモリやCPU

こんにちは。谷口です。 プログラミング初心者のみなさんは、アルゴリズムについて勉強された経験がありますか？ 「プログラミングは勉強しているけど、アルゴリズムについてきちんと勉強したことはない」「プログラミング言語の書き方やフレームワークなどの勉強を優先しているから特にやっていない」という方も多いと思います。 ただアルゴリズムを全然知らないと、ちょっと開発が複雑になってきたときに どう実装すべきかわからない とりあえず力技で作る 力技で作ったコードは改修が面倒 できる人に「もっといいやり方がある」と言われる しかし自分ではその「いいやり方」を思いつけない… …といったことも起こりえます。 そこで今回は、paizaを作っているエンジニアたちに、実際に読んでアルゴリズムの勉強に役立った書籍を聞いてきました。 アルゴリズム初心者の方の参考になればと思います。 長田です。ブログでは健康オタクエンジニ

どうも、まさとらん（@0310lan）です！ 今回は、WebサイトのCSSを自分好みに変更してビフォー・アフターを簡単にシェアできるChrome拡張機能をご紹介します！ 開発者ツール上で普通にCSSを変更するだけで永続的に適用できるので、ブラウザさえあれば誰でも実行できるのが大きな特徴です。 なお、CSSの基本的な知識はpaizaラーニングの「HTML/CSS入門編」（一部無料）で学ぶことができます。そちらも合わせてチェックしてみてください。 【 StyleURL 】 ■「StyleURL」の使い方 それでは、まず最初に「StyleURL」を使うための準備をしましょう！ サイトにアクセスして、画面中央にあるボタンをクリックします。 「Chromeウェブストア」が表示されるので、画面右上にある「Chromeに追加」ボタンをクリック！ すると、自動的にインストールされて準備が整います。 「St

プレイしてみる (English article is here) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 皆さんは、オンライン対戦ゲームをプレイしたことはありますか？ オンラインゲームは友人と遊ぶだけでなく、世界中の知らない人たちと一緒にプレイするのも楽しいですよね。最近は、PUBGやフォートナイトのような3Dの対戦ゲームも盛り上がっています。 このような3Dオンライン対戦ゲームを自分で作ってみませんか？ かつては、このようなゲームを自分で作ろうと思ったら、サーバとクライアントのプログラムを用意した上で、複雑なネットワーク通信や3Dプログラミングに挑戦しなければなりませんでした。 しかし、最近ではサーバ・クライアント・ネットワーク・3Dの全てをJavaScriptだけで取り扱うことができるようになっており、以前よりかなり簡単に3Dオンライン対戦ゲーム

こんにちは、フジワラ(@Fujiyama_Yuta)です！ 普段はフリーランスのエンジニアとして働いています。仕事の合間や、休日のプライベートの時間を使って個人で勤怠管理サービスの開発・運用も行なっています。2ヶ月前にリリースして、現在は保守・運用をしつつ、ちょっとずつ改良をしています。 私もそうでしたが、エンジニアだったら「自分で考えたサービスを作ってみたい！」って思うことありますよね。でも、何から手をつけたらいいのか、どうしたらいいのかわからない...って人もきっと多いはずです。 今回の記事では、私が実際にサービスの企画・開発・運用までやってみてわかった、個人開発するメリットや、個人開発において大事なこと、モチベーション維持についてなどの知見を共有したいと思います。 個人開発、やってみたい！興味ある！という人の参考になればと思います。 1. 作ったもの - OFFICECLOCK 作っ

Photo by Tnarik Innael プログラミングをこれから学ぼうとしている方や、これから研修や実務に入る新人エンジニアの皆さんの中には「C言語を学習したい」という方もいらっしゃるかと思います。 C言語は、プログラミング言語の中でも群を抜いて処理速度が早く、一般的なシステムの開発だけでなく、OSやハードウェアの開発にも向いており、Windows、LinuxといったOSの開発にも使われています。 基礎的なプログラミング言語として人気が高く、大学などの情報系学部の授業でも取り上げられることの多いC言語ですが、習得するのは「難しい」「ハードルが高い」と思われがちです。 C言語のハードルを上げている要因の一つは、「ポインタ」の存在かと思います。 ポインタとは、メモリの場所であるアドレスを記憶するための変数のことなんですが、初心者にそれだけ言われても何のこっちゃという感じですよね。 そこで

どうも、まさとらん（@0310lan）です！ 今回は、ブラウザさえあれば今すぐ「プログラミング動画」を制作してネット上に公開できる無料のWebサービスをご紹介します！ 自分の声を一緒に収録することも可能なので、チュートリアル動画やプログラミング講座などを自由に制作できるスグレモノです。 優秀なコードエディタや動画編集機能なども優れているので、ご興味ある方はぜひ参考にしてみてください！ 【 Scrimba 】 ■「Scrimba」の使い方！ それでは、実際に「Scrimba」を使いながら、どのようなサービスなのかを見ていきましょう！ まず最初に、トップページの画面上部にある「ログイン」ボタンからGitHubアカウントと連携しましょう。 ログインが済んだら、次に「create」をクリックします。 すると、「新規作成」ウィンドウが表示されます。 ここで、「① テンプレート」と「② プロジェクト名

どうも、まさとらん（@0310lan）です！ 今回は、人工知能を活用した高度な画像解析を、簡単なJavaScriptコードで実現できるWebサービスをご紹介します！ 画像に写っている「顔」を認識させて、その人物の「感情」を読み取ったり、顔の座標データを取得するようなことが簡単にできるのでオススメです。 【 Kairos 】 ■「Kairos」の使い方！ それでは、実際に「Kairos」を使いながら、どのような画像解析ができるのかを見ていきましょう！ まず最初に、以下のリンクからユーザー登録を済ませておきます。 【 ユーザー登録ページ｜Kairos 】 メルアドやパスワードなどを登録するだけで、誰でも利用可能です。（登録したメルアドにリンクが送られてくるので、それをクリックしてログインします） ログインしたら、自分専用の「ダッシュボード」が表示されます。 画面下に、「App ID」と「Key

Photo by thekirbster こんにちは。谷口です。 先日paizaが行ったアンケートで、「好きなプログラミング言語」の1位（※社会人2位・学生1位）にPythonがランクインしました。 paiza.hatenablog.com Pythonは1990年代前半からオランダ人のグイド・ヴァンロッサムによって開発されたオブジェクト指向スクリプト言語で、文法が必要最小限に抑えられており、ITエンジニアの学習の負担が軽減された開発言語と言われています。 海外では、近年Pythonによる開発が急速に増加しており、InstagramやDropboxなどの開発にも使われています。また、機械学習に適したライブラリが多く、最近は日本でも積極的に取り入れる企業が増加してきており、これからの一層の普及が期待される人気言語となっています。 Pythonはバージョン2系と3系があり、3系には後方互換性が

Photo by Trevor Owens こんにちは。谷口です。 プログラミング初心者の皆さんは、これから何を使って勉強しようと考えていますか？ paizaを運営していると、 プログラミング未経験だけど勉強を始めたい 環境構築や経験者向けの書籍に挑戦したけど挫折してしまった 周りにプログラミングを教えてくれる人がいない 何をどう始めたらいいのかわからない といったお悩みを聞くことがあります。 最近は、学習サイトや書籍やスクールなど、いろいろなスタイルでプログラミングを学べますが、自分に合わないやり方で進めていくと 金銭面の負担が大きくて続けられない 途中で理解できなくなって挫折 プログラミングが楽しくなくなって断念 ということも起こりえます。 そこで今回は、初心者向けの問題を解きながらプログラミングを勉強できて、本格的なゲームとしても楽しめるコンテンツを7件ご紹介します。 【目次】 ■ロ

Photo by Ruth Hartnup こんにちは。谷口です。 先日paizaが行ったアンケートで、「好きなプログラミング言語」の2位（※社会人1位・学生3位）にJavaがランクインしました。 paiza.hatenablog.com Javaは、1990年代前半にサン・マイクロシステムズ（2010年Oracleにより吸収合併）でジェームズ・ゴスリン氏、ビル・ジョイ氏らによって開発されて以降、長年世界中の幅広い開発分野で使用されています。Javaエンジニアの求人は、これまでは金融関係のシステム（ATM等）などの比較的大規模開発案件が中心でしたが、近年ではAndroidのネイティブアプリ開発現場等でもかなり増加しています。 Javaを習得できれば、Webサービスだけではなく組込み系やデスクトップアプリ等、大小様々なシステムに活用することができます。JavaはOSに依存せず、ライブラリも豊

Photo by Sjors Provoost こんにちは、谷口です。 プログラミング初心者の方々は、どのような方法でプログラミングの勉強がしたいと思いますか？ 最近は、プログラミングやWeb制作の知識を学習ができるWeb漫画が増えてきました。 特にプログラミングの学習を始めたばかりの頃は学ぶことが多く、ハードルが高く感じてしまうこともあるでしょう。プログラミング初心者の方々の中には、「独学で勉強を始めたけど、難しすぎて挫折した……」という方もいらっしゃるかと思います。 そんな中で、漫画をプログラミングやWeb制作の知識を身につけることができれば、楽しんでプログラミング学習を続けることができるのではないでしょうか。 今回は、プログラミングやWeb制作の知識を学習ができるWeb漫画の中でも特にクオリティが高いというか私が好きなものを8件ご紹介いたします。 ■プログラミング関連の知識が学べるW

Photo by Steven Cooper 青木です。 昨年の4月にpaiza（の運営元のギノ）に新卒エンジニアとして入社いたしまして、一年が経ちました。長かったような短かったような。 というわけで今回は、この一年で学んだことを、開発業務もそれ以外も含めて振り返ってざっくりまとめていこうかと思います。 現在エンジニアを目指していて、実際に就職したらどんなことをするんだろう？と気になっている人や、paizaの中の人ってどんなことしてるんだろう？と思っている人の参考になればと思います。 ■入社の経緯など 学生時代は情報系が専門で、アルゴリズムに関する研究をやっていました。（ちなみに研究でメインで使っていた言語はC++でした） もともと東京ではなく地方在住だったのですが、paizaでは学生時代からリモートでスキルチェック問題制作のお手伝いをするアルバイトをしていました。 私自身プログラミングコ

Photo by Germán Poo-Caamaño こんにちは。谷口です。 4月からITエンジニアになられた皆さん、ご入社おめでとうございます。 今回は、新人ITエンジニアの皆さんにおすすめしたい書籍を、弊社の現役エンジニアたちに聞いてきました。 分野ごとにわけてご紹介していきますので、片っ端から全部読むというよりは、自分に必要な分野・不足していると思う分野からチェックしてみるのがよいかと思います。 ■仕事全体の進め方について Clean Coder 達人プログラマー 職人から名匠への道 プログラマが知るべき97のこと ■コードの書き方について リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック リファクタリング―既存のコードを安全に改善する― プログラミング作法 ■Web開発について Webエンジニアの教科書 Webを支える技術 ■GitHubについて Git