＜この記事の著者＞ ばんか（bamka） - Tech Team Journal Web制作会社の会社員として働きつつ、個人でブログ／メディアライターとして活動するパラレルワーカー。 iPhone・iPad・Mac・ITツールを用いて人々の生活をより豊かにするための活用術を提供する「デジタルライフブロガー」です。 Web制作に関わる人にとって、すでに公開されているWebサイトというのは非常に重要な勉強材料です。中には「こういった表現、次のプロジェクトで使ってみよう」「こういう見せ方いいなぁ。いつかやってみたい」と、いつか役立てたいサイトもあるでしょう。 そういった「参考サイト」は、自分だけのデータベース化しておくと便利です。私はNotionを使って、自分だけの参考サイト集を作成しています。 【目次】 自分だけの参考サイトギャラリーをNotionで作ろう 自分専用の参考サイトギャラリーを作る

どうも、まさとらん（@0310lan）です！ 今回は、さまざまなWebサービスやデータベースと連携して、独自のWebアプリなどを手軽に開発できるサービスをご紹介します！ データソースの連携や画面デザインなどはドラッグ＆ドロップの操作で簡単に構築が可能で、ロジックやイベント処理などもわずかなJavaScriptを利用するだけで開発できるのが特徴です。 オープンソースで開発が進められており、セルフホストすることで大きな制限もなく活用できるのでご興味ある方はぜひ参考にしてください。 【 ToolJet 】 ■「ToolJet」の使い方 それでは、「ToolJet」をどのように使えばいいのか詳しく見ていきましょう！ まずはメールアドレスを入力したら【Create an account】ボタンをクリックして無料のユーザー登録を済ませておきます。 メールアドレス宛にユーザー登録用のリンクが送付されるの

どうも、まさとらん（@0310lan）です！ 今回は、Web開発などで役に立つ厳選した無料サービスをご紹介します！ 特にWeb開発に慣れていない初心者や非エンジニアの方でも、手軽に特定の機能を提供するページを構築できるサービスを厳選してみました。 また、複数人でのレビュー、サイトの分析、学習リソースなども合わせて掲載しているので、ご興味ある方はぜひ参考にしてください！ ■独自ロードマップを公開してユーザーと共有する！ 【 Roadmap Show 】 Webアプリやサービス自体のアップデートや予定している機能追加などの情報を、プロダクトロードマップとして手軽に一般公開できる便利なサービスです。 サービス側が何をやっていて、どのような改善をしているのかをユーザー側からも分かりやすくなります。 基本的な使い方も簡単で、いくつかのカテゴリ別にタスクカードを追加していくだけです。 これから予定して

どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上からリアルなハッカー気分を疑似体験できるユニークな無料Webゲームをご紹介します！ PCゲームとしてSteamからもリリースされていますが、今回ご紹介するブラウザ版は手軽に遊べるのでオススメです。ターミナル風のゲーム画面が特徴で、実際にJavaScriptを使ってプログラミングもできます。 ハッキングやセキュリティなどにご興味ある方も含めて、ぜひ参考にしてください！ 【 Bitburner 】 ■「Bitburner」の遊び方 「Bitburner」は、西暦2077年のサイバーパンクをテーマにしたディストピアな世界を舞台にしています。 ゲーム画面は3Dグラフィックや派手な演出があるわけではなく、世界観にピッタリなCLIベースのターミナルを忠実に再現しているのが大きな特徴です。 遊び方ですが、面倒なユーザー登録などは必要ありませ

どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptを使ってとにかく遊んだり楽しんだりできるインタラクティブなWebサービスやツールを厳選してご紹介します。 ゲーム体験をしたり、アート作品を作ったり、JavaScriptで開発されたユニークなサービスを利用してじっくりと遊んでみましょう。 Webの楽しい世界にご興味ある方は、ぜひ参考にしてください！ ■リアルタイムにコードを書いて戦うオンライン対戦ゲーム 【yare.io】 世界中のプレイヤーと1対1で戦うゲームなのですが、その戦い方はJavaScriptのコードをリアルタイムに書き換えながら自機を操作するというのが大きな特徴です。 見た目は簡素なシューティングゲームですが、実はかなり奥深いストラテジーゲームみたいな要素が詰まっています。 ゲームの大まかな流れとしては、以下のとおりです。 JavaScriptで自機を制

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

どうも、まさとらん（@0310lan）です！ 今回は、JavaScript初心者から中級者までをカバーできる学習コンテンツを厳選してご紹介します。 完全無料で公開されているものばかりを集めており、なおかつ質の高いコンテンツを選んでいますので独学したい方にも最適です。テキスト、動画、本、Webアプリなど、さまざまな種類のコンテンツを楽しみながらぜひ学習に役立ててください！ ■学習を始める前に これからJavaScriptの学習コンテンツについて解説をしていく前に、ひとつだけ以下のサイトをご紹介しておきます。 【 The Modern JavaScript Tutorial 】 これはJavaScriptの基礎構文・DOM操作・非同期処理・サーバ通信など、ほとんどの学習項目を網羅したリファレンスのようなサイトです。海外で作られたサイトですが、うれしいことに日本語化されているので初心者にも扱いや

こんにちは。倉内です。 「日本のIT業界って世界（特にアメリカ）と比べて駄目だよね」という話はたびたび話題になりますが、アメリカと言ってもGAFAだけが取り上げられるとか、日本のIT業界はSIer（受託開発中心）と自社サービス開発でだいぶ性質が違うとかもあり、比較するのは難しいですよね。 そこで今回は、統計データやアンケート結果などを見ながらIT業界の国際比較をして、現在の日本が置かれている状況を考察してみたいと思います。 おもな観点として、前半は日本と世界のIT業界構造の違い、ベンチャー企業への投資額、インフラ整備とIT化から「日本のIT産業の弱み」を探り、後半では国内企業の売上高や投資に対してITが占める割合から「日本におけるIT産業の重要性」を見ていきます。 出典や関連データも掲載していますので、みなさんもぜひデータからIT業界をひも解いてみてください。 IT産業における日本の弱み

どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上で誰でも簡単にWebサイトを作成できる無料の静的サイトジェネレータをご紹介します！ 特別な開発環境を用意する必要はなくて、コマンドラインからの実行も不要でユーザー登録もありません。そのため、誰でも気軽にWebサイトを作り始められる手軽さが特徴になっています。 本記事の後半では、書き出したソースコードを使ってネット上に公開する手順についても解説しているので、ご興味ある方はぜひ参考にしてみてください！ 【 T3MPL 】 「T3MPL」の使い方 それでは、「T3MPL」をどのように使えばいいのか詳しく見ていきましょう。 まずはサイトのトップページを下方にスクロールして、いくつかのテンプレートが表示されることを確認してください。 2020年10月時点において、以下のようなテンプレートを選択できるようになっています。 ランディングペー

どうも、まさとらん（@0310lan）です！ 今回は、ノーコードで誰でも簡単にチャットボットを作成＆公開できるWebサービスをご紹介します。 基本的な機能はすべて無料で利用可能なうえ、直感的に操作できる編集エディタと高度なロジックを組み立てられる機能を合わせ持ったスグレモノです。 ほとんどのケースに対応できるチャットボットをすぐにでも作成できるので、ご興味ある方はぜひ参考にしてみてください！ 【 Joonbot 】 ■「Joonbot」の使い方 それでは、「Joonbot」をどのように使えばいいのか詳しく見ていきましょう！ 最初にトップページからメールアドレスを入力して、無料のユーザー登録をしておきます。 ユーザー名・メールアドレス・パスワードを入力するだけなので簡単です。（Googleアカウントでのログインも可能） テンプレートの選択画面が表示されますが、ひとまず画面左上にあるリンクをク

どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単にPWAやWebアプリをビジュアルエディタで開発できるWebサービスをご紹介します！ 「Adalo」は、最近人気が高まっているプログラミング不要のNoCodeサービスの一種ですが、なかでも直感的に操作ができて理解しやすいシンプルな設計なのが特徴です。 これまでアプリ開発を諦めていた人やオリジナルアプリの開発に興味ある方はぜひ参考にしてみてください！ 【 Adalo 】 ■「Adalo」の使い方 それでは「Adalo」の基本的な使い方から見ていきましょう！ まずはサイトにアクセスして【SIGN UP】ボタンから無料のユーザー登録を済ませておきます。 メールアドレス・パスワード・ユーザー名を入力すれば完了です。 すると開発したい種類を聞かれるので、今回は「Native Mobile App」（スマホアプリ）を選択してみましょう。

どうも、まさとらん（@0310lan）です！ 今回は、ごく普通の静的なWebサイトにユーザー認証機能を手軽に組み込める無料のサービスをご紹介します。 特に難しいプログラミングは必要なく、単純なHTMLの属性を付与するだけで誰でも簡単に高度な認証機能を実装できるのが大きな特徴です。 また、ログインユーザー向けのコンテンツを作成したり、自動的に画面を遷移させるなど便利な機能もたくさん盛り込まれています。HTMLの基本的な知識があれば誰でも活用できるので、Web開発にご興味ある方も含めてぜひ参考にしてみてください！ なお、paizaラーニングでは、動画で学べる「HTML/CSS入門編」の講座を公開していますので、まずHTMLの基本を学びたいという方にはこちらもおすすめです。 【 Authpack 】 ■「Authpack」の使い方 それでは、「Authpack」の基本的な使い方について具体的に見

こんにちは。谷口です。 ここ数日で休校の要請やリモートワークの推進など、学生・社会人問わず家にいる時間が増えた方が多いと思います。（もちろんリモートではできない業務のため出社されている方もたくさんいらっしゃるとは思いますが……）（paizaも、現在は全社員がなるべくリモートで勤務しています） そこで今回は せっかくだから家での時間を有効活用したい 子どもが時間を持て余しているので何か家で遊べるコンテンツがほしい プログラミングの勉強を始めたい といった方のために、PCさえあれば自宅で楽しくプログラミングが学べる、paizaの学習コンテンツやゲームをご紹介します。 コードクロニクル 対応言語：Python、PHP、Ruby 『コードクロニクル』は、プログラミングが魔法となるファンタジーの世界で、簡単なプログラミング問題を解きながらストーリーを進めていく学習ゲームです。 豊かな自然に恵まれ、さ

こんにちは。倉内です。 WebサイトやWebサービスの開発に欠かせないJavaScriptは、人気も高く習得したいと考えている方も多いのではないでしょうか。エンジニアへの就職活動をしている学生や、未経験からエンジニアになろうという方にとっても、JavaScriptは習得しておきたい言語の1つです。 動的なWebページの作成といったフロントエンドで用いられるのはもちろん、Node.jsに代表されるようにサーバサイドプログラミングでも存在感を増しています。また、jQueryやReact、Vue.jsなどフレームワークも豊富です。 初めて学ぶプログラミング言語としてJavaScriptを選ぶ方も多いと思いますので、今回は基本・基礎を学びたい初心者の方へ向けたコンテンツから、しっかり学びを深めたい中上級者向けのものまで、JavaScriptを学びたいすべての方へ向けて、学習コンテンツと書籍をご紹介

こんにちは。谷口です。 今回は、これからシェルに入門したい方、プログラミング初心者の方向けに、paizaラーニングでシェルの基礎が学べる「シェルコマンド入門編」についてご紹介します。 シェルコマンドって何？ LinuxやUNIXなどのOSを利用するときに欠かせないのがシェルコマンドです。シェルにはいろいろな種類がありますが、最近のLinuxやMacなどでは、bashがシェルの標準環境とされ、広く使われています。 ざっくり言うと、OSを使いたい時に、OSと我々ユーザーの仲介役をしてくれるのがシェルです。 たとえば、コマンドやスクリプトを入力すると、その入力された処理内容をカーネル（OSの核となる、処理を実行してくれる部分です）に依頼してくれたり、処理中に何らかのエラーが発生した時に、われわれでも理解できるようなエラーメッセージを出力してくれたり…というように、OSとユーザーの間を取り持ってく

どうも、まさとらん（@0310lan）です！ 今回は、Webサービスやアプリ開発などで便利に使える機能をAPIで提供しているサービスを厳選してみたのでご紹介いたします。 画像系、ストレージ、CMS、認証系、APIモック…など、さまざまな用途に使えるサービスの特徴や基本的な使い方も合わせて解説しています。いずれも無料で使えるものばかりなので、ご興味ある方はぜひ参考にしてみてください！ ■イラスト風のアバター画像を取得できるAPI 【 Joe Schmoe 】 Webサイト、ブログ、SNSなどに利用可能なアバター画像を取得できるAPIです。 イラスト風の人物画像を取得できるのが特徴で、Webサイトのチームページにアバターとして利用できるほか、自分のプロフィール画像やブログに挿入する画像など無料で利用できます。 使い方は簡単で、以下のような構成のエンドポイントを実行するだけです。 https:/

こんにちは。谷口です。 最近「AWSについて勉強したい、自分で使ってみたい」「仕事でAWSの知識が必要になった」という初心者の方から、「AWSがどんなものかよくわからないので知りたい」と聞かれることがよくあります。 今回は、これからAWSに入門したい方、Web開発初心者の方向けに、paizaラーニングでAWSの基礎が学べる「AWS入門編」についてご紹介します。 AWSって何？ AWS（Amazon Web Services）は、すごく簡単に言うとAmazonが提供するいろいろなクラウドサービスの総称です。 AWSを使うと、たとえば サーバやデータベースなど、用途に合った仮装マシンがすぐ使える（＝自分でサーバ用のマシンなどを用意しなくても済む） ちょっとしたWebサービスの開発に使うためのWebサーバから、ビッグデータの分析用など、目的に合ったサービスや性能を選べる 使ったぶんだけ料金を払う

どうも、まさとらん（@0310lan）です！ 今回は、フロントエンドによる静的なWebページだけでなく、Node.jsなどのサーバサイドも含めた動的なWebアプリを無料でホスティングしてくれるサービスをご紹介します。 GitHubのリポジトリと連携することで、とにかくWebアプリを公開するまでの作業が簡単かつ高速に実現できるのが大きな特徴です。 サーバレスによる実行も可能なので、ご興味ある方はぜひ参考にしてみてください！ 【 Unubo 】 ■「Unubo」の使い方 それでは、「Unubo」をどのように使っていけば良いのか見ていきましょう！ まずは、サイトにアクセスしたら【SIGN UP】ボタンをクリックします。 無料のユーザー登録画面が表示されるので、ユーザー名・メールアドレス・パスワードを入力しましょう。 登録したメールアドレス宛にリンクが送られてくるので、それをクリックすれば登録完了

どうも、まさとらん（@0310lan）です！ 今回は、あらゆるドキュメントが作れて自分の好きなようにカスタマイズも可能なWebサービスをご紹介します。 簡単に言ってしまうと、Word・Excel・IFTTT・Trelloが融合したようなドキュメント作成サービスになっており、非エンジニアの方でも簡単に高度なカスタマイズができます。 また、知人を招待して一緒にドキュメントを共有・編集したり、パブリックに公開してブログのように使ったり、プライベートで自分専用の秘密メモを作ったり、さまざまなことができるのでご興味ある方はぜひ参考にしてみてください。 【 Coda 】 ■「Coda」の使い方 それでは、実際に「Coda」をどのように使っていけばよいのかを見ていきましょう！ まずはサイトのトップページにある【Sign Up】ボタンをクリックして無料のユーザー登録を済ませておきましょう。 Googleボ

Photo by University of Minnesota Duluth こんにちは。倉内です。 先日弊社の編集担当が、「プログラミング未経験から学習始めたら結構向いてたみたいでスキルチェックでAランク取ったよ」という記事を書きました。 文系出身おじさんがプログラミング未経験からGASおじさんになるまで - paiza開発日誌 私はその人とはいろんな意味で正反対で、中学生のときに初めて買ってもらったパソコンでWebサイトの作成・公開をしてみて面白いなと思い、高校時代にはIT業界に行きたいと思って理系を選択して、大学では工学部情報学科に進みました。 しかし、大学の授業で「自分はあんまりプログラミングには向いてなさそうだから、これだけで生きてくのは厳しいかもしれないな…」と気づいて、「じゃあ技術とそれ以外の合わせ技でいこう」と考えて大手のSIerでSEになりました。 結局SEになってから